Comparación detallada de operador &&, operador ||, operador ??, operador ?. en JS

JavaScript tiene muchos operadores útiles. El uso razonable puede mejorar en gran medida la eficiencia del trabajo, por lo que tendrá más tiempo para pescar. La siguiente es una breve introducción a 4 tipos, de la siguiente manera:

&&

La operación AND lógica ( && ) es una operación booleana AND. Sólo se devuelve verdadero cuando ambos operandos son verdaderos ; en caso contrario, se devuelve falso . La descripción específica se muestra en la tabla:

Condición uno	Condición 2	resultado	Manifestación
verdadero1	verdadero2	verdadero2	1 && 2 => 2
verdadero	FALSO	FALSO	1 && 0 => 0
FALSO	verdadero	FALSO	0 && 1 => 0
falso1	falso2	falso1	nulo && 0 => nulo

El AND lógico es una especie de lógica de cortocircuito: si la expresión de la izquierda es falsa , el resultado se cortocircuita y devuelve directamente y la expresión de la derecha ya no se evalúa. La lógica de funcionamiento es la siguiente:

1. Evalúa el primer operando (la expresión de la izquierda).
2. Verifique el valor del primer operando. Si el valor de la expresión de la izquierda se puede convertir a falso (como nulo, indefinido, NaN, 0, "", falso), la operación finalizará y el valor del primer operando se devolverá directamente.
3. Si el primer operando se puede convertir en verdadero, se evalúa el segundo operando (la expresión de la derecha).
4. Devuelve el valor del segundo operando.

Ejemplo:

let test = 20
(test > 10) && console.log('打印出来了'); // 打印出来了
语法相当于：
if(x> 10) {
	console.log('打印出来了');
}

||

La operación OR lógica ( || ) es una operación OR booleana. Si ambos operandos son verdaderos , o uno de ellos es verdadero , devuelve verdadero ; en caso contrario, devuelve falso . Específicamente como se muestra en la figura:

Condición uno	Condición 2	resultado	Manifestación
verdadero	verdadero	verdadero	1 || 2 => 1
verdadero	FALSO	verdadero	1 || 0 => 1
FALSO	verdadero	verdadero	0 || 2 => 2
falso1	falso2	falso2	0 || indefinido=> indefinido

El OR lógico también es un tipo de lógica de cortocircuito: si la expresión de la izquierda es verdadera , el resultado se cortocircuita y devuelve directamente y la expresión de la derecha ya no se evalúa. La lógica de funcionamiento es la siguiente:

1. Evalúa el primer operando (la expresión de la izquierda).
2. Verifique el valor del primer operando. Si el valor de la expresión de la izquierda es convertible a verdadero, la operación finaliza y el valor del primer operando se devuelve directamente.
3. Si el primer operando se puede convertir en falso, se evalúa el segundo operando (la expresión de la derecha).
4. Devuelve el valor del segundo operando.

Ejemplo:

let username;
if (name !== null || name !== undefined || name !== '') {
   userName = name;
} else {
   userName = "";
}

//可以写为
let userName = name || "";

??

El operador coalescente de valor nulo (??) es un operador lógico. Si la expresión de la izquierda es nula o indefinida , devuelve la expresión de la derecha; de lo contrario, devuelve la expresión de la izquierda. verdadero y falso en la siguiente tabla representan cualquier cosa excepto nulo indefinido

Condición uno	Condición 2	resultado	Manifestación
nulo	1	1	nulo ?? 1 => 1
indefinido	2	2	indefinido ?? 2 => 2
verdadero	FALSO	verdadero	verdadero ?? falso => ​​verdadero

Ejemplo:

let username;
if (name !== null || name !== undefined ) {
   userName = name;
} else {
   userName = "测试";
}

//可以写为
let userName = name ?? "测试";

?.

El operador de cadena opcional ( ?. ) permite leer el valor de una propiedad ubicada en lo profundo de la cadena de objetos conectados sin tener que verificar explícitamente que cada referencia en la cadena sea válida. La función del operador (?.) es similar al operador de cadena (.). La diferencia es que no causará un error cuando la referencia sea nula (nula o indefinida). El valor de retorno de cortocircuito de esta expresión es indefinido. Cuando se usa con llamadas a funciones, devuelve indefinido si la función dada no existe.

La siguiente tabla hereda los datos anteriores:

Condición uno	Condición 2	resultado	Demostración |
objeto(existencia)	nombre	prueba	obj?.nombre => prueba
objeto(no existe)	xxxx	indefinido	objeto?. xxxxx =>indefinido

Ejemplo:

//比如这个item.shopList若是为null undefined这种情况 不加?.就会页面报错
shopList: item.shopList?.map((mItem) => {
    return {
      shopCode: mItem.shopCode,
      shopName: mItem.shopName,
      custCode: mItem.shopCode,
      custName: mItem.shopName,
      labels: mItem.labels,
      labelnames: mItem.labelnames,
      parentCustCode: item.custCode,
      parentCustName: item.labels,
    }
  }),

Prioridad de conclusión: ?. > && > || > ??