The above error, I believe that front-end development engineers should often encounter it, or it is caused by incomplete consideration, or it is caused by back-end developers losing data or transmitting wrong data types. Therefore, the non-empty judgment of data access has become a very cumbersome and important thing. The following introduces some new syntax of ES6 to facilitate our development.
1. Optional Chaining Operator (Optional Chaining Operator - ?.):
The optional chaining operator allows you to check whether an intermediate property exists or is null/undefined when accessing an object property or calling a function. If the intermediate property does not exist or is empty, the expression will short-circuit returning undefined without raising an error.
1.1 Usage example:
const obj = {
foo: {
bar: {
baz: 42
}
}
};
// 使用可选链操作符
const value = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined
// 传统写法
const value = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性
1.2 Usage scenarios:
- Chain access to object properties without having to manually check each property for existence.
- Call a function that may not exist.
2. Nullish Coalescing Operator - ??):
The null coalescing operator is used to optionally provide a default value, returning the provided default value only when the value of the variable is null or undefined. Otherwise, it returns the actual value of the variable.
2.1 Usage example:
const foo = null;
const bar = undefined;
const baz = 0;
const qux = '';
cosnt xyz = false;
const value1 = foo ?? 'default'; // 'default'，因为 foo 是 null
const value2 = bar ?? 'default'; // 'default'，因为 bar 是 undefined
const value3 = baz ?? 'default'; // 0，因为 baz 不是 null 或 undefined
const value4 = qux ?? 'default'; // ''，因为 qux 不是 null 或 undefined
const value5 = xyz ?? 'default'; // false，因为 xyz 不是 null 或 undefined
//可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = foo || 'default'; // 'default'
const value2 = bar || 'default'; // 'default'
const value3 = baz || 'default'; // 'default'，因为 0 转布尔类型是 false
const value4 = qux || 'default'; // 'default'，因为 '' 转布尔类型是 false
const value5 = xyz || 'default'; // 'default'
2.2 Usage scenarios:
- Provide a default value instead of using falsy values (such as empty string, 0, etc.).
- Optionally provide alternate values when dealing with variables that may be null or undefined.
3. Nullish Coalescing Assignment Operator - ??= :
The null-coalescing assignment operator combines the null-coalescing operator and the assignment operator. It is used to assign a default value to a variable only when the value of the variable is null or undefined.
3.1 Usage example:
let foo = null;
let bar = undefined;
let baz = 0;
foo ??= 'default'; // 'default'，因为 foo 是 null
bar ??= 'default'; // 'default'，因为 bar 是 undefined
baz ??= 'default'; // 0，因为 baz 的初始值不是 null 或 undefined
3.2 Usage scenarios:
- Assigns a default value to a variable when it is not assigned a value or is assigned the value null or undefined.
4. Note:
These operators are useful when dealing with values that may be null or undefined, simplifying code and improving readability. However, it is important to note that they were introduced in the ECMAScript 2020 standard, so may not be supported in older versions of JavaScript.