1.?. (operador de cadena opcional)
En JavaScript, "?" es un nuevo operador llamado "Encadenamiento opcional". Nos permite evitar errores al acceder a una propiedad que puede ser nula o indefinida o al llamar a un método que puede no existir.
Utilice el operador ?. para acceder de forma segura a las propiedades y métodos de un objeto sin causar un error y hacer que el programa deje de ejecutarse. Cuando la propiedad o el método del objeto no existe, la expresión devuelve indefinido en lugar de generar una excepción TypeError.
1.1 Acceder a las propiedades del objeto
const person = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(person.address?.city); // 输出：'New York'
// 输出：undefined，因为person对象没有age属性
console.log(person.age?.toString());
1.2 Llamar a métodos de objetos
const calculator = {
add: function(a, b) {
return a + b;
}
};
console.log(calculator.add?.(2, 3)); // 输出：5
// 输出：undefined，因为calculator对象没有subtract方法
console.log(calculator.subtract?.(5, 2));
1.3 ¿Uso de la cadena?.
const user = {
profile: {
name: 'Alice',
email: '[email protected]'
}
};
console.log(user?.profile?.name); // 输出：'Alice'
// 输出：undefined，因为user对象没有address属性
console.log(user?.address?.city);
Precauciones:
- Cuando se utiliza el operador ?., si la propiedad o método de destino existe y es invocable, se ejecutarán normalmente.
- Si el destino es nulo o indefinido, la expresión devuelve indefinido inmediatamente y no se realizan más intentos para acceder a propiedades o métodos posteriores.
- El operador no se puede utilizar con [] (corchetes). Por ejemplo: obj?.[index] no tiene una sintaxis no válida.
2. ?? (operador coalescente de valor nulo)
En JavaScript, "??" es el uso del operador fusionante de valor nulo. Se utiliza para determinar si una expresión es nula o no está definida y devuelve un valor predeterminado.
const name = null;
/*
使用??运算符来判断name的值是否为空，如果为空，则赋予默认值"Unknown"
*/
const displayName = name ?? "Unknown";
console.log(displayName); // 输出: Unknown
/*
经常在表格或者数据渲染时可以用到，当表格数据为空时，直接显示 -
const data = null?? '-'
*/