Várias dicas práticas de otimização de JavaScript que vale a pena conhecer

Como começar rapidamente com o VUE3.0: Entre no aprendizado

"Dificuldade:?" " Tempo de leitura recomendado: 5 min "

O vídeo principal

• quando escrevemos mais de duas funções if...else

.

• , devemos pensar se existe um método de otimização melhor.
• Por exemplo, agora precisamos calcular o preço da comida em Mai Lao com base no nome, você pode fazer isso.

• Esta forma de escrever fará com que o corpo da função tenha muitas declarações de julgamento condicional. Quando quisermos adicionar um produto na próxima vez, precisaremos modificar a lógica da função e adicionar uma instrução if...else . abrindo e fechando até certo ponto. O princípio é que quando precisarmos adicionar uma lógica, devemos tentar resolver a mudança nos requisitos estendendo a entidade de software em vez de modificar o código existente para completar a mudança.
• Este é um método de otimização muito clássico. Podemos usar uma estrutura de dados semelhante a Map para salvar todos os produtos.

• Dessa forma, não precisamos alterar a lógica do getPrice quando precisarmos adicionar outro produto na próxima vez. É claro que mais pessoas aqui gostam de usar foodMap diretamente onde ele é usado. essa ideia.
• Então alguns alunos perguntarão neste momento: e se eu não quiser usar apenas strings para key , então você pode usar new Map . A ideia é semelhante e uma entidade adicional é estendida para armazenar alterações.

As operações de pipeline substituem loops redundantes.

• Existe uma lista de alimentos de Mai Moulao.

• Se você quiser encontrar o alimento que pertence ao Conjunto 1, como você o encontrará?
• O método acima é um método que usamos com frequência antes. Obviamente, nossa substituição por filter e map em vez for loop for pode não apenas tornar o código mais simplificado, mas também tornar a semântica mais clara. array é过滤primeiro e depois重组.

Find substitui o loop redundante

• ou o exemplo acima. Se quisermos encontrar um alimento específico de acordo com o valor do atributo nesta matriz de objetos de alimentos, surge o uso de find .

inclui substitui loops redundantes

• . Semelhante aos dois detalhes acima, todas essas são funções existentes, ou seja, funções integradas que não precisam ser reescritas por nós. Usá-las com habilidade economizará muito tempo.
• Como todos sabemos, uma tigela de macarrão de carne em conserva Kang Fu Lao Tan consiste em chucrute , macarrão , cubos de carne , pontas de cigarro e pele de pé . Portanto, queremos usar uma função para verificar se há pele de pé neste macarrão. escrevemos de forma mais concisa?

• Da mesma forma, não apenas o chucrute e o macarrão de carne de Kang Fu podem ser reproduzidos dessa forma, mas todas as operações semelhantes de localização de elementos específicos em uma matriz podem ser chamadas usando a função includes .

valor de retorno do resultado

• Quando escrevemos algumas funções com valores de retorno, muitas vezes temos dificuldade em nomear a variável do valor de retorno. Mesmo para algumas funções longas, não usamos variáveis, mas return diretamente. novamente quando nos referirmos a este código na próxima vez.
• Normalmente, em uma função pequena, podemos usar result como valor de retorno.

Retorno antecipado

• No entanto, usar result como o valor de retorno acima não se aplica a todas as situações. Às vezes, precisamos encerrar o corpo da função antecipadamente para evitar que colegas subsequentes leiam programas redundantes.

• No exemplo a seguir, quando nosso selectedKey não existe, devemos return imediatamente, para que não precisemos continuar lendo o código a seguir, caso contrário aumentará muito os custos de leitura ao nos depararmos com funções mais complexas.

Para manter o objeto intacto

• , muitas vezes quando obtemos os dados retornados pelo backend por meio de uma solicitação, eles serão processados ​​de acordo com alguns dos atributos. Se houver poucos atributos que precisam ser processados, muitos alunos estarão acostumados a usar o. primeiro método.
• Mas, na verdade, esse hábito é ruim, porque quando você não tem certeza se esta função precisa adicionar atributos de dependência no futuro, você deve manter a integridade do objeto. Como mencionei no meu último artigo, aprenda a abraçar as mudanças . getDocDetail não está limitado a Para usar icon e content , pode haver atributos como title e date no futuro, então podemos também passar o objeto completo diretamente, o que não apenas encurtará a lista de parâmetros, mas também tornará o código mais legível.

Uso inteligente de operadores

• Quando precisamos criar uma nova variável, e às vezes precisamos verificar se a variável referenciada por seu valor é null ou indefinida, podemos usar a escrita simples.

Ao final da redação

• , em primeiro lugar, gostaria de agradecer a todos por lerem isso. Compartilharei este artigo aqui e resumirei alguns métodos de otimização muito básicos, espero que possa ajudar a todos.

[Tutoriais em vídeo relacionados recomendados: front-end da web]

Acima estão os detalhes de várias dicas práticas de otimização de JavaScript que vale a pena conhecer. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!