operador elegante

Cuando se trata de operadores lógicos, ¿piensas en &&, ||, hoy les traigo un nuevo y útil operador!

1. ¿Operador de encadenamiento opcional? .

Introducción al concepto: el operador de cadena opcional permite leer el valor de propiedad ubicado en lo profundo de la cadena de objetos de conexión, sin tener que aclarar si cada referencia (propiedad) en la cadena de objetos es válida (ya sea nula o indefinida) .

Los operadores de cadena ?. y . tienen funciones similares, pero ?. no reportará un error cuando la referencia esté vacía (nula o indefinida) y el valor de retorno no esté definido, mientras que el operador de cadena .

let shop = {
    
    
      goods: {
    
    
        price: 22,
        // count: 10
      }
    }
    
shop.goods.count.toString() 
// 由于 count 不存在，undefined 使用 toString 方法会报错
    
// 严谨使用，需要通过 if 条件判断对象链中的引用是否存在
if (shop && shop.goods && shop.goods.count) {
    
    
    shop.goods.count.toString() 
}// if条件判断又不太优雅

// 使用可选链运算符，判断依次shop、goods、count 是否存在，不存在，返回 undefined，不会报错
shop?.goods?.count?.toString() 
shop?.[goods]?.[count]?.toString() 
// 一个通过 . 获取对象属性值，一个通过方括号 [] 获取属性值

Con el operador ?., JavaScript verifica implícitamente para asegurarse de que shop no sea nulo ni indefinido y que shop.goods no sea nulo ni indefinido siantes de intentar acceder a shop.goods.count undefined, la expresión provocará un cortocircuito en el cálculo y devolverá undefined directamente .

console.log(shop.goods.price.toString()) 
// price 存在，打印字符类型 22

console.log(shop?.goods?.count?.toString()) 
// 可选链运算符依次会判断 shop、goods、count 是否存在，存在执行 toString 方法，不存在返回 undefined

console.log(shop.goods.count.toString()) 
// count 不存在，报错

La cadena opcional se usa en combinación con llamadas a funciones : cuando no está seguro de si una determinada función o API está disponible, use la cadena opcional. Cuando la función no está disponible, la cadena opcional devolverá undefined en lugar de lanzar una excepción.

let result = someInterface?.customMethod?.();

El encadenamiento opcional también se puede usar con arreglos

arr?.[20]

2. ¿Fusión de valor nulo?

Operador coalescente nulo (x ?? y) devuelve y cuando x es nulo o indefinido, de lo contrario devuelve x

let a = 100;
let b = '';
let c = null;
let d = undefined;
let e = 0
const x = 200;
a||=x; // a = 100
b||=x; // b = 200
c||=x; // c = 200
d||=x; // d = 200
e||=x; // e = 200
// 除 a 外均为假值，重新赋值为 x 的值 200

3. Lógica y asignación&&=

asignación OR lógica (x &&= y) asigna y a x solo si x es verdadero
x &&= y es equivalente a x && (x = y)

let a = 100;
let b = '';
let c = null;
let d = undefined;
let e = 0
const x = 200;
a&&=x; // a = 200
b&&=x; // b = ''
c&&=x; // c = null
d&&=x; // d = undefined
e&&=x; // e = 0
//  a 为真值，重新赋值为 x 的值 200
// 除 a 外均为假值，还是原值

4. Asignación OR lógica||=

asignación OR lógica (x ||= y) asigna y a x solo si x es falso
x ||= y es equivalente a x || (x = y)

let a = 100;
let b = '';
let c = null;
let d = undefined;
let e = 0
const x = 200;
a||=x; // a = 100
b||=x; // b = 200
c||=x; // c = 200
d||=x; // d = 200
e||=x; // e = 200
// 除 a 外均为假值，重新赋值为 x 的值 200

5. Asignación lógica vacía??=

La asignación lógica nula (x ??= y) asigna y a x solo si x es nulo o indefinido

let a = 100;
let b = '';
let c = null;
let d = undefined;
const x = 200;

a??=x; // a = 100
b??=x; // b = ''
c??=x; // c = 200
d??=x; // d = 200
// a、b 值不为空，原值，c、d 值为空，将 x 的值赋给 c、d

6. Valor falso

Valor falso: es un valor booleano que se considera falso por el contexto : falso, 0, -0, "" '' `` (cadena vacía), nulo, indefinido, NaN, 0n (valor cero BigInt), document.all

JS impone la conversión de tipo en el contexto (declaración condicional y declaración de bucle) que necesita usar valores de tipo booleano y convierte el valor a tipo booleano

if （false、null、undefined、0、-0、0n、NaN、“”）{
    
    
	// 执行不到这里
}

Referencias: Operadores MDN