No quiero que me rocíen más, ¡resolvamos el es6 de uso común! !

¡Comienza el viaje de crecimiento de los Nuggets! Este es el séptimo día de mi participación en el "Nuggets Daily New Project · February Update Challenge", haz clic para ver los detalles del evento

Hola a todos, soy Master Lin, un joven apasionado que se enfoca en la tecnología de front-end y aspira a convertirse en un experto en tecnología de front-end.

A partir del 17 de enero de 2023, decidí crear una nueva columna [Maximum LeetCode], revisar al menos una pregunta original de LeetCode todos los días y usar Typescript y JS nativo para escribir código.

Hoy es el día 3 ヾ(◍°∇°◍)ﾉﾞ

Para que os hagáis una idea de dónde estoy ahora mismo:

Así es, terminé de mudarme esta mañana y corrí a la empresa en la tarde, estoy a cargo y aún falta terminar el módulo, pero es una pena que el token no tenga derechos de acceso, así que Solo puedo pedirles a mis colegas que abran los permisos mañana.

Esta es mi nueva casa. Antes y después de la mudanza, todavía necesito limpiar. Espero mejorar la atmósfera de la casa, para que haya más atmósfera de aprendizaje, y tal vez pueda mejorar la eficiencia del aprendizaje.

Mis ojos están llenos de desorden, no puedo soportarlo, ¡regresa y ordena antes de irte a la cama! !

Pero no es una pérdida de tiempo, al menos sé transportarme~

Siguiendo el tema de ayer, continúe actualizando la sintaxis es6 comúnmente utilizada en el trabajo:

Sentencia sentencia en si

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}
复制代码

Después de la mejora, se puede abreviar como:

  const condition = [1, 2, 3, 4]  const type = 11  if (condition.includes(type)) {    console.log('这是真的吗')  }
复制代码

búsqueda de lista

En el desarrollo de proyectos formales, ante la función de búsqueda de algunas listas sin paginar, el front end es generalmente el encargado de implementarla.

La búsqueda generalmente se divide en búsqueda precisa y búsqueda difusa, y la búsqueda también se denomina filtrado.

Una es la búsqueda difusa, que generalmente se implementa con filtro :

    const a = [1, 2, 3, 4, 5]    const result = a.filter((item) => {      return item === 3    })    console.log('result', result)//[3]
复制代码

Sin embargo, si se trata de una búsqueda exacta, debe usar find en ES6

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)
复制代码

Obtener el valor de la propiedad del objeto

const name = obj && obj.name;
复制代码

Puede usar el operador de encadenamiento opcional en ES6:

const name = obj?.name;
复制代码

aplanar matriz

En el desarrollo de un sistema ERP o un sistema de gestión de personal, a menudo se encuentra un escenario de aplicación:

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

const deps = {
'数据部':[1,2,3],
'DT部':[5,8,12],
'行政部':[5,14,79],
'人事部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]
复制代码

En este momento, me parece escuchar que el líder del equipo de front-end comienza a regañar:

¿Todavía necesita atravesar para obtener todos los valores de propiedad del objeto? ¿Es buena la optimización del rendimiento, se olvidó Object.values? ¿Nunca usó ES6 antes? (tortura del alma), así como el aplanamiento de matrices, ¿por qué no utilizar el método plano proporcionado por ES6?

Yo... (sin palabras)

const deps = {
'数据部':[1,2,3],
'DT部':[5,8,12],
'行政部':[5,14,79],
'人事部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
复制代码

Infinity se usa como parámetro plano, por lo que no necesita conocer las dimensiones de la matriz plana.

Agregar valor de propiedad de objeto

Al agregar una propiedad a un objeto, si el nombre de la propiedad cambia dinámicamente, ¿qué debo hacer?

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';
复制代码

¿Por qué crear una variable extra?

(Señalándome) ¿No sabes que los nombres de propiedades de objetos en ES6 pueden usar expresiones?

Después de la mejora:

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
复制代码

Sentencia de que el cuadro de entrada no está vacío

En el desarrollo diario, independientemente de la PC o terminal móvil, cuando se trata de negocios relacionados con el cuadro de entrada, a menudo se juzga que el cuadro de entrada no ingresa un valor:

if(value !== null && value !== undefined && value !== ''){
    //...
}
复制代码

Se puede mejorar a:

if((value??'') !== ''){
  //...
}
复制代码

¿Ahorró mucho código, sorpresa o sorpresa? ! !

Obtener el valor de la propiedad del objeto

Toma una castaña:

const name = obj && obj.name;
复制代码

Después de la mejora:

const name = obj?.name;
复制代码

función asíncrona

Las funciones asincrónicas son muy comunes, vaya directamente a las castañas:

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
};
复制代码

Mirando ese código, me parece ver los ojos desdeñosos del líder del equipo front-end ~

Escrito así, ¿cuál es la diferencia con el infierno de devolución de llamada?

Después de una cuidadosa mejora:

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}
复制代码

El código es mucho más conciso a la vez, y finalmente suspiro de alivio.

Si se trata de una solicitud concurrente, puede usar Promise.all()

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}
复制代码

epílogo

La anterior es la sintaxis es6 más utilizada que resumí, y finalmente cumplí mi promesa.

Recientemente me mudé a una casa nueva y planeo comprar algunas decoraciones para decorar mi habitación. Aunque alquilo una casa, un buen ambiente definitivamente traerá buen humor y tal vez la codificación sea mucho más rápida.

Por supuesto, todavía quiero tener una casa propia, así que cómprela en Maoming, mi ciudad natal.

Mi hermana compró su propia casa y automóvil el año pasado, lo que me inspiró mucho, ¡y la decoración de su hogar es realmente genial!

La foto de arriba es un rincón de la habitación de mi hermana, tengo que decir que la luz es muy buena, llena de felicidad (*^▽^*)

En el próximo número, contaré la historia de mi hermana y mi plan para comprar una casa en [Laolin Stories Collection].

PD: Mi hermana sigue soltera, publicaré una foto mía y de mi hermana en el próximo número.

Espera ヾ(◍°∇°◍)ﾉﾟ