JavaScript es un lenguaje de programación de clase mundial que se puede utilizar para el desarrollo web, el desarrollo de aplicaciones móviles (PhoneGap, Appcelerator), el desarrollo del lado del servidor (Node.js y Wakanda), etc. JavaScript también es el primer idioma para muchos novatos que ingresan al mundo de la programación. Se puede usar para mostrar cuadros de indicación simples en el navegador, o para controlar el robot a través de Nodebot o Noderuino. Los desarrolladores que pueden escribir código JavaScript bien estructurado y eficiente son ahora las personas más buscadas en el mercado de reclutamiento.
En este artículo, compartiré algunos consejos, consejos y mejores prácticas de JavaScript. Excepto por algunos, ambos son el motor JavaScript del navegador y el intérprete JavaScript del lado del servidor.
El código de muestra en este artículo pasó la prueba en la última versión de Google Chrome 30 (V8 3.20.17.15).
1. Asegúrese de usar la palabra clave VAR al asignar un valor a una variable por primera vez.
Si no se declara una variable y se asigna directamente al valor, se utilizará como una nueva variable global de forma predeterminada. Intente evitar usar variables globales.
2. Usar === Reemplazar ==
Los operadores == y! = Convertirán automáticamente el tipo de datos si es necesario. Pero === y! == no lo harán, compararán valores y tipos de datos al mismo tiempo, lo que también los hace más rápidos que == y! =.
La copia del código es la siguiente:
[10] === 10 // es falso
[10] == 10 // es verdad
'10' == 10 // es verdad
'10' === 10 // es falso
[] == 0 // es verdadero
[] === 0 // es falso
'' == falso // es verdadero pero verdadero == "A" es falso
'' === falso // es falso
3. Los resultados lógicos de las cuerdas subfinadas, nulas, 0, falsas, nan y vacías son falsas
4. Use semicolones al final de la línea
En la práctica, es mejor usar semicolones. Está bien olvidarse de escribirlos. En la mayoría de los casos, el intérprete JavaScript se agregará automáticamente. Por qué desea usar un punto y coma, puede consultar la verdad sobre las semicolons en el artículo JavaScript.
5. Use el constructor de objetos
La copia del código es la siguiente:
Function Person (FirstName, LastName) {
this.FirstName = FirstName;
this.lastName = LastName;
}
var saad = nueva persona ("saad", "mousliki");
6. Tenga cuidado con TypeoF, Instancef y Constructor
TypeOf: JavaScript Unary Operator, utilizado para devolver el tipo original de una variable en forma de una cadena. Tenga en cuenta que TypeOf Null también devolverá el objeto, y la mayoría de los tipos de objetos (matriz, fecha de hora, etc.) también devolverán el objeto.
Constructor: Propiedades del prototipo interno, que se pueden reescribir a través del código
instancia de: el operador JavaScript buscará en el constructor en la cadena prototipo, devuelve verdadero si se encuentra, de lo contrario devuelve falso si falso.
La copia del código es la siguiente:
var arr = ["a", "b", "c"];
typeOf ARR; // devolver "objeto"
Arr instancia de matriz // Verdadero
arr.Constructor (); // []
7. Use funciones de autocomplios
Las funciones se ejecutan automáticamente directamente después de la creación, que generalmente se denomina función anónima de autoevocción o expresiones de función de llamada directa (expresión de la función invocada inmediatamente). El formato es el siguiente:
La copia del código es la siguiente:
(función(){
// El código colocado aquí se ejecutará automáticamente
}) ();
(función (a, b) {
resultado var = a+b;
resultado de retorno;
}) (10,20)
8. Obtenga al azar miembros de la matriz
La copia del código es la siguiente:
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2145, 119];
var randomItem = items [Math.floor (Math.random () * items.length)];
9. Obtenga números aleatorios dentro del rango especificado
Esta función es particularmente numérica cuando se genera datos falsos para las pruebas, como el número de salarios dentro de un rango especificado.
La copia del código es la siguiente:
var x = math.floor (math.random () * (max - min + 1)) + min;
10. Genere una matriz de números de 0 a valores especificados
La copia del código es la siguiente:
var numbeArray = [], max = 100;
para (var i = 1; numbersarray.push (i ++) <max;); // números = [1,2,3 ... 100]
11. Generar cuerdas alfanuméricas aleatorias
La copia del código es la siguiente:
función generadorandomalphanum (len) {
var rdmstring = "";
para (; rdmstring.length <len; rdmstring += math.random (). toString (36) .substr (2));
return rdmstring.substr (0, len);
12. Interrupción del orden de matrices de números
La copia del código es la siguiente:
números var = [5, 458, 120, -215, 228, 400, 122205, -85411];
números = números.sort (function () {return math.random () - 0.5});
/ * La matriz de números será similar a [120, 5, 228, -215, 400, 458, -85411, 122205] */
Aquí usamos la función de clasificación de matriz incorporada de JavaScript. Una mejor manera es implementarlo con código especial (como el algoritmo Fisher-Yates). Puede consultar esta discusión en StackOverflow.
13. Retire los espacios de las cuerdas
Idiomas como Java, C# y PHP implementan funciones especiales de despacio de cadenas, pero no existe el JavaScript. Puede usar el siguiente código para hacer una función de corte para la función de objeto de cadena:
La copia del código es la siguiente:
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};
El nuevo motor JavaScript ya tiene una implementación nativa de TRIM ().
14. Agregar entre matrices
La copia del código es la siguiente:
var array1 = [12, "foo", {nombre "Joe"}, -2458];
var array2 = ["doe", 555, 100];
Array.prototype.push.apply (array1, array2);
/ * El valor de Array1 es [12, "foo", {nombre "Joe"}, -2458, "Doe", 555, 100] */
15. Convierta objetos en matrices
La copia del código es la siguiente:
var argarray = array.prototype.slice.call (argumentos);
16. Verifique si es un número
La copia del código es la siguiente:
función isnumber (n) {
return! isnan (parsefloat (n)) && isfinite (n);
}
17. Verifique si es una matriz
La copia del código es la siguiente:
función isarray (obj) {
return object.prototype.ToString.call (obj) === '[Array de objetos]';
}
Pero si el método toString () se reescribe, no funcionará. También puede usar el siguiente método:
La copia del código es la siguiente:
Array.isArray (obj); // es un nuevo método de matriz
Si no usa marco en su navegador, también puede usar InstanceOf, pero si el contexto es demasiado complejo, también puede cometer un error.
La copia del código es la siguiente:
var myFrame = document.createElement ('iframe');
document.body.appendChild (myframe);
var myArray = Window.frames [Window.frames.length-1] .Array;
var arrr = new MyArray (a, b, 10); // [A, B, 10]
// El constructor de MyArray se ha perdido, el resultado de instancia de será anormal
// Los constructores no se pueden compartir a través de cuadros
instancia de arrray; // FALSO
18. Obtenga los valores máximos y mínimos en la matriz
La copia del código es la 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);
19. Borrar la matriz
La copia del código es la siguiente:
var myArray = [12, 222, 1000];
myArray.length = 0; // myArray será igual a [].
20. No elimine ni elimine elementos directamente de la matriz
Si usa eliminar directamente en los elementos de matriz, en realidad no se elimina, sino que simplemente establezca el elemento como indefinido. El empalme debe usarse para la eliminación del elemento de matriz.
No:
La copia del código es la siguiente:
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.length; // Regreso 11
eliminar elementos [3]; // devolver verdadero
items.length; // Regreso 11
/ * El resultado de los elementos es [12, 548, "A", Undefinado × 1, 5478, "Foo", 8852, Undefinado × 1, "Doe", 2154, 119] */
Para:
La copia del código es la siguiente:
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.length; // Regreso 11
items.splice (3,1);
items.length; // devolver 10
/* El resultado de los elementos es [12, 548, "A", 5478, "Foo", 8852, Undefined × 1, "Doe", 2154, 119]
Puede usar Eliminar al eliminar las propiedades de un objeto.
21. Use el atributo de longitud para truncar la matriz
En el ejemplo anterior, use el atributo de longitud para borrar la matriz, y también puede usarlo para truncar la matriz:
La copia del código es la siguiente:
var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // MyArray será igual a [12, 222, 1000, 124].
Al mismo tiempo, si se incrementa el atributo de longitud, el valor de longitud de la matriz aumentará, y el indefinido se usará como un nuevo elemento para llenar. La longitud es una propiedad de escritura.
La copia del código es la siguiente:
myArray.length = 10; // La nueva longitud de la matriz es 10
myArray [myArray.length - 1]; // indefinido
22. Use la lógica y / o en condiciones
La copia del código es la siguiente:
var foo = 10;
foo == 10 && dosomething (); // es lo mismo que si (foo == 10) dosomething ();
foo == 5 || Dosomething (); // es lo mismo que si (foo! = 5) dosomething ();
Lógico o también se puede usar para establecer valores predeterminados, como los valores predeterminados de los parámetros de función.
La copia del código es la siguiente:
function dosomething (arg1) {
arg1 = arg1 || 10; // Arg1 tendrá 10 como valor predeterminado si aún no está configurado
}
23. Hacer el método de función map () bucle los datos
La copia del código es la siguiente:
var cuadros = [1,2,3,4] .map (función (val) {
return val * val;
});
// Los cuadrados serán iguales a [1, 4, 9, 16]
24. Mantenga el número especificado de decimales
La copia del código es la siguiente:
var num = 2.443242342;
num = num.tofixed (4); // num será igual a 2.4432
Tenga en cuenta que TOFIXEC () devuelve una cadena, no un número.
25. Problemas de cálculo de puntos flotantes
La copia del código es la siguiente:
0.1 + 0.2 === 0.3 // es falso
9007199254740992 + 1 // es igual a 9007199254740992
9007199254740992 + 2 // es igual a 9007199254740994
¿Por qué? Porque 0.1+0.2 es igual a 0.300000000000000000000004. Los números de JavaScript se construyen de acuerdo con el estándar IEEE 754 y están representados internamente por decimales de puntos flotantes de 64 bits. Para más detalles, consulte cómo se codifican los números en JavaScript.
Este problema se puede resolver usando tofixed () y toprecision ().
26. Verifique las propiedades del objeto a través del bucle for-In
El siguiente uso puede evitar que ingrese las propiedades prototipo del objeto durante la iteración.
La copia del código es la siguiente:
for (nombre var en objeto) {
if (object.hasownproperty (nombre)) {
// Haz algo con nombre
}
}
27. Operador de coma
La copia del código es la siguiente:
var a = 0;
var b = (a ++, 99);
console.log (a); // a será igual a 1
console.log (b); // b es igual a 99
28. Almacenamiento temporal de variables utilizadas para el cálculo y la consulta
En el selector de jQuery, todo el elemento DOM se puede almacenar temporalmente.
La copia del código es la siguiente:
var Navight = document.Queryselector ('#right');
var navleft = document.Queryselector ('#izquierda');
var navup = document.queryselector ('#up');
var navdown = document.querySelector ('#down');
29. Verifique los parámetros pasados en isfinite () por adelantado
La copia del código es la siguiente:
isfinite (0/0); // FALSO
isfinite ("foo"); // FALSO
isfinite ("10"); // verdadero
isfinite (10); // verdadero
isfinite (indefinido); // FALSO
isfinite (); // FALSO
isfinite (nulo); // Verdadero, preste especial atención a esto
30. Evite usar números negativos como indexación en matrices
La copia del código es la siguiente:
var numbearray = [1,2,3,4,5];
var from = NumbersArray.IndexOf ("foo"); // de es igual a -1
NumbersArray.splice (de, 2); // devolverá [5]
Tenga en cuenta que el parámetro de índice pasado al empalme no es un número negativo. Cuando se trata de un número negativo, el elemento se eliminará desde el final de la matriz.
31. Use JSON para serializar y deserializar
La copia del código es la siguiente:
Var Person = {nombre: 'saad', edad: 26, departamento: {id: 15, nombre: "R&D"}};
var stringfromferson = json.stringify (persona);
/ * El resultado de StringFromPerson es "{" nombre ":" saad "," edad ": 26," departamento ": {" id ": 15," nombre ":" R&D "}}"/
var personaFromString = json.parse (StringFromPerson);
/* El valor de la persona de la persona es el mismo que el del objeto de la persona*/
32. No use eval () o constructor de funciones
La sobrecarga de los constructores eval () y de la función es alta. Cada vez que se les llama, el motor JavaScript necesita convertir el código fuente en código ejecutable.
La copia del código es la siguiente:
var func1 = nueva función (functionCode);
var func2 = eval (functionCode);
33. Evite usar con ()
Use con () para agregar variables al alcance global. Por lo tanto, si hay otras variables con el mismo nombre, es fácil confundirse, y el valor también se sobrescribirá.
34. No use para las matrices
evitar:
La copia del código es la siguiente:
var sum = 0;
para (var i en arraynumbers) {
suma += ArrayNumbers [i];
}
En cambio:
La copia del código es la siguiente:
var sum = 0;
para (var i = 0, len = arraynumbers.length; i <len; i ++) {
suma += ArrayNumbers [i];
}
Otra ventaja es que las dos variables I y Len están en la primera declaración del bucle for, y ambas se inicializarán solo una vez, que es más rápido que el siguiente método de escritura:
La copia del código es la siguiente:
para (var i = 0; i <arraynumbers.length; i ++)
35. Use funciones en lugar de cadenas al pasar a setInterval () y setTimeOut ()
Si pasa una cadena a setTimeOut () y setInterval (), se convertirán de manera similar a Eval, lo que definitivamente será más lento, así que no use:
La copia del código es la siguiente:
setInterval ('dosomethingperyically ()', 1000);
setTimeout ('dosomthingterfterfiveseConds ()', 5000);
En su lugar, use:
La copia del código es la siguiente:
setInterval (DosiMeTingperídicamente, 1000);
setTimeOut (DosomingeFterFiveseSeconds, 5000);
36. Use interruptor/estuche en lugar de una gran pila de if/else
Al juzgar que hay más de dos ramas, use Switch/Case para que sea más rápido, más elegante y más propicio para la organización del código. Por supuesto, si hay más de 10 ramas, no use Switch/Case.
37. Use intervalos digitales en Switch/Case
De hecho, las condiciones de caso en Switch/Case también se pueden escribir así:
La copia del código es la siguiente:
función getCategory (edad) {
Categoría var = "";
Switch (True) {
Caso Isnan (edad):
categoría = "no es una edad";
romper;
caso (edad> = 50):
categoría = "Old";
romper;
caso (edad <= 20):
categoría = "bebé";
romper;
por defecto:
categoría = "joven";
romper;
};
categoría de devolución;
}
getCategory (5); // regresará "bebé"
38. Use objetos como prototipos
De esta manera, puede crear un nuevo objeto basado en esto como un parámetro:
La copia del código es la siguiente:
function clone (objeto) {
function ershotConstructor () {};
OneShotConstrucor.Prototype = Object;
return new OneShotConstrucor ();
}
clon (matriz) .prototype; // []
39. Función de conversión de campo HTML
La copia del código es la siguiente:
function escapeHtml (text) {
var reemplazos = {"<": "<", ">": ">", "&": "&", "/": "" ""};
return text.replace (/[<> & "]/g, función (carácter) {
RETURN REEMPLACIONES [CARACTER];
});
}
40. No use try-capch-finalmente dentro del bucle
La parte de captura en Try-Catch-Finally asignará excepciones a una variable cuando se ejecute, y esta variable se construirá en una nueva variable dentro del alcance de tiempo de ejecución.
No:
La copia del código es la siguiente:
var objeto = ['foo', 'bar'], i;
para (i = 0, len = object.length; i <len; i ++) {
intentar {
// Haz algo que arroje una excepción
}
Catch (e) {
// manejar excepción
}
}
En cambio:
La copia del código es la siguiente:
var objeto = ['foo', 'bar'], i;
intentar {
para (i = 0, len = object.length; i <len; i ++) {
// Haz algo que arroje una excepción
}
}
Catch (e) {
// manejar excepción
}
41. Presta atención a establecer el tiempo de espera cuando se usa xmlhttprequests
Cuando se ejecuta xmlhttprequests, cuando no hay respuesta durante mucho tiempo (como problemas de red, etc.), la conexión debe ser abortada. Este trabajo se puede realizar por setTimeOut ():
La copia del código es la siguiente:
var xhr = new xmlhttprequest ();
xhr.OnreadyStateChange = function () {
if (this.readyState == 4) {
ClearTimeOut (tiempo de espera);
// hacer algo con datos de respuesta
}
}
VAR TIMEOUT = SETTIMEOUT (function () {
xhr.abort (); // devolución de llamada de error de error
}, 60*1000 /*Tiempo de espera después de un minuto* /);
xhr.open ('get', url, verdadero);
xhr.send ();
Al mismo tiempo, debe tenerse en cuenta que no se deben iniciar múltiples solicitudes de XMLHTPREQUESTS al mismo tiempo.
42. Manejar el tiempo de espera de WebSocket
En términos generales, después de que se crea la conexión WebSocket, si no hay actividad dentro de los 30 segundos, el servidor pasará el tiempo de la conexión, y el firewall también puede hacer un tiempo para la conexión que no está activa en un ciclo de unidad.
Para evitar que esto suceda, se puede enviar un mensaje vacío al servidor cada vez. Este requisito se puede lograr a través de las siguientes dos funciones, una para mantener la conexión activa y la otra específicamente para finalizar este estado.
La copia del código es la siguiente:
VAR TIMERID = 0;
function keepalive () {
VAR TIMEOUT = 15000;
if (webSocket.readyState == WebSocket.open) {
WebSocket.send ('');
}
timerId = setTimeOut (KeepAlive, Tiempo de espera);
}
function Cancelkeepalive () {
if (timerID) {
CANCELTIMEOUT (TIMERID);
}
}
La función KeepAlive () se puede colocar al final del método OnOpen () de la conexión WebSocket, y Cancelkeepalive () se puede colocar al final del método OnClose ().
43. Presta atención al tiempo y el operador original es más rápido que la llamada de función. Use vainillajs
Por ejemplo, generalmente no así:
La copia del código es la siguiente:
var min = math.min (a, b);
A.push (v);
Esto se puede usar en su lugar:
La copia del código es la siguiente:
var min = a <b? A: B;
A [A.Length] = V;
44. Presta atención a la estructura del código durante el desarrollo, verificación y comprimir el código JavaScript antes de conectarse en línea
Puede usar herramientas como JSLint o JSmin para verificar y comprimir el código.