¡Dijiste que puedes usar ES6, luego úsalo rápidamente!

Cómo comenzar rápidamente con VUE3.0: comience aprendiendo

"¡Si sabe cómo usar ES6, entonces úselo!": Este es el "rugido" que un líder les hizo a los miembros del equipo durante una revisión de código porque descubrió muchos lugares durante la revisión del código. Es mejor utilizar el método de escritura ES5. No significa que escribir en ES5 no funcionará y habrá errores. Solo provoca un aumento en la cantidad de código y una mala legibilidad.

Dio la casualidad de que este líder tenía un fetiche con el código. Estaba extremadamente insatisfecho con los miembros que tenían de 3 a 5 años de experiencia escribiendo código a este nivel y seguía quejándose del código. Sin embargo, siento que todavía aproveché mucho de sus quejas, así que registré las quejas del líder y las compartí con otros excavadores. Si crees que son útiles, dale el visto bueno. Si hay errores o mejores formas de escribirlas. Eres bienvenido a comentar.

PD: ¡La sintaxis JS después de ES5 se llama colectivamente ES6! ! !

1. Tucao sobre la recopilación de valores

El valor es muy común en programas, como obtener valor del objeto obj .

objeto constante = {
    un:1,
    b: 2,
    c:3,
    d:4,
    e:5,
}

Tucao :

const a = obj.a;
constante b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

o

const f = obj.a + obj.d;
const g = obj.c + obj.e;

Tucao: "¿No puedes usar la asignación de desestructuración de ES6 para obtener el valor? ¿No es bueno usar 5 líneas de código en 1 línea de código? Solo usa el nombre del objeto más el nombre del atributo para obtener el valor. Si está bien si el nombre del objeto es corto, pero si es muy largo, el nombre del objeto estará en todas partes del código "

Mejora :

const {a,b,c,d,e} =. objeto;
constante f = a + d;
const g = c + e;

El contraargumento

no es que no uso la asignación desestructurante de ES6, sino que los nombres de los atributos en el objeto de datos devueltos por el servidor no son los que quiero. Para obtener el valor de esta manera, tengo que hacerlo. recrear una tarea transversal.

Parece

que su comprensión de la desestructuración y asignación de ES6 no es lo suficientemente completa. Si el nombre de la variable que desea crear no coincide con el nombre de la propiedad del objeto, puede escribir:

const {a:a1} = obj;
console.log(a1); // 1

suplementaria

de ES6 es fácil de usar. Pero tenga en cuenta que el objeto desestructurado no puede ser undefined o null . De lo contrario, se informará un error, por lo que al objeto desestructurado se le debe dar un valor predeterminado.

const {a,b,c,d,e} = obj || {};

2. Quejas sobre la fusión de datos

, como la fusión de dos matrices y la fusión de dos objetos.

constante a = [1,2,3];
constante b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

constante obj1 = {
  un:1,
}
constante obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

se quejó de

si se olvidó el operador de extensión de ES6 y si la fusión de matrices no consideraba la deduplicación.

mejorada

a = [1,2,3];
constante b = [1,5,6];
const c = [...nuevo conjunto([...a,...b])];//[1,2,3,5,6]

constante obj1 = {
  un:1,
}
constante obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. Tucao sobre el empalme de cadenas

const name = 'Xiao Ming';
puntuación constante = 59;
dejar resultado = '';
si(puntuación > 60){
  resultado = `La puntuación del examen de ${name} es aprobatoria`; 
}demás{
  resultado = `${nombre} reprobó el examen`; 
}

Quejándote del

uso de plantillas de cadenas de ES6 como lo haces, es mejor no usarlas. No tienes idea de qué operaciones se pueden realizar en ${} . En ${} puede colocar cualquier expresión de JavaScript, realizar operaciones y hacer referencia a propiedades de objetos.

mejorado

= 'Xiao Ming';
puntuación constante = 59;
resultado const = `${nombre}${puntuación > 60?''s puntuación de la prueba pasó':''s puntuación de la prueba falló'}`

4. Comentarios sobre las condiciones de juicio en if

(
    tipo == 1 ||
    tipo == 2 ||
    tipo == 3 ||
    tipo == 4 ||
){
   //...
}

¿Se queja de

si el método de instancia de matriz includes se utilizará en ES6?

mejorada

= [1,2,3,4];

si (condición.incluye (tipo)) {
   //...
}

5. Quejas sobre la búsqueda de listas

En el proyecto, la función de búsqueda de algunas listas no paginadas se implementa mediante la interfaz. La búsqueda generalmente se divide en búsqueda precisa y búsqueda difusa. La búsqueda también se denomina filtrado y generalmente se implementa mediante filter .

constante a = [1,2,3,4,5];
resultado constante = a.filtro( 
  elemento =>{
    artículo devuelto === 3
  }
)

quejarse

de la búsqueda exacta, ¿no utilizará find en ES6? ¿Entiendes la optimización del rendimiento? Si se encuentra un elemento que cumple las condiciones en el método find , no continuará atravesando la matriz.

