Como sabes, JavaScript es el lenguaje de programación número uno en el mundo, es el lenguaje de la web, es el lenguaje de las aplicaciones híbridas móviles (como PhoneGap o Appcelerator), es el lenguaje del lado del servidor (como NodeJS o Wakanda), Y hay muchas otras implementaciones. Al mismo tiempo, también es un lenguaje esclarecedor para muchos principiantes, porque no solo puede mostrar un simple mensaje de alerta en el navegador, sino que también puede usarse para controlar un robot (usando nodebot o nodruino). Los desarrolladores que dominan JavaScript y pueden escribir código organizado, estandarizado y eficiente se han vuelto buscados en el mercado de talentos.
Cabe señalar que los fragmentos de código de este artículo se probaron en la última versión de Google Chrome (versión 30), que utiliza el motor JavaScript V8 (V8 3.20.17.15).
1 No olvides usar la palabra clave var al asignar un valor a una variable por primera vez.
Asignar un valor a una variable indefinida provoca la creación de una variable global. Evite las variables globales.
2 Utilice === en lugar de ==
El operador == (o !=) realiza automáticamente conversiones de tipos cuando es necesario. La operación === (o !==) no realiza ninguna conversión. Compara valores y tipos y también se considera más rápido que ==.
Copie el código de código de la siguiente manera:
[10] === 10 // es falso
[10] == 10 // es verdadero
'10' == 10 // es verdadero
'10' === 10 // es falso
[] == 0 // es verdadero
[] === 0 // es falso
'' == falso // es verdadero pero verdadero == "a" es falso
'' === falso // es falso
3 Utilice cierres para implementar variables privadas
Copie el código de código de la siguiente manera:
función Persona(nombre, edad) {
this.getName = función() { devolver nombre };
this.setName = función(nuevoNombre) { nombre = nuevoNombre };
this.getAge = function() { edad de retorno };
this.setAge = function(nuevaEdad) { edad = nuevaEdad };
//Propiedades no inicializadas en el constructor
ocupación var;
this.getOccupation = function() { devolver ocupación };
this.setOccupation = function(newOcc) { ocupación =
nuevaOcc; };
}
4 Utilice un punto y coma al final de una declaración
Es una buena práctica utilizar un punto y coma al final de una declaración. No se le advertirá si olvida escribirlo, porque en la mayoría de los casos el intérprete de JavaScript agregará el punto y coma por usted.
5 Crea el constructor del objeto.
Copie el código. El código es el siguiente: function Persona(nombre, apellido){
this.firstName = firstName;
this.apellido = apellido;
}
var Saad = nueva Persona("Saad", "Mousliki");
6 Utilice typeof,stanceof y constructor con cuidado
Copie el código de la siguiente manera: var arr = ["a", "b", "c"];
tipo de arr; // devuelve "objeto"
arr instancia de matriz // verdadero
arr.constructor(); //[]
7 Crear una función de autollamada (Función de autollamada)
Esto a menudo se denomina función anónima autoinvocada o expresión de función invocada inmediatamente por IIFE. Esta es una función que se ejecuta automáticamente inmediatamente después de la creación, generalmente de la siguiente manera:
Copie el código de código de la siguiente manera:
(función(){
// algún código privado que se ejecutará automáticamente
})();
(función(a,b){
resultado var = a+b;
resultado de devolución;
})(10,20)
8- Obtén un elemento aleatorio de una matriz
El código de copia es el siguiente: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = elementos[Math.floor(Math.random() * items.length)];[código]
9 Obtenga un número aleatorio dentro de un rango específico
Este fragmento de código es útil cuando desea generar datos de prueba, como un valor salarial aleatorio entre un valor mínimo y máximo.
[código]var x = Math.floor(Math.random() * (max - min + 1)) + min;
10 Genera una matriz de números entre 0 y el valor máximo establecido
Copie el código de la siguiente manera: var númerosArray = [], max = 100;
for( var i=1; númerosArray.push(i++) < max; // números = [0,1,2,3 ... 100]
11 Genera una cadena alfanumérica aleatoria
Copie el código. El código es el siguiente: function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
devolver rdmString.substr(0, len);
}
12 Mezcla una serie de números
El código de copia es el siguiente: números var = [5, 458, 120, -215, 228, 400, 122205, -85411];
números = números.sort(function(){ return Math.random() - 0.5});
/* los números de la matriz serán iguales, por ejemplo, a [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Función de recorte de cuerdas
Existe una función de recorte clásica en Java, C#, PHP y muchos otros lenguajes, que se usa para eliminar espacios en cadenas, pero no existe en JavaScript, por lo que debemos agregar esta función al objeto String.
Copie el código de código de la siguiente manera:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Elimina los espacios iniciales y finales de la cadena, excluyendo los espacios internos de la cadena
14 Agregar una matriz a otra matriz
Copie el código de la siguiente manera: var array1 = [12, "foo", {nombre: "Joe"}, -2458];
var array2 = ["Gama", 555, 100];
Array.prototype.push.apply(matriz1, matriz2);
/* array1 será igual a [12, "foo", {nombre "Joe"}, -2458, "Doe", 555, 100] */
// De hecho, concat puede conectar directamente dos matrices, pero su valor de retorno es una nueva matriz. Aquí está el cambio directo a array1
15 Convierte el objeto de argumentos en una matriz.
Copie el código de la siguiente manera: var argArray = Array.prototype.slice.call(arguments);
El objeto de argumentos es un objeto similar a una matriz, pero no una matriz real.
16 Verifique si el parámetro es un número (número)
Copie el código. El código es el siguiente: function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 Verifique si el parámetro es una matriz
Copie el código de la siguiente manera: function isArray(obj){
return Object.prototype.toString.call(obj) === '[matriz de objetos]';
}
Nota: Si se anula el método toString(), no obtendrá los resultados deseados con esta técnica. O puedes usar:
Copie el código de código de la siguiente manera:
Array.isArray(obj); // Este es un nuevo método de matriz
Si no está utilizando varios marcos, también puede utilizar el método instancia de. Pero si tiene varios contextos, obtendrá resultados incorrectos.
Copie el código de la siguiente manera: var myFrame = document.createElement('iframe');
documento.body.appendChild(miMarco);
var myArray = ventana.frames[window.frames.length-1].Array;
var arr = nuevo miArray(a,b,10); // [a,b,10]
// instancia de no funcionará correctamente, myArray pierde su constructor
// el constructor no se comparte entre marcos
arr instancia de matriz // falso
18 Obtener el valor máximo o mínimo en una matriz de números
El código de copia es el siguiente: números var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Matemáticas, números);
var minInNumbers = Math.min.apply(Matemáticas, números);
// Nota del traductor: el método function.prototype.apply se utiliza aquí para pasar parámetros.
19 Limpiar una matriz
Copie el código de la siguiente manera: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray será igual a [].
20 No utilice eliminar para eliminar elementos de una matriz.
Utilice empalme en lugar de eliminar para eliminar un elemento de una matriz. El uso de eliminar solo reemplaza el elemento original con indefinido y en realidad no lo elimina de la matriz.
No uses esto:
Copie el código de la siguiente manera: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
artículos.longitud; // devolver 11
eliminar elementos [3] // devuelve verdadero
artículos.longitud; // devolver 11
/* los elementos serán iguales a [12, 548, "a", undefinido × 1, 5478, "foo", 8852, undefinido × 1, "Doe", 2154, 119] */
En su lugar utilice:
Copie el código de la siguiente manera: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
artículos.longitud; // devolver 11
elementos.splice(3,1);
artículos.longitud; // devuelve 10
/* los elementos serán iguales a [12, 548, "a", 5478, "foo", 8852, undefinido × 1, "Doe", 2154, 119] */
El método de eliminación debe usarse para eliminar una propiedad de un objeto.
21 Utilice longitud para truncar una matriz
De manera similar a la forma de borrar la matriz anterior, usamos la propiedad de longitud para truncar una matriz.
Copie el código de la siguiente manera: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray será igual a [12, 222, 1000, 124].
Además, si establece la longitud de una matriz en un valor mayor que el valor actual, la longitud de la matriz cambiará y se agregarán nuevos elementos indefinidos para compensarla. La longitud de una matriz no es una propiedad de solo lectura.
Copie el código de la siguiente manera: myArray.length = 10 // la nueva longitud de la matriz es 10;
myArray[myArray.length - 1] // indefinido
22 Utilice AND/OR lógico para hacer juicios condicionales
Copie el código de código de la siguiente manera:
varfoo = 10;
foo == 10 && hacerAlgo(); // Equivalente a if (foo == 10) hacerAlgo();
foo == 5 || hacer algo(); // Equivalente a if (foo != 5) hacer algo();
El AND lógico también se puede utilizar para establecer valores predeterminados para los parámetros de función.
Copie el código de código de la siguiente manera:
función hacer algo(arg1){
Arg1 = arg1 || 10; // Si arg1 no está configurado, Arg1 se establecerá en 10 de forma predeterminada.
}
23 Utilice el método map() para iterar sobre los elementos de una matriz
Copia el código. El código es el siguiente: var cuadrados = [1,2,3,4].map(function (val) {
devolver valor * valor;
});
// los cuadrados serán iguales a [1, 4, 9, 16]
24 Redondea un número a N decimales
Copie el código de la siguiente manera: var num =2.443242342;
num = num.toFixed(4); // num será igual a 2.4432
25 Problema de coma flotante
Copie el código de la siguiente manera: 0.1 + 0.2 === 0.3 // es falso
9007199254740992 + 1 // es igual a 9007199254740992
9007199254740992 + 2 // es igual a 9007199254740994
¿Por qué sucede esto? 0,1+0,2 es igual a 0,30000000000000004. Debes saber que todos los números de JavaScript se representan internamente como números de punto flotante en binario de 64 bits, cumpliendo con el estándar IEEE 754. Para obtener más información, puede leer esta publicación de blog. Puede resolver este problema utilizando los métodos toFixed() y toPrecision().
26 Cuando utilice for-in para recorrer las propiedades internas de un objeto, preste atención a verificar las propiedades.
El siguiente fragmento de código evita el acceso a las propiedades del prototipo al iterar sobre las propiedades de un objeto:
Copie el código de código de la siguiente manera:
para (var nombre en el objeto) {
if (objeto.hasOwnProperty(nombre)) {
// hacer algo con nombre
}
}
27 operador de coma
Copie el código de código de la siguiente manera:
var a = 0;
varb = (a++, 99);
console.log(a); // a será igual a 1
console.log(b); // b es igual a 99
28 variables de almacenamiento en caché que requieren cálculo o consulta
Para los selectores de jQuery, será mejor que guardemos en caché estos elementos DOM.
Copie el código de la siguiente manera: var navright = document.querySelector('#right');
var navleft = document.querySelector('#izquierda');
var navup = document.querySelector('#arriba');
var navdown = document.querySelector('#abajo');
29 Validar parámetros antes de llamar a isFinite()
Copie el código de la siguiente manera: isFinite(0/0);
esFinito("foo"); // falso
esFinito("10"); // verdadero
esFinito(10); // verdadero
esFinito(indefinido); // falso
esFinito(); // falso
esFinito(nulo); // verdadero !!!
30 Evite índices negativos en matrices
Copie el código de la siguiente manera: var númerosArray = [1,2,3,4,5];
var de = númerosArray.indexOf("foo") ; // de es igual a -1
númerosArray.splice(de,2); // devolverá [5]
Asegúrese de que el parámetro al llamar a indexOf no sea negativo.
31 Serialización y deserialización basadas en JSON (serialización y deserialización)
Copie el código de la siguiente manera: var persona = {nombre:'Saad', edad: 26, departamento: {ID: 15, nombre: "R&D"} };
var stringFromPerson = JSON.stringify(persona);
/* stringFromPerson es igual a "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString es igual al objeto persona */
32 Evite el uso de eval() y constructores de funciones
El uso de constructores de funciones y eval son operaciones muy costosas porque cada vez que llaman al motor de script para convertir el código fuente en código ejecutable.
Copie el código de la siguiente manera: var func1 = new Function(functionCode);
var func2 = eval(códigofunción);
33 Evite usar con()
Usar with() inserta una variable global. Por lo tanto, los valores de las variables con el mismo nombre se sobrescribirán y causarán problemas innecesarios.
34 Evite usar for-in para iterar sobre una matriz
Evite el uso de métodos como este:
Copie el código de la siguiente manera: var sum = 0;
para (var i en arrayNumbers) {
suma += númerosmatriz[i];
}
Una mejor manera es:
Copie el código de la siguiente manera: var suma = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
suma += númerosmatriz[i];
}
El beneficio adicional es que los valores de las dos variables i y len solo se ejecutan una vez, lo cual es más eficiente que el siguiente método:
Copie el código de la siguiente manera: for (var i = 0; i < arrayNumbers.length; i++)
¿Por qué? Porque arrayNumbers.length se calcula cada vez que se repite.
35 Pase funciones en lugar de cadenas al llamar a setTimeout() y setInterval().
Si pasa una cadena a setTimeout() o setInterval(), la cadena se analizará como si usara eval, lo cual lleva mucho tiempo.
No utilices:
Copie el código de código de la siguiente manera:
setInterval('hacerAlgoPeriódicamente()', 1000);
setTimeOut('hacer algo después de cinco segundos()', 5000)
En su lugar utilice:
Copie el código de código de la siguiente manera:
setInterval(hacer algo periódicamente, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 Utilice declaraciones switch/case en lugar de declaraciones largas if/else
Al juzgar más de 2 situaciones, usar switch/case es más eficiente y más elegante (más fácil de organizar el código). Pero no utilice switch/case cuando haya más de 10 situaciones para juzgar.
37 Utilice el interruptor/caja al juzgar el rango numérico
En la siguiente situación, es razonable utilizar switch/case para determinar el rango de valores:
Copie el código de código de la siguiente manera:
función getCategory(edad) {
categoría var = "";
cambiar (verdadero) {
el caso esNaN(edad):
categoría = "no es una edad";
romper;
caso (edad >= 50):
categoría = "Antiguo";
romper;
caso (edad <= 20):
categoría = "Bebé";
romper;
por defecto:
categoría = "Joven";
romper;
};
categoría de devolución;
}
getCategory(5); // devolverá "Bebé"
//Generalmente, para juzgar el rango numérico, es más apropiado usar if/else. El interruptor/caja es más adecuado para juzgar ciertos valores.
38 Especificar el objeto prototipo para el objeto creado.
Es posible escribir una función que cree un objeto con parámetros específicos como prototipo:
Copie el código de la siguiente manera: function clone(object) {
función OneShotConstructor(){};
OneShotConstructor.prototype= objeto;
devolver nuevo OneShotConstructor();
}
clonar(Matriz).prototipo; // []
39 Una función de escape HTML
Copie el código de la siguiente manera: function escapeHTML(texto) {
var reemplazos= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, función(carácter) {
reemplazos de devolución [personaje];
});
}
40 Evite usar try-catch-finally dentro de un bucle
En tiempo de ejecución, cada vez que se ejecuta la cláusula catch, el objeto de excepción capturado se asignará a una variable y, en la estructura try-catch-finally, esta variable se creará cada vez.
Evite escribir así:
Copie el código de la siguiente manera: var object = ['foo', 'bar'], i;
for (i = 0, len = objeto.longitud; i <len; i++) {
intentar {
// hacer algo que arroje una excepción
}
atrapar (e) {
//manejar excepción
}
}
En su lugar utilice:
Copie el código de la siguiente manera: var object = ['foo', 'bar'], i;
intentar {
for (i = 0, len = objeto.longitud; i <len; i++) {
// hacer algo que arroje una excepción
}
}
atrapar (e) {
//manejar excepción
}
41 Establezca el tiempo de espera para XMLHttpRequests.
Después de que una solicitud XHR demore mucho tiempo (por ejemplo, debido a problemas de red), es posible que deba cancelar la solicitud y luego puede usar setTimeout() con la llamada XHR.
Copie el código de la siguiente manera: var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = función () {
si (este.readyState == 4) {
clearTimeout(tiempo de espera);
// hacer algo con los datos de respuesta
}
}
var tiempo de espera = setTimeout( función () {
xhr.abort(); // llamada de devolución de llamada de error
}, 60*1000 /* tiempo de espera después de un minuto */ );
xhr.open('OBTENER', URL, verdadero);
xhr.enviar();
Además, generalmente se deben evitar por completo las solicitudes sincrónicas de Ajax.
42 Manejo de tiempos de espera de WebSocket
Normalmente, después de crear una conexión WebSocket, el servidor desconectará su conexión después de 30 segundos si está inactivo. Los firewalls también se desconectan después de un período de inactividad.
Para evitar problemas de tiempo de espera, es posible que deba enviar mensajes vacíos al servidor de forma intermitente. Para hacer esto, puede agregar las siguientes dos funciones a su código: una para mantener la conexión y otra para cancelar la retención de conexión. Con esta técnica, puedes controlar el problema del tiempo de espera.
Utilice un ID de temporizador:
Copie el código de la siguiente manera: var timerID = 0;
función mantener vivo() {
tiempo de espera de var = 15000;
si (webSocket.readyState == webSocket.OPEN) {
webSocket.enviar('');
}
timerId = setTimeout(keepAlive, tiempo de espera);
}
función cancelarKeepAlive() {
si (id del temporizador) {
cancelarTimeout(temporizadorId);
}
}
El método keepAlive() debe agregarse al final del método onOpen() de la conexión webSOcket, y cancelKeepAlive() debe agregarse al final del método onClose().
43 Tenga en cuenta que los operadores primitivos siempre son más eficientes que las llamadas a funciones. Utilice vainillaJS.
Por ejemplo, no utilice:
Copie el código. El código es el siguiente: var min = Math.min(a,b);
A.push(v);
En su lugar utilice:
Copie el código de la siguiente manera: var min = a < b ?
A[A.longitud] = v;
44 No olvides utilizar herramientas de ordenación de código al codificar . Utilice JSLint y herramientas de compresión de código (minificación) (como JSMin) antes de conectarse. "Herramienta para ahorrar tiempo: herramienta de formato y embellecimiento de código"
45 JavaScript es increíble.
Resumir
Sé que existen muchos otros consejos, trucos y mejores prácticas, así que si tienes algo más que quieras agregar o tienes comentarios o correcciones a los que he compartido, házmelo saber en los comentarios.