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 = !! Cash;} var cuenta var = nueva cuenta (100.50); console.log (cuenta.cash); // 100.50console.log (Account.hasmoney); // trueVar vacíaCcount = nueva cuenta (0); console.log (vacíaCcount.cash); // 0console.log (vacíaCcount.hasmoney); // FALSOEn 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")); // 1234console.log (tonumber ("acb")); // nanEsto también funciona para la fecha, en este caso devolverá un número de marca de tiempo:
console.log (+nueva fecha ()) // 1461288164385
y 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:
conectado && 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:
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 user1 = new User (); console.log (user1.name); // oliver queenconsole.log (user1.age); // 27Var user2 = nuevo usuario ("Barry Allen", 25); console.log (user2.name); // Barry AllenConsole.log (user2.age); // 25Matriz 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:
varía 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); // 6array.length = 3; console.log (array.length); // 3console.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 ():
var array1 = [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:
var array1 = [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"); // nodelistVar arrayElements = [] .slice.call (elementos); // Ahora el nodelista es un arrayvar arrayElements = array.from (elementos); // Esta es otra forma de convertir Nodelist en matrizEncogido 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.
Los 12 consejos de JavaScript muy prácticos anteriores [recomendados] son todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.