Operadores poco comunes pero útiles en JavaScript

prefacio

Si te preguntara cuáles son los operadores más comunes que usas en JavaScript, podrías responder lo siguiente:

+、  -、  *、/、  %、  =、  ?、  !、  &&、  ||、  >、 <

Si le pregunto sobre operadores que conoce pero que no se usan comúnmente o no se usarán, puede responder lo siguiente:

&、  |、  ~、  ^、 ,

Pero nada de lo anterior es de lo que este artículo quiere hablar, este artículo quiere hablar de otros tipos.

doble signo de exclamación!!

No es realmente un tipo especial de operador, sino 非运算符!dos llamadas consecutivas.

No hay nada que decir al respecto, y lo entiendo todo. Debido a que JavaScript tiene tipos de conversión implícitos, como , , ''se 0convertirá en falso.nullundefined

Sin embargo, en algunos códigos fuente, para comprender mejor, también puede hacer que el código sea más riguroso. Por lo general, se utilizan signos de exclamación dobles para 空forzar la conversión de un estado en booleanun tipo para juicios posteriores más rigurosos.

operador coalescente nulo??

Su uso y ||semejanza se utilizan para juzgar al tomar valores.

La diferencia es que  cuando el valor anterior es falso, ||se calculará ||el valor posterior .  En cambio, el valor posterior se calcula solo cuando se suma  el  ??valor anterior . Por eso llamó al operador coalescente nulo.undefinednull

console.log(null ?? 'default string');  //  "default string"
console.log(undefined ?? 33); // 33
console.log(false ?? 22); // false
console.log("" ?? 11); // ""
console.log(0 ?? 42); // 0

Todos deberían poder imaginar los escenarios de uso, que son ||algo similares a , excepto que son ||más detallados. Es algo similar al uso del signo igual de asignación predeterminado en el parámetro de función ES6.

También equivale a una omisión de los tres propósitos, lo que parece más conciso y claro.

// let person = data.xx ? data.xx : {name: 'NiGuang'}; 三目
let person = data.xx ?? {name: 'NiGuang'};

Debe tenerse en cuenta que no se puede compartir con los operadores && o ||, porque el orden de operación/prioridad de operación entre el operador de fusión de valor nulo y otros operadores lógicos no está definido. En este caso, se generará [ ] SyntaxError.

operador de encadenamiento opcional?.

Lo primero a tener en cuenta es que este operador no es un signo de interrogación ?sino ?.un punto extra después de él.Hay una diferencia esencial entre los dos.

El operador de encadenamiento opcional (  ?. ) permite leer el valor de las propiedades ubicadas en lo profundo de la cadena de objetos de conexión sin tener que verificar explícitamente que cada referencia en la cadena sea válida. ?. El operador funciona de manera similar al  . operador encadenado, excepto que en lugar de causar un error en el caso de una referencia a nulo (nullish) ( null o  undefined), la expresión provoca un cortocircuito en el valor devuelto  undefined. Cuando se usa con una llamada de función, devuelve si la función dada no existe  undefined.

El operador de encadenamiento opcional hará que las expresiones sean más cortas y concisas al intentar acceder a propiedades de objetos que pueden no existir. El operador de encadenamiento opcional también es útil al explorar el contenido de un objeto si no está seguro de qué propiedades deben estar presentes.

Después de leer la introducción de MDN, ¿todavía no entiendes? ¡Dé un pequeño ejemplo para decirle cómo usarlo!

let grade = {
    data: {
        productList: []
    },
    resp: 'success',
    code: 1000
}

// 以前获取层级深得数据，需要先用if判断每一层是否存在，不然会报错。
console.log(grade.data.productList[0].name);
 // VM2765:9 Uncaught TypeError: Cannot read properties of undefined (reading 'name') at <anonymous>:9:39
 
 let grade1 = {
    data: {},
    resp: 'success',
    code: 1000
}

