Você disse que pode usar o ES6 e usá-lo rapidamente!

Como começar rapidamente com VUE3.0: Comece aprendendo

"Se você sabe como usar ES6, então use-o!": Este é o "rugido" que um líder fez aos membros da equipe durante uma revisão de código porque descobriu muitos lugares durante a revisão do código. É melhor usar o método de escrita ES5. Isso não significa que escrever em ES5 não funcionará e haverá bugs.

Acontece que esse líder tinha um fetiche por código. Ele estava extremamente insatisfeito com os membros que tinham de 3 a 5 anos de experiência escrevendo código nesse nível e continuava reclamando do código. No entanto, sinto que ainda ganhei muito com as reclamações dele, então registrei as reclamações do líder e as compartilhei com outros escavadores. Se você achar que são úteis, dê um joinha. Se houver erros ou maneiras melhores de escrever. você é muito bem-vindo para comentar.

ps: A sintaxe JS após ES5 é chamada coletivamente de ES6! ! !

1. Tucao sobre coleta de valores

O valor é muito comum em programas, como a obtenção de valor do objeto obj .

const obj={
    um:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

Tucao :

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

ou

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

Tucao: "Você não pode usar a atribuição de desestruturação do ES6 para obter o valor? Não é legal usar 5 linhas de código em 1 linha de código? Basta usar o nome do objeto mais

curto

, mas se for muito longo, o nome do objeto estará em todo o código

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

O contra-argumento

não é que eu não use a atribuição de desestruturação do ES6, mas que os nomes dos atributos no objeto de dados retornados pelo servidor não são o que eu quero. recriar uma atribuição de passagem.

Parece

que sua compreensão da desestruturação e atribuição do ES6 não é suficientemente completa. Se o nome da variável que você deseja criar for inconsistente com o nome da propriedade do objeto, você pode escrever:

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

suplementar

é fácil de usar. Mas observe que o objeto desestruturado não pode ser undefined ou null . Caso contrário, um erro será relatado, portanto o objeto desestruturado deverá receber um valor padrão.

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

2. Reclamações sobre mesclagem de dados

, como mesclar duas matrizes e mesclar dois objetos.

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

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

reclamou

se o operador de extensão do ES6 foi esquecido e a fusão de arrays não considerou a desduplicação?

Const a = [1,2,3]

melhorado

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

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

3. Tucao sobre emenda de strings

const name = 'Xiao Ming';
pontuação constante = 59;
deixe resultado = '';
if(pontuação > 60){
  resultado = `a nota do exame de ${name} está passando`; 
}outro{
  resultado = `${name} foi reprovado no exame`; 
}

Reclamando sobre

o uso de templates de string ES6 como você faz, é melhor não usá-los. Você não tem ideia de quais operações podem ser feitas em ${} . Em ${} você pode colocar qualquer expressão JavaScript, realizar operações e referenciar propriedades de objetos.

aprimorado

= 'Xiao Ming';
pontuação constante = 59;
const result = `${name}${score > 60?''s test score failed':''s test score failed'}`

4. Comentários sobre as condições de julgamento em if

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

Reclamando

se o método de instância de array includes será usado no ES6?

melhorada

= [1,2,3,4];

if(condição.includes(tipo)){
   //...
}

5. Reclamações sobre pesquisa de lista

No projeto, a função de pesquisa de algumas listas não paginadas é implementada pelo front end. A pesquisa é geralmente dividida em pesquisa precisa e pesquisa difusa. A pesquisa também é chamada de filtragem e geralmente é implementada por meio de filter .

const a = [1,2,3,4,5];
resultado const = a.filter( 
  elemento =>{
    item de retorno === 3
  }
)

reclamar

da busca exata, não usará find no ES6? Você entende a otimização de desempenho? Se um item que atenda às condições for encontrado no método find , ele não continuará a percorrer a matriz.

Const a = [1,2,3,4,5]

melhorado

resultado const = a.find( 
  elemento =>{
    item de retorno === 3
  }
)

6. Reclamações sobre arrays nivelados

Nos dados JSON de um departamento, o nome do atributo é o ID do departamento e o valor do atributo é uma coleção de array de IDs de membros do departamento. Agora precisamos extrair todos os IDs de membros do departamento em uma coleção de array.

const dependências = {
'Departamento de Compras':[1,2,3],
'Departamento de Pessoal':[5,8,12],
'Departamento Administrativo':[5,14,79],
'Ministério dos Transportes':[3,64,105],
}
deixe membro = [];
for (deixe o item em dependências){
    valor const = deps[item];
    if(Array.isArray(valor)){
        membro = [...membro,...valor]
    }
}
member = [...new Set(member)]

É necessário percorrer para obter todos os valores de atributos de um objeto

?

Object.values esquecidos? Há também o processo de nivelamento envolvendo arrays. Por que não usar o método flat fornecido pelo ES6, felizmente, a profundidade do array desta vez é de apenas 2 dimensões. Se você encontrar arrays com profundidades de 4 ou 5 dimensões, é necessário? Loop loop aninhado para achatar?

Melhorar

dependências const = {
    'Departamento de Compras':[1,2,3],
    'Departamento de Pessoal':[5,8,12],
    'Departamento Administrativo':[5,14,79],
    'Ministério dos Transportes':[3,64,105],
}
let member = Object.values(deps).flat(Infinity Infinity);

Infinity usado como parâmetro de flat , para que não haja necessidade de conhecer as dimensões do array achatado.

Complementado que

o método flat não oferece suporte ao navegador IE.

7. Tucao sobre como obter o valor do atributo do objeto

const

name = obj && obj.name;

O operador de cadeia opcional no ES6 será usado?

Const name = obj?.name

melhorado

8. Comentários sobre adição de atributos de objeto

Ao adicionar atributos a um objeto, o que deve ser feito se o nome do atributo mudar dinamicamente.

deixe obj = {};
deixe índice = 1;
deixe chave = `topic${index}`;
obj[key] = 'topic content';

Tucao

porque precisamos criar uma variável adicional. Gostaria de saber se expressões podem ser usadas para nomes de propriedades de objetos no ES6?

Melhore

let obj = {};
deixe índice = 1;
obj[`topic${index}`] = 'conteúdo do tópico';

9. Julgamento sobre se a caixa de entrada não está vazia

Ao processar negócios relacionados à caixa de entrada, muitas vezes considera-se que a caixa de entrada não tem valor de entrada.

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

Você já ouviu falar sobre o novo operador de mesclagem de valor nulo no ES6? Você precisa escrever tantas condições

?

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

10. Reclamações sobre funções assíncronas

Funções assíncronas são muito comuns e geralmente são implementadas usando o Promise.

const fn1 = () =>{
  retornar nova Promessa((resolver, rejeitar) => {
    setTimeout(() => {
      resolver(1);
    }, 300);
  });
}
const fn2 = () =>{
  retornar nova Promessa((resolver, rejeitar) => {
    setTimeout(() => {
      resolver(2);
    }, 600);
  });
}
constfn = () =>{
   fn1().then(res1 =>{
      console.log(res1); //1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

você chamar

uma função assíncrona como essa, não terá medo de um retorno de chamada infernal!

Melhorar

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

Suplemento

: Ao fazer solicitações simultâneas, você ainda precisa usar Promise.all() .

const fn = () =>{
   Promessa.all([fn1(),fn2()]).then(res =>{
       console.log(res);//[1,2]
   }) 
}

Se houver solicitações simultâneas, desde que uma das funções assíncronas seja concluída, o resultado será retornado e Promise.race() deverá ser usado.

11.

Você está convidado a refutar os dez pontos das reclamações do líder acima. Se sua refutação for razoável, eu a refutarei para você na próxima reunião de revisão do código.

Além disso, se houver algum erro no conteúdo organizado acima, sinta-se à vontade para corrigi-lo nos comentários.

Este artigo foi reproduzido de: https://juejin.cn/post/7016520448204603423

Autor: Hongchen Lianxin

[Recomendação de tutorial em vídeo relacionado: web front-end]

O texto acima é o que você disse que pode usar ES6 e usá-lo rapidamente! Para mais detalhes, preste atenção a outros artigos relacionados no site php chinês!