¡Cómo escribir mejor código JS!

Autor: Taimoor Sattar
Traductor: Front Ash
Fuente: valentinog

Me gusta, mira de nuevo , búsqueda de WeChat ** 【Da Qian World】, la estación B presta atención a【Front-end Xiaozhi】 ** Esta persona no tiene antecedentes en una gran fábrica, pero tiene una actitud positiva hacia arriba. Este artículo GitHubse ha incluido en https://github.com/qq449245884/xiaozhi, el artículo ha sido clasificado y muchos de mis documentos y materiales tutoriales se han resuelto.

Javascript es un lenguaje que el navegador puede entender y se utiliza para cargar contenido dinámico sin actualizar la página. Hoy, enumeraré algunas formas de escribir JS con menos código y más legible. Comencemos.

Usar cadenas de plantilla

Las cadenas de plantilla son cadenas (variables) que se pueden incrustar en expresiones, lo que puede hacer que el código sea más simple y fácil de leer.

var code = "javascript";
var str = ` I love ${code} I love ${code} `;

Si no hay una cadena de plantilla, debemos escribir:

var code = "javascript";
var str1 = "n I love " +  code + "n I love " +  code + "n";

Usar operador ternario

En programación, se encontrarán operaciones lógicas. Si desea ejecutar lógica entre dos declaraciones, los operadores ternarios son mucho más legibles.

let price= isMember ? '$2.00' : '$10.00'

Utilice la declaración de inclusión

JS la includedeclaración es un método de oración más simple en la matriz y la cadena de búsqueda.

var str = "I love JavaScript.";
var word = str.includes("javaScript"); // result: true

También puede usar una variedad de includemétodos:

var str = ["taimoor", "ali", "umer"];
var n = str.includes("taimoor"); // result: true

Operador coalescente nulo

Si usamos una API de terceros, es posible que encontremos la misma que key-valueno aparecerá en todas las consultas. De esta forma, debemos buscar claves vacías en el JSON para evitar errores.

Para comprobar si hay claves vacías, puede utilizar los siguientes métodos:

Declaraciones condicionales
Operador de fusión nulo ( ??) - (recomendado)

Por ejemplo, tenemos el siguiente JSON:

var person = {
  name: "Taimoor Sattar",
  age: 21,
  metadata: {
    hobby: "football, blog"
  }
}

El uso de declaraciones condicionales, podemos acceder al JSON matadataen las propiedades del hobby de la siguiente manera

let hobby = "";
if (person.metadata){
  hobby = person.metadata.hobby ? person.metadata.hobby : "";
}

Para usar el operador de combinación nula, solo necesitamos hacer esto:

let hobby = person.metadata?.hobby ?? "";

El código anterior verifica la clave de hobby en los metadatos JSON y devuelve el valor si está disponible; de lo contrario, devuelve una cadena vacía.

Parámetros predeterminados de la función

Algunas funciones en JS nos permiten enviar parámetros de opciones. Según los parámetros opcionales, el valor de retorno de la función se puede cambiar.

function outputName(name="taimoor"){
  return name;
}

let string1 = outputName(); // result: taimoor
let string2 = outputName("ali"); // result: ali

Tipo de verificación de parámetros

En algunos casos, los parámetros de la función deben tener restricciones de tipo. Podemos verificar el tipo de la función de esta manera:

function sum(a, b){
  let result = (typeof a == "number" && typeof b == "number") ? a + b :  null;
  return result
}

sum("s", 6) // result: null
sum(4, 6) // result: 10

Utilice Try / Catch para envolver el código

Try/CatchLas declaraciones se utilizan para verificar errores en el código. Si se produce un error, se ejecutará la catchsentencia.

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

Deconstrucción

A través de la deconstrucción, podemos extraer la estructura compleja a la pieza que necesitamos.

function outputName({name = "taimoor"}){ // De-structuring
  return name;
}

var person = {
  name: "Taimoor Sattar",
  age: 21,
  metadata: {
    hobby: "football, blog"
  }
}

let str = outputName(person); // Taimoor Sattar

Escribir código DRY

SECO (no se repita), evite la repetición en el código para evitar confusiones. Para evitar confusiones en el código, puede seguir las siguientes reglas.

Escribir funciones reutilizables
Definir nombres claros para variables y funciones.

Finalizar ~

Soy Xiaozhi, voy a lavar los platos, ¡hasta la próxima!

Los posibles errores después de la implementación del código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedicó mucho tiempo a la depuración de registros. Por cierto, me gustaría recomendar una herramienta útil de monitoreo de BUG, Fundebug .

Original: https://taimoorsattar.dev/blogs/better-code-with-javascript

comunicarse con

El artículo se actualiza continuamente cada semana, puede buscar en WeChat [Da Qian World] para leerlo por primera vez y responder [Bienestar] Hay muchos videos de front-end esperándolo. Este artículo se ha incluido en GitHub https : //github.com/qq449245884/xiaozhi , bienvenido a Star.