¡10 trucos de JavaScript que no conoces para hacer tu código más elegante!

---

prefacio

Cuando te conviertas en un desarrollador front-end, JavaScript será una parte integral de tu trabajo. Durante el proceso de desarrollo, puede encontrar muchos problemas espinosos, como problemas de rendimiento, legibilidad del código, complejidad del código, etc. En este artículo, presentaremos 10 trucos de JavaScript para ayudarlo a resolver mejor estos problemas y hacer que su código sea más elegante.

1. Utilizar la asignación de desestructuración para mejorar la legibilidad y el mantenimiento del código;

La asignación de desestructuración es una sintaxis introducida en ES6, que puede desestructurar el valor en un objeto o matriz y asignarlo a una variable. Esto puede hacer que el código sea más conciso y comprensible, y mejorar la legibilidad y el mantenimiento del código.
Por ejemplo, tenemos un objeto que contiene información del usuario como esta:

const user = {
    
    
  name: 'Tom',
  age: 18,
  sex: 'male',
  address: 'Beijing'
};

Si queremos obtener el nombre y la edad del usuario, podemos usar la asignación de desestructuración:

const {
    
     name, age } = user;
console.log(name, age); // 输出：Tom 18

2. El uso de cadenas de plantilla para manejar el empalme de cadenas puede hacer que el código sea más claro y más fácil de entender;