/** 使用了可选链式运算符之后直接写，如果在其中一层没找到会自动赋值为undefined，不再向 后查找，避免了使用if进行一层层判断。
*  当接口未按规定返回时，也不会报错阻塞程序导致白屏。
*  当然代价是你要对使用这个值进行判空处理，不然在用的时候undefined还是会报错。
*/
console.log(grade1.data?.productList[0]?.name); // undefined

~~

Eso es todo, eso es todo? He visto lo que dijiste antes, y ya lo he usado.

¿Has visto este?

Es lo mismo que el signo de exclamación doble anterior y tampoco es un operador especial. Más bien, son dos llamadas repetidas consecutivas a un solo operador, es decir, ~dos llamadas a un operador bit a bit. No solemos usar operaciones de bits, y no profundizamos en ellas, por lo que principalmente nos fijamos en ~~sus funciones.

efecto

Se puede utilizar para redondear decimales.

Eso es todo, eso es todo? Resbalé, resbalé, y después de hablar durante mucho tiempo, pensé que era algo, así que terminé Math.floor().

No te vayas, hermano, si Math.floor() puede resolverlo, entonces, por supuesto, no hablaré de esto. Déjame contarte mi experiencia con él.

experiencia

Recientemente, al revisar leetcode, encontré una pregunta de este tipo, encontrar la raíz cuadrada de un número y redondear hacia abajo si hay un decimal. Por ejemplo, la raíz cuadrada de 8 es 2.

Esto me hizo muy feliz ¿  1 + 1Cuál es la diferencia entre implementarlo en JavaScript e igualarlo? Así que me presenté Math.floor(Math.sqrt(x)).

Después de enviar, muestra que el tiempo de ejecución es de 68 ms, superando al 79,59% de las personas, y la mayoría de las personas han adoptado este método. Mirando esta cifra cercana al 80%, me preguntaba qué método utilizó el 20% para ser más rápido que esto. Con curiosidad, hice clic en el código con menos tiempo y lo vi ~~(Math.sqrt(x)).

Similitudes y diferencias con Math.floor()

rápido

Anteriormente dije que hizo operaciones de dos bits seguidas, y luego introduje mi experiencia de conocerlo.

Entonces su ventaja sobre Math.floor() es obvia, es decir, es rápido y veloz. Solo tomó 40ms, que es 28ms más rápido que Math.floor().

Los números negativos también se redondean hacia abajo.

La segunda diferencia es que al redondear números negativos, Math.floor() se redondea de acuerdo con la pequeñez matemática (cuanto mayor es el valor negativo, menor), pero ~~aún se redondea al borrar fracciones.

console.log(Math.floor(-2.8)); // -2
console.log(~~-2.8); // -3

>>

Este parece un operador de bit, y su nombre es 右移运算符. Si no hubiera cepillado Leetcode, probablemente no lo habría conocido en mi vida. Esto es lo que dice MDN sobre él:

El operador de desplazamiento a la derecha (  >> ) desplaza la representación binaria de un operando, que puede ser un valor numérico o un tipo BigInt, hacia la derecha en un número específico de bits. El bit desplazado a la derecha se descarta y el bit vacío desplazado a la izquierda se llena con el bit de signo (el bit más a la izquierda). Esta operación también se conoce como "desplazamiento a la derecha con propagación de signo" o "desplazamiento aritmético a la derecha" porque el valor de retorno tiene el mismo bit de signo que el primer operando.

No importa si no lo entiendes, en las escenas que he visto, el lugar donde la gente más lo usa es para encontrar el índice del valor intermedio de la dicotomía.

Al calcular el valor intermedio, se debe tener en cuenta que el lado izquierdo es la suma de dos números y el lado derecho es siempre 1.

Por ejemplo el siguiente ejemplo

// 求（2,7）的中间值
console.log(Math.floor(2 + (7 - 2) / 2));  // 4
console.log(Math.floor((2 + 7) / 2));  // 4
console.log((2 + 7) >> 1);  // 4

La misma ventaja sigue siendo  快快快que los algoritmos de JavaScript mejor clasificados utilizados en leetcode básicamente utilizan operaciones de bits. Puede ser lo suficientemente rápido como para ayudarte a superar al 10 % de tus oponentes.