mejorada

a = [1,2,3,4,5];
resultado constante = a.find( 
  elemento =>{
    artículo devuelto === 3
  }
)

6. Quejas sobre matrices aplanadas

En los datos JSON de un departamento, el nombre del atributo es la identificación del departamento y el valor del atributo es una colección de matrices de identificaciones de miembros del departamento. Ahora necesitamos extraer todas las identificaciones de miembros del departamento en una colección de matrices.

constantes = {
'Departamento de Compras':[1,2,3],
'Departamento de Personal':[5,8,12],
'Departamento Administrativo':[5,14,79],
'Ministerio de Transporte':[3,64,105],
}
dejar miembro = [];
para (dejar el artículo en departamentos){
    valor constante = deps[elemento];
    if(Array.isArray(valor)){
        miembro = [...miembro,...valor]
    }
}
miembro = [...nuevo conjunto (miembro)]

¿Es necesario recorrer para obtener todos los valores de atributos de un objeto

?

¿Se han olvidado Object.values ? También existe el proceso de aplanamiento que involucra matrices. ¿Por qué no utilizar el método flat proporcionado por ES6? Afortunadamente, la profundidad de la matriz esta vez es solo de hasta 2 dimensiones. Si encuentra matrices con profundidades de 4 o 5 dimensiones, ¿es necesario? ¿Bucle anidado para aplanar?

Mejorar

constantes = {
    'Departamento de Compras':[1,2,3],
    'Departamento de Personal':[5,8,12],
    'Departamento Administrativo':[5,14,79],
    'Ministerio de Transporte':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

Infinity se utiliza como parámetro de flat , por lo que no es necesario conocer las dimensiones de la matriz aplanada.

Se complementó que

el método flat no es compatible con el navegador IE.

7. Tucao sobre cómo obtener el valor del atributo del objeto

const

name = obj && obj.name;

¿Se utilizará el operador de cadena opcional en ES6?

Mejorado

const name = obj?.name;

8. Comentarios sobre agregar atributos de objeto

Al agregar atributos a un objeto, ¿qué se debe hacer si el nombre del atributo cambia dinámicamente?

dejar objeto = {};
sea ​​índice = 1;
let clave = `tema${índice}`;
obj[key] = 'contenido del tema';

Tucao

por qué necesitamos crear una variable adicional. Me pregunto si se pueden usar expresiones para los nombres de propiedades de los objetos en ES6.

Mejorar

let obj = {};
sea ​​índice = 1;
obj[`topic${index}`] = 'contenido del tema';

9. Juicio sobre si el cuadro de entrada no está vacío

Al procesar negocios relacionados con el cuadro de entrada, a menudo se juzga que el cuadro de entrada no tiene valor de entrada.

if(valor!== nulo && valor!== indefinido && valor!== ''){
    //...
} ¿

Has oído hablar del nuevo operador de fusión de valores nulos en ES6? ¿Necesitas escribir tantas condiciones

?

si((valor??'') !== ''){
  //...
}

10. Quejas sobre funciones asincrónicas

Las funciones asincrónicas son muy comunes y, a menudo, se implementan mediante Promise.

constante fn1 = () =>{
  devolver nueva Promesa((resolver, rechazar) => {
    setTimeout(() => {
      resolver(1);
    }, 300);
  });
}
constante fn2 = () =>{
  devolver nueva Promesa((resolver, rechazar) => {
    setTimeout(() => {
      resolver(2);
    }, 600);
  });
}
constante fn = () =>{
   fn1().entonces(res1 =>{
      consola.log(res1); // 1
      fn2().entonces(res2 =>{
        consola.log(res2)
      })
   })
}

llamas

a una función asincrónica como esta, ¡no tendrás miedo de una devolución de llamada infernal!

Mejorar

const fn = async () =>{
  const res1 = esperar fn1();
  const res2 = esperar fn2();
  consola.log(res1); // 1
  console.log(res2);// 2
}

Suplemento

: al realizar solicitudes simultáneas, aún necesita usar Promise.all() .

constante fn = () =>{
   Promesa.all([fn1(),fn2()]).luego(res =>{
       console.log(res);//[1,2]
   }) 
}

Si hay solicitudes simultáneas, siempre que se complete una de las funciones asincrónicas, se devolverá el resultado y se debe utilizar Promise.race() .

11.

Puede refutar los diez puntos anteriores de las quejas del líder. Si su refutación es razonable, la refutaré en la próxima reunión de revisión del código.

Además, si hay algún error en el contenido organizado anteriormente, no dude en corregirlo en los comentarios. Muchas gracias.

Este artículo está reproducido de: https://juejin.cn/post/7016520448204603423

Autor: Hongchen Lianxin

[Recomendación de video tutorial relacionado: interfaz web]

Lo anterior es lo que dijiste: puedes usar ES6, ¡luego úsalo rápidamente! Para obtener más detalles, preste atención a otros artículos relacionados en el sitio web chino de php.