Creo que los ingenieros de desarrollo de front-end deberían encontrarlo con frecuencia, o es causado por una consideración incompleta o porque los desarrolladores de back-end pierden datos o transmiten tipos de datos incorrectos. Por lo tanto, el juicio no vacío sobre el acceso a datos se ha convertido en algo muy engorroso e importante. A continuación se presenta alguna sintaxis nueva de ES6 para facilitar nuestro desarrollo.
1. Operador de encadenamiento opcional (Operador de encadenamiento opcional - ?.):
El operador de encadenamiento opcional le permite verificar si existe una propiedad intermedia o si es nula/indefinida al acceder a una propiedad de objeto o llamar a una función. Si la propiedad intermedia no existe o está vacía, la expresión provocará un cortocircuito y devolverá indefinido sin generar un error.
1.1 Ejemplo de uso:
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 Escenarios de uso:
- Acceso en cadena a las propiedades del objeto sin tener que comprobar manualmente la existencia de cada propiedad.
- Llame a una función que puede no existir.
2. Operador coalescente nulo - ??):
El operador coalescente nulo se utiliza para proporcionar opcionalmente un valor predeterminado y devolver el valor predeterminado proporcionado solo cuando el valor de la variable es nulo o no está definido. De lo contrario, devuelve el valor real de la variable.
2.1 Ejemplo de uso:
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 Escenarios de uso:
- Proporcione un valor predeterminado en lugar de utilizar valores falsos (como una cadena vacía, 0, etc.).
- Opcionalmente, proporcione valores alternativos cuando trabaje con variables que puedan ser nulas o indefinidas.
3. Operador de asignación coalescente nula - ??= :
El operador de asignación de fusión nula combina el operador de fusión nula y el operador de asignación. Se utiliza para asignar un valor predeterminado a una variable solo cuando el valor de la variable es nulo o no está definido.
3.1 Ejemplo de uso:
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 Escenarios de uso:
- Asigna un valor predeterminado a una variable cuando no se le asigna un valor o se le asigna el valor nulo o indefinido.
4. Nota:
Estos operadores son útiles cuando se trata de valores que pueden ser nulos o indefinidos, simplificando el código y mejorando la legibilidad. Sin embargo, es importante tener en cuenta que se introdujeron en el estándar ECMAScript 2020, por lo que es posible que no sean compatibles con versiones anteriores de JavaScript.