点缀前端旅程：ES链式判断运算符?.、空位合并操作符??和CSS inset

2023-12-07 17:26:50

前言

前端开发是一个充满活力的领域，不断涌现新的知识和技术。为了保持竞争力，前端开发人员需要不断学习和掌握这些新知识。本文将介绍三个前端小知识点：ES链式判断运算符（?.）、空位合并操作符（??）和CSS inset属性。

ES链式判断运算符（?.）

ES链式判断运算符（?.）是ES6中引入的一个新操作符。它允许我们安全地访问对象的属性，即使该属性可能为undefined或null。例如：

const user = {
  name: 'John Doe',
  age: 30
};

// 使用链式判断运算符安全地访问对象的属性
console.log(user?.name); // John Doe
console.log(user?.age); // 30

// 使用传统的方式访问对象的属性，可能会导致错误
console.log(user.name); // John Doe
console.log(user.age); // 30
console.log(user.address); // undefined

如上所示，当我们使用链式判断运算符（?.）访问对象的属性时，如果该属性为undefined或null，它将返回undefined，而不会导致错误。这使得我们可以在代码中更安全地访问对象的属性。

空位合并操作符（??）

空位合并操作符（??）是ES7中引入的一个新操作符。它允许我们为一个变量指定一个默认值，如果该变量为undefined或null，则使用默认值。例如：

// 使用空位合并操作符为变量指定默认值
const name = user?.name ?? 'Guest';

console.log(name); // John Doe

// 如果user.name为undefined或null，则name将被赋值为'Guest'
const user = {
  age: 30
};

console.log(name); // Guest

如上所示，当我们使用空位合并操作符（??）为变量指定默认值时，如果该变量为undefined或null，则使用默认值。这使得我们可以在代码中更安全地使用变量。

CSS inset属性

CSS inset属性允许我们在元素内部创建边距。它可以用来创建各种各样的效果，比如：

创建内边距
创建阴影
创建圆角
创建不规则形状

例如：

/* 创建内边距 */
.container {
  padding: 10px;
  inset: 10px;
}

/* 创建阴影 */
.box {
  box-shadow: 5px 5px 5px #888;
  inset: 5px 5px 5px #888;
}

/* 创建圆角 */
.circle {
  border-radius: 50%;
  inset: 50%;
}

/* 创建不规则形状 */
.shape {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  inset: 0;
}