Comparte 12 consejos muy prácticos de JavaScript

En este artículo, compartiremos con ustedes 12 consejos sobre JavaScript. Estos consejos pueden ayudarlo a resolver algunos problemas en su trabajo real.

Usa el !! operador para convertir el valor booleano

A veces necesitamos verificar si existe una variable o verificar si el valor tiene un valor válido, y si existe, devuelve verdadero. Para hacer dicha verificación, podemos usar el !! operador para implementarlo es muy conveniente y simple. Para variables, puede usar !! Variable para la detección. Mientras el valor de la variable sea: 0, nulo, "", indefinido o nan, devolverá falso, de lo contrario devolverá verdadero. Por ejemplo, el siguiente ejemplo:

 cuenta de funciones (efectivo) {this.cash = efectivo; this.hasmoney = !! efectivo; } cuenta var = nueva cuenta (100.50); console.log (cuenta.cash); // 100.50 console.log (Account.hasmoney); // Verdadero var vacíaCcount = nueva cuenta (0); console.log (vacíaCcount.cash); // 0 console.log (vacíaCcount.hasmoney); // FALSO

En este ejemplo, siempre que el valor de la cuenta. Cash sea mayor que 0, el valor devuelto por cuenta. Hasmoney es verdadero.

Usar + para convertir cadenas a números

Este truco es muy útil. Es muy simple y se puede convertir en números cruzando datos de cadenas. Sin embargo, solo es adecuado para datos de cadena, de lo contrario, NAN se devolverá, como el siguiente ejemplo:

 function tonumber (strnumber) {return +strnumber; } console.log (Tonumber ("1234")); // 1234 console.log (tonumber ("acb")); // nan

Esto también funciona para la fecha, en este caso devolverá un número de marca de tiempo:

Copie el código de la siguiente manera: console.log (+nueva fecha ()) // 1461288164385 y símbolo condicional

Si tiene un código como este:

 if (conectado) {login (); }

También puede abreviar variables y usar && y concatenarlas juntas. Por ejemplo, el ejemplo anterior se puede abreviar de la siguiente manera:

La copia del código es la siguiente: Conected && login ();

Si existen algunas propiedades o funciones en un objeto, también puede hacer la detección, como se muestra en el siguiente código:

La copia del código es la siguiente: user && user.login ();

Usar || operador

Hay una función de parámetro predeterminada en ES6. Para simular esta función en los navegadores más antiguos, el || Se puede usar el operador y el valor predeterminado se pasará como segundo parámetro. Si el valor devuelto por el primer parámetro es falso, el segundo valor se considerará un valor predeterminado. Como en el siguiente ejemplo:

 Función usuario (nombre, edad) {this.name = name || "Oliver Queen"; this.age = edad || 27; } var userer1 = new User (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = new User ("Barry Allen", 25); console.log (user2.name); // Barry Allen Console.log (user2.age); // 25

Matriz de caché. Longitud en bucle

Este truco es muy simple, y esto tendrá un gran impacto en el rendimiento cuando se trata de un gran bucle de matriz. Básicamente, todos escribirán una variedad de iteraciones sincrónicas como esta:

 for (var i = 0; i <array.length; i ++) {console.log (array [i]); }

Si se trata de una matriz pequeña, esto es excelente, si está tratando con una gran matriz, este código recalculará el tamaño de la matriz en cada iteración, lo que causará algún retraso. Para evitar este fenómeno, Array.Length se puede usar como caché:

 Var longitud = array.length; for (var i = 0; i <longitud; i ++) {console.log (array [i]); }

También puedes escribirlo así:

 for (var i = 0, longitud = array.length; i <longitud; i ++) {console.log (array [i]); }

Detectar propiedades en objetos

Este truco es útil cuando necesita detectar si existen algunas propiedades y evitar ejecutar funciones o propiedades indefinidas. Si planea personalizar un código de navegador interros compatible, también puede usar este consejo. Por ejemplo, desea usar document.querySelector () para seleccionar una ID y hacerla compatible con los navegadores IE6, pero esta función no existe en los navegadores IE6, por lo que es muy útil usar este operador para detectar si esta función existe, como el siguiente ejemplo:

 if ('QuerySelector' en documento) {document.querySelector ("#id"); } else {document.getElementById ("id"); }

En este ejemplo, si la función QuerySelector no existe en el documento, entonces se llama al documento.

Obtenga el último elemento en la matriz

Array.prototype.slice (begin, end) se usa para obtener los elementos de matriz entre Begin and End. Si no establece el parámetro final, el valor de longitud predeterminado de la matriz se considerará como el valor final. Pero algunos estudiantes pueden no saber que esta función también puede aceptar valores negativos como parámetros. Si establece un valor negativo como el valor de Begin, puede obtener el último elemento de la matriz. como:

 varilla var = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]

Truncamiento de la matriz

Este truco se usa principalmente para bloquear el tamaño de la matriz, y es muy útil si se usa para eliminar algunos elementos en la matriz. Por ejemplo, su matriz tiene 10 elementos, pero solo desea tener solo los primeros cinco elementos, luego puede truncar la matriz por array.length = 5. Como en el siguiente ejemplo:

 varilla var = [1,2,3,4,5,6]; console.log (array.length); // 6 array.length = 3; console.log (array.length); // 3 console.log (matriz); // [1,2,3]

Reemplazar todo

La función String.replace () le permite usar cadenas o expresiones regulares para reemplazar las cadenas. Esta función en sí solo reemplaza la primera cadena. Sin embargo, puede usar /g en expresiones regulares para simular la función de la función Reemplazo ():

 var string = "John John"; console.log (string.replace (/hn/, "ana")); // "Joana John" console.log (string.replace (/hn/g, "ana")); // "Joana Joana"

Fusionar matrices

Si desea fusionar dos matrices, generalmente usará la función Array.concat ():

 varilla var1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];

Esta función no es adecuada para fusionar dos matrices grandes, ya que consumirá mucha memoria para almacenar matrices recién creadas. En este caso, puede usar Array.pus (). Aplicar (arr1, arr2) para crear una nueva matriz. Este método no se usa para crear una nueva matriz, solo combina los números primero y segundo juntos al reducir el uso de la memoria:

 varilla var1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.push.apply (array1, array2)); // [1,2,3,4,5,6];

Convertir nodelist en una matriz

Si ejecuta la función document.QuerySelectorAll ("P"), puede devolver una matriz de elementos DOM, es decir, el objeto nodelista. Pero este objeto no tiene las funciones de función de las matrices, como Sort (), Reduce (), MAP (), Filter (), etc. Para que estas funciones de función de matriz nativa se usen en ellas, la lista de nodos debe convertirse en una matriz. Puede usar [] .slice.call (elementos) para implementar:

 var Elements = document.QuerySelectorAll ("P"); // nodelist var arrayElements = [] .slice.call (elementos); // Ahora el nodelista es una matriz var arrayElements = array.from (elementos); // Esta es otra forma de convertir Nodelist en matriz

Encogido de elementos de matriz

Para la combinación de elementos de matriz, no es necesario usar bibliotecas externas, como Lodash, solo haga esto:

 Var List = [1,2,3]; console.log (list.sort (function () {math.random () - 0.5})); // [2,1,3]

Resumir

Ahora ha aprendido algunos consejos útiles de JavaScript. Espero que estos consejos puedan ayudarlo a resolver algunos problemas en el trabajo, o este artículo será útil para usted. Si tiene algunos excelentes consejos de JavaScript, compártelos con nosotros en los comentarios.