Antes de ES6, solíamos usar el signo más o el método concat() para la concatenación de cadenas. Pero este método es engorroso y la legibilidad del código es deficiente. En ES6, podemos usar cadenas de plantilla para manejar la concatenación de cadenas, lo que puede hacer que el código sea más claro y fácil de entender.
Una cadena de plantilla es una cadena envuelta en acentos graves (`), que puede contener variables, expresiones y más. Por ejemplo:

const name = 'Tom';
const age = 18;
const message = `My name is ${
      
      name}, I am ${
      
      age} years old.`;
console.log(message); // 输出：My name is Tom, I am 18 years old.

3. Use funciones de flecha para acortar el código y mejorar la legibilidad del código;

La función de flecha es una sintaxis introducida en ES6, que puede acortar la longitud del código de la función al tiempo que mejora la legibilidad del código.
Por ejemplo, tenemos una función normal:

function add(a, b) {
    
    
  return a + b;
}

Se puede definir usando una función de flecha:

const add = (a, b) => a + b;

4. El uso de Object.assign() para fusionar objetos puede hacer que el código sea más conciso;

En el proceso de desarrollo, a menudo necesitamos fusionar dos o más objetos, lo que se puede lograr usando el método Object.assign(). Este método puede copiar todos los atributos de uno o más objetos de origen al objeto de destino, para realizar la fusión de objetos.
Por ejemplo:

const obj1 = {
    
     a: 1, b: 2 };
const obj2 = {
    
     c: 3, d: 4 };
const obj3 = Object.assign({
    
    }, obj1, obj2);
console.log(obj3); // 输出：{a: 1, b: 2, c: 3, d: 4}

5. Utilice la estructura de datos del mapa para administrar los datos y mejorar la legibilidad del código;

El uso de la estructura de datos Map para administrar datos es una técnica de programación común que mejora la legibilidad y el mantenimiento del código.
Map es una nueva estructura de datos en ES6, que se puede usar para almacenar pares clave-valor. En comparación con los objetos tradicionales, la ventaja de Map es que se puede usar cualquier tipo como nombre clave, el orden de los pares clave-valor no cambiará y la información del tamaño se puede obtener rápidamente.
En el desarrollo front-end, puede usar Map para administrar datos, como listas, formularios, etc. en la página. Al usar Map, los datos se pueden almacenar en forma de pares clave-valor, lo que puede mejorar la legibilidad y la capacidad de mantenimiento del código. Por ejemplo, en una página, necesita administrar los valores de múltiples elementos de formulario, puede usar Map para almacenar estos valores. De esta manera, el valor de cada elemento del formulario se puede obtener a través del nombre de clave correspondiente, el código es más legible y es conveniente modificarlo y mantenerlo.

// 创建一个Map对象
const formData = new Map();

// 添加表单元素的值到Map中
formData.set('username', 'John');
formData.set('password', '123456');

// 获取表单元素的值
const username = formData.get('username');
const password = formData.get('password');

Al usar Map para administrar datos, el código puede ser más conciso y más fácil de mantener. Al mismo tiempo, Map también proporciona algunos métodos convenientes, como set(), get(), has(), delete(), etc., que pueden operar fácilmente en los datos.
Estos son algunos escenarios de uso comunes:

1. Administrar datos de formulario
Cuando hay varios elementos de formulario en la página que necesitan interacción de datos, puede usar Mapa para almacenar datos de formulario. Por ejemplo:

const formData = new Map();
formData.set('username', 'John');
formData.set('password', '123456');

De esta forma, podemos obtener el valor del elemento de formulario correspondiente a través del método get():

const username = formData.get('username');
const password = formData.get('password');

2. Administrar el estado de la página
Cuando hay algunos estados en la página que deben administrarse, se puede usar Map para almacenar el estado. Por ejemplo:

const state = new Map();
state.set('loading', false);
state.set('error', null);

De esta forma, podemos usar el método set() para actualizar el valor del estado correspondiente:

state.set('loading', true);
state.set('error', '请求失败');

3. Administrar datos de lista
Cuando hay una lista en la página que necesita ser administrada, puede usar Mapa para almacenar los datos de la lista. Por ejemplo:

const list = new Map();
list.set(1, {
    
     id: 1, name: 'John' });
list.set(2, {
    
     id: 2, name: 'Mike' });

De esta forma, podemos usar el método get() para obtener el valor del ítem correspondiente:

const item = list.get(1);

4. Administrar datos en caché
Cuando necesitamos almacenar en caché algunos datos, podemos usar Mapa para almacenar los datos en caché. Por ejemplo:

const cache = new Map();
cache.set('key1', 'value1');
cache.set('key2', 'value2');

De esta forma, podemos usar el método get() para obtener los datos de caché correspondientes:

const value = cache.get('key1');

En resumen, Map es una estructura de datos muy práctica, que se usa ampliamente en el desarrollo front-end. Usar Map para administrar datos puede hacer que el código sea más conciso y fácil de mantener. Al mismo tiempo, Map también proporciona algunos métodos convenientes, como set(), get(), has(), delete(), etc., que pueden operar fácilmente en los datos.

6. Use la estructura de datos Establecer para eliminar elementos duplicados para que el código sea más conciso;

Set es una nueva estructura de datos introducida en ES6, es una colección que puede almacenar cualquier tipo de datos y garantiza que el valor de cada elemento es único en la colección. El uso de la estructura de datos Set puede eliminar fácilmente elementos repetidos en la matriz u objeto y mejorar la simplicidad del código.

El siguiente es un código de muestra para la deduplicación mediante Set:

const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const uniqueArr = Array.from(set); // [1, 2, 3]

En el código anterior, primero definimos una matriz arr que contiene elementos repetidos. Luego use new Set(arr) para crear una colección Set, elimine los elementos repetidos en la matriz y obtenga una colección que contenga solo elementos no repetidos. Finalmente, usamos Array.from para convertir la colección en una matriz, lo que da como resultado una matriz uniqueArr que no contiene elementos duplicados.
Este método se puede utilizar no solo para la deduplicación de arreglos, sino también para la deduplicación de objetos. Por ejemplo, podemos usar Set para eliminar objetos duplicados de una matriz:

const arr = [{
    
     id: 1 }, {
    
     id: 2 }, {
    
     id: 1 }, {
    
     id: 3 }];
const set = new Set(arr.map(item => item.id));
const uniqueArr = Array.from(set, id => ({
    
     id }));
console.log(uniqueArr); // [{ id: 1 }, { id: 2 }, { id: 3 }]

En el código anterior, primero usamos Array.map para asignar los objetos en la matriz a sus valores de identificación y luego usamos el nuevo Conjunto para eliminar los valores de identificación duplicados. Finalmente, convertimos la colección en una matriz de objetos usando Array.from y creamos un nuevo objeto para cada valor de identificación, lo que da como resultado una matriz que contiene solo objetos únicos.

7. El uso de async/await para manejar operaciones asíncronas puede mejorar la legibilidad y el mantenimiento del código;

Las operaciones asincrónicas son un patrón de programación común en JavaScript, como obtener datos de un servidor o ejecutar tareas de larga duración, etc. Las operaciones asincrónicas a menudo implican funciones de devolución de llamada u objetos Promise, lo que puede dar lugar a un código complejo y difícil de leer. Para resolver este problema, ES2017 presenta el azúcar sintáctico async/await, que proporciona una manera más intuitiva y fácil de entender de manejar las operaciones asincrónicas.
El azúcar sintáctico async/await es muy simple de usar, solo agregue la palabra clave async delante de la función y use la palabra clave await donde necesita esperar a que se complete la operación asíncrona. Por ejemplo, aquí hay una operación asíncrona que usa objetos Promise:

function getData() {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      resolve('data');
    }, 1000);
  });
}

getData().then((data) => {
    
    
  console.log(data);
});

El azúcar de sintaxis async/await se puede reescribir como el siguiente código:

async function getData() {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      resolve('data');
    }, 1000);
  });
}

async function fetchData() {
    
    
  const data = await getData();
  console.log(data);
}

fetchData();

En este ejemplo, la función getData() devuelve un objeto Promise, la función fetchData() se declara como una función asíncrona usando la palabra clave async y la palabra clave await espera el resultado del objeto Promise y luego almacena el resultado en el datos variables De esta forma, al usar el azúcar sintáctico async/await, el código se vuelve más conciso y más fácil de leer.

8. Use Promise.all() para manejar múltiples operaciones asincrónicas para mejorar la eficiencia del código;

En el desarrollo front-end, a menudo es necesario procesar varias operaciones asincrónicas al mismo tiempo, como obtener datos de varias interfaces API para su visualización. En este momento, Promise.all() se puede usar para procesar múltiples operaciones asincrónicas al mismo tiempo para mejorar la eficiencia del código.
Promise.all() es un método estático que recibe una matriz como parámetro, y cada elemento de la matriz es un objeto Promise. Cuando todos los objetos Promise se han resuelto, el método Promise.all() devuelve un nuevo objeto Promise cuyo estado se resuelve, y el valor de retorno es una matriz de los resultados de todos los objetos Promise, si alguno de los objetos Promise se rechaza, se rechaza el estado del objeto Promise devuelto por el método Promise.all() y se devuelve el resultado del primer objeto Promise rechazado.
Aquí hay un código de ejemplo que usa Promise.all() para manejar múltiples operaciones asincrónicas:

const fetchData1 = fetch('https://api.example.com/data1');
const fetchData2 = fetch('https://api.example.com/data2');
const fetchData3 = fetch('https://api.example.com/data3');

Promise.all([fetchData1, fetchData2, fetchData3])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(dataArray => {
    
    
    // 在此处对数据进行处理和展示
  })
  .catch(error => console.log(error));

En este ejemplo, primero se crean tres operaciones asincrónicas y cada operación usa el método fetch() para obtener datos de la interfaz API. Luego, estas tres operaciones asincrónicas se encapsulan en una matriz de objetos Promise y se pasan al método Promise.all() para su procesamiento. Después de ejecutar todas las operaciones asíncronas, use el método .then() para obtener los resultados de cada operación asíncrona y use el método Promise.all() para procesar todos los resultados y convertirlos en datos con formato JSON. Finalmente, la visualización u otro procesamiento se realiza en los datos procesados. Si se produce algún error durante una operación asíncrona, se captura y se gestiona mediante el método .catch().

9. El uso de const y let en lugar de var puede evitar los problemas de promoción de variables y variables globales;

Antes de ES6, la única forma de declarar variables en JavaScript era con la palabra clave var. Sin embargo, var tiene algunos problemas, como la elevación variable y la contaminación global, que pueden causar algunos problemas impredecibles en proyectos grandes.
ES6 introduce dos nuevas palabras clave, const y let, para declarar variables. En comparación con var, tienen una mejor semántica y reglas de alcance más estrictas, lo que puede evitar algunos problemas potenciales.
Use const para declarar constantes, y las constantes no se pueden reasignar después de la declaración. Esto asegura que el valor de la constante no cambie accidentalmente y mejora la legibilidad del código. Por ejemplo:

const PI = 3.14159;
const url = 'https://example.com/api';

Use let para declarar variables variables, y su alcance está solo dentro del alcance del bloque declarado. Let permite un mejor control sobre el alcance de las variables que el alcance a nivel de función de var. Por ejemplo:

for (let i = 0; i < 10; i++) {
    
    
  console.log(i);
}

console.log(i); // ReferenceError: i is not defined

En el ejemplo anterior, la variable i solo es visible en el ámbito de nivel de bloque del bucle for y se destruirá fuera de este ámbito, lo que puede evitar los problemas de contaminación de variables y conflictos de nombres.

En general, usar const y let en lugar de var puede mejorar la legibilidad, el mantenimiento y la seguridad del código, y evitar algunos problemas innecesarios.

10. Usar try/catch para manejar errores puede hacer que el código sea más robusto.

Al escribir código, es inevitable encontrar varios errores, como errores de sintaxis, errores de tipo, errores de red, etc. Para hacer que el código sea más robusto, podemos usar try/catch para manejar los errores.
El bloque de instrucciones try/catch se usa para capturar la excepción en el bloque de código y proporcionar una forma de manejar la excepción. Cuando ocurre una excepción en el bloque de sentencias try, el programa saltará inmediatamente al bloque de sentencias catch y ejecutará el código en el bloque de sentencias catch.
Aquí hay un ejemplo simple usando try/catch para manejar errores en solicitudes de red:

async function fetchData() {
    
    
  try {
    
    
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    
    
    console.log('Error fetching data:', error);
    return null;
  }
}

En este ejemplo, la función fetchData() usa async/await para manejar operaciones asincrónicas, la función fetch() se usa para enviar solicitudes de red y el método response.json() se usa para convertir la respuesta en datos con formato JSON.
En el bloque de instrucciones try, usamos la palabra clave await para esperar a que los métodos fetch() y response.json() devuelvan datos. Si se produce un error de red o un error de análisis de JSON, el código salta inmediatamente al bloque catch.
En el bloque catch, imprimimos el mensaje de error y devolvemos nulo. De esta forma, podemos manejar los errores en las solicitudes de red en nuestro código y no bloquear el programa.

Resumir

Al aprender estos consejos de JavaScript, puede resolver mejor los problemas encontrados en el proceso de desarrollo y hacer que su código sea más elegante, conciso y fácil de mantener.
Lo anterior es todo el contenido de este capítulo, gracias por leer, espero que pueda ayudarlo.