Experiencia práctica de JavaScript

Cada persona escribe JavaScript de manera diferente. Sin embargo, hay muchos puntos en común, aquí hay una serie de guías y consejos simples para escribir JavaScript que le ayudarán a evitar el camino errado.

Evite las variables globales

Reduzca al mínimo el uso de variables globales. Esto incluye todos los tipos de datos, objetos y funciones.

Las variables globales y las funciones pueden ser sobrescritas por otros scripts. Por lo tanto, utilice variables locales.

Las variables locales deben usarlet,constyvardeclaración de palabras clave, de lo contrario se convertirá en variable global.

siempre declare variables

Al declarar variables y constantes, utiliceletyconstpalabra clave, en lugar devar.

　　//　Recomendado:
　　let miEdad =　22;
　　const miNombre = "oldtoolbag.com";
　　
　　//　No se recomienda:
　　var miEdad =　22;
　　var miNombre = "oldtoolbag.com";

Hay muchas razones suficientes para hacerlo-Por ejemplo, evita problemas causados por la redistribución accidental y evita que afecte la mejora de la legibilidad.

Es una buena práctica poner todas las declaraciones en la parte superior de cada script o función.

A continuación, se proporciona un código más conciso y se proporciona un lugar para buscar todas las variables al principio del código.

　　//　Las declaraciones se escriben al principio
　　let firstName, lastName, price, discount, fullPrice;
　　
　　//　usar
　　firstName = "oldtoolbag.com";
　　lastName = "Choudhary";
　　
　　price =　26.90;
　　discount =　1.25;
　　
　　fullPrice = price　*　100　/　discount;

Usar la sintaxis extendida

Para maximizar la legibilidad, usamos la sintaxis extendida, cambiando cada línea de JS.

　　//　Recomendado:
　　function myFunc() {
　　console.log("Parrot Tutorial");
　　}
　　
　　//　No se recomienda:
　　function myFunc() { console.log("Parrot Tutorial"); }

Debes usar espacios entre operadores, operandos, parámetros, etc.:

　　//　esto es más legible
　　if(dayOfWeek ===　7　&& weather === "sunny") {
　　/*　Alguno de código　*/
　　}
　　
　　//　la legibilidad es peor
　　if(dayOfWeek===7&&weather==="sunny"){
　　/*　Alguno de código　*/
　　}

No declare números, cadenas o booleanos como objetos

Siempre considera los números, cadenas o booleanos como valores primitivos. No los declare como objetos.

Declarar estos tipos como objetos reducirá la velocidad de ejecución y producirá resultados inesperados.

var str1　new String("New Delhi");
var str2　new String("New Delhi");
document.write(str1　=== str2);　//　devuelve false porque str1　y str2　tienen diferentes tipos

no se puede comparar el objeto:

var str1　new String("New Delhi");
var str2　new String("New Delhi");
document.write(str1　== str2);　//　devuelve false porque str1y str2son objetos diferentes
document.write(str1　=== str2);　//　devuelve false porque str1y str2son objetos diferentes

no usar new Object()

• usar {} en lugar de new Object()

• usar "" en lugar de new String()

• usar 0 en lugar de new Number()

• usar false en lugar de new Boolean()

• usar [] en lugar de new Array()

• usar/()}}/usar new RegExp()

• usar function (){} en lugar de new Function()

let x1　{};
let x2　"";
let x3　0;
let x4　false;
let x5　[];
let x6　=　/()}}/;
let x7　= function(){};

Cuidado con la conversión de tipo automática

JavaScript es un lenguaje de tipo suelto o dinámico. Las variables de JavaScript no están directamente asociadas con ningún tipo de valor específico y se pueden asignar (y reasignar) todos los tipos de valores a todas las variables.

var x =　20;　//　x ahora es un Number
x = "oldtoolbag.com";　　　//　x ahora es un String
x = true;　　　//　x ahora es un Boolean

Cuando se realizan operaciones matemáticas, JavaScript puede convertir números a cadenas:

num =　50　+　10;//　Devuelve　60, typeof num es un número
num =　50　+　"10";　　//　Devuelve "5010", typeof num es una cadena
num = "50"　+　10;　　//　Devuelve "5010", typeof num es una cadena
num = "50"　-　10;　　//　Devuelve "40", typeof num es un número

Tenga en cuenta que los números pueden convertirse accidentalmente enNaN（No numérico）：

num =　50　*　"Parrot";　　//　Devuelve "NaN", typeof num es un número

Uso de comparación estricta

La comparación == siempre compara después de la conversión (para que coincida con el tipo).

El operador de comparación estricto === fuerza la comparación de valor y tipo.

　　1　== ";1";　　　//　true
　　1　== true;　　//　true
　　
　　1　=== ";1";　　//　false
　　1　=== true;　　　//　false

Uso de constantes de plantilla

Para insertar un valor en una cadena, utiliceConstantes de plantilla（` `）。

　　//　Recomendado:
　　let myName = 'oldtoolbag.com';
　　console.log(`Hi! I'm ${myName}!`);
　　
　　//　No se recomienda:
　　let myName = 'oldtoolbag.com';
　　console.log('Hi! I\'m'　+　myName　+　'!');

Bucle general

Al usarfor,for...inofor...ofBucle, asegúrese de definir correctamente la inicialización, utiliceletPalabra clave.

　　let fruits = ["Apple", "Mango", "Banana"];
　　
　　//　Recomendado:
　　for(let i of fruits) {
　　　console.log(i);
　　}
　　
　　//　No se recomienda:
　　for(i of fruits) {
　　　console.log(i);
　　}

Además, recuerde:

• No debe haber espacio entre la palabra clave de bucle y el paréntesis izquierdoEspacio.

• Entre los paréntesis y los corchetes debe haberUn espacio.

Nombres de función

Para el nombre de la función, utilice lowerCamelCasing y utilice nombres semánticos claros y comprensibles en el lugar adecuado.

　　//　Recomendado:
　　function　sayHello()　{
　　alert('Hello!');
　　}
　　
　　//　No se recomienda:
　　function　sayhello()　{
　　alert('Hello!');
　　}

Finalice el switch con un valor por defecto

switchSiempre finalice con default: incluso si no lo considera necesario.

var　day;
switch　(new　Date().getDay())　{
case　0:　day　=　"Sunday";
break;
case　1:　day　=　"Monday";
break;
case　2:　day　=　"Tuesday";
break;
case　3:　day　=　"Wednesday";
break;
case　4:　day　=　"Thursday";
break;
case　5:　day　=　"Friday";
break;
case　6:　day　=　"Saturday";
break;
default:　day　=　"Undefined　Day";
}

Manejo de errores

Si ciertos estados del programa arrojan errores no capturados, se detendrán y pueden reducir la utilidad del ejemplo.

Por lo tanto, debe usartry...catchBloque para capturar errores.

　　try　{
　　console.log(results);
　　}
　　catch(e)　{
　　console.error(e);
　　}