o 改進 JavaScript 程式碼的實踐

如果您已經開始了 JavaScript 之旅，您就會知道掌握語言只是第一步。您編寫的程式碼品質可以發揮重要作用，既可以促進維護，也可以避免長期出現問題。遵循最佳實踐不僅可以提高程式碼可讀性，還有助於與其他開發人員協作並降低錯誤風險

在本文中，我將分享每個開發人員在編寫 JavaScript 時都應採用的5 個基本最佳實踐。這些技巧涵蓋正確使用變數到程式碼模組化，以確保您的程式碼更高效、組織和易於理解。我們走吧？

1.使用 const 和 let 來取代 var:

您可能已經聽過無數次了，但是相信我，這是您日常生活中採用的重要提示。

將 var 視為不尊重限制的人，他被允許在整個程式碼中循環，忽略障礙，就好像它們不存在一樣（在本例中為區塊作用域）。想像一下，在循環內聲明一個變量，然後它突然出現在循環外，就好像什麼都沒發生一樣 — 完全混亂.

現在，使用 const 和 let，您可以設定這些障礙。 Let 表現得像那個懂得尊重極限的同事，而 const 則是那個固執的朋友，從不改變自己的觀點。這意味著，除了改進程式碼的組織之外，您還可以避免由於 var 的這種「自由」而發生的難以追蹤的錯誤。

所以，在現代瀏覽器中使用 var 基本上就是要求創建 bug！

// Com var (confusão garantida)
for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // 3 (Você esperava que o i ficasse apenas dentro do loop? Pois é... surpresa!)


// Com let (tudo nos seus devidos lugares)
for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // Erro: i is not defined (como deveria ser!)

提示：對於不會改變值的變數使用const，對於可以重新賦值的變數使用let。

範例：

// Usando const (valor constante)
const pi = 3.14159;
console.log(pi); // 3.14159

// Tentar reatribuir um valor a pi causará erro
// pi = 3.14; // Erro: Assignment to constant variable.

// Usando let para valores que mudam
let totalPedidos = 0;
totalPedidos += 1; // Novo pedido chegou
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 1

// Um novo pedido chegou, então podemos atualizar a variável
totalPedidos += 1;
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 2

---

2.解構物件與陣列

解構物件和陣列就像打開一份禮物並直接找到您感興趣的內容，而無需搜尋所有內容。透過解構，您無需單獨存取每個屬性或項目，而是以快速和優雅方式準確獲得所需內容。 — 更實用，對吧？

// Sem destruturação (muito trabalho)
const pessoa = { nome: 'João', idade: 30, profissão: 'Engenheiro' };
const nome = pessoa.nome;
const idade = pessoa.idade;
console.log(nome, idade); // João 30

// Com destruturação (muito mais simples)
const { nome, idade } = pessoa;
console.log(nome, idade); // João 30

同樣的魔法也發生在陣列上。假設您有一個值列表，並且您只需要前幾個元素。您無需繼續一件一件地挑選。透過解構，你可以直接拿取任何你想要的東西。

// Sem destruturação
const numeros = [10, 20, 30, 40];
const primeiro = numeros[0];
const segundo = numeros[1];
console.log(primeiro, segundo); // 10 20

// Com destruturação
const [primeiro, segundo] = numeros;
console.log(primeiro, segundo); // 10 20

提示：

每當需要存取物件或陣列中的多個值時，請使用解構。這使得程式碼更乾淨並且可讀。

---

3.避免過度使用匿名函數

使用匿名函數可能看起來很方便，但這就像給出指令而不說明誰負責。當一切正常時，那就太好了。但當出現問題時，你該怪誰呢？很難找到問題所在。為函數命名可以使程式碼清晰並使調試更容易。

為您的函數命名並完全控制每個函數的功能。

// Função anônima (sem nome, sem controle)
setTimeout(function() {
    console.log('Função anônima em ação');
}, 1000);

// Função nomeada (muito mais organizado)
function exibeMensagem() {
    console.log('Função com nome');
}
setTimeout(exibeMensagem, 1000);

提示：
只要有可能，請清楚地並描述性地命名你的函數。更具可讀性的程式碼更容易維護。

---

4. 喜歡 === 而不是 ==

你知道這句話「不是所有閃閃發光的都是黃金」？ 這正是 == 所發生的情況。它確實隱式轉換，但最終帶來意外結果。

=== 沒有關於「讓我們弄清楚」的內容。它進行嚴格比較，確保值和類型完全相同。

如果==是偵探，他會接受任何線索，即使它不可靠。 === 只有在有確鑿證據的情況下才有效。他保證路上不會出現混亂。

// Comparação com == (pode ser traiçoeiro)
console.log(1 == '1'); // true (conversão implícita de tipo)

// Comparação com === (comparação estrita)
console.log(1 === '1'); // false (os tipos são diferentes e não são convertidos)

提示：
始終使用 === 確保正確比較值和類型。避免“意外”並有助於防止錯誤。

---

5. Modularize seu código

Modularizar seu código é como organizar suas ferramentas em caixas separadas. Em vez de ter tudo jogado em um só lugar, você separa cada parte em "caixas" (ou módulos), e só pega o que vai utilizar. Isso deixa seu projeto mais organizado, fácil de manter e até mais rápido de entender.

Em vez de ter um arquivo gigantesco com funções e variáveis espalhadas, você pode dividir tudo em módulos reutilizáveis. É como ter uma oficina bem organizada, onde cada ferramenta tem seu devido lugar.

// Criando um módulo (operacoes.js)
export function soma(a, b) {
    return a + b;
}

export function subtracao(a, b) {
    return a - b;
}

// Usando o módulo em outro arquivo (app.js)
import { soma, subtracao } from './operacoes.js';
console.log(soma(5, 3)); // 8
console.log(subtracao(5, 3)); // 2

Dica:
Mantenha seu código organizado separando funcionalidades em módulos. Isso facilita a manutenção, o reuso e a colaboração em projetos maiores, onde várias partes do código precisam se comunicar de forma clara.

Boas práticas em JavaScript não só melhoram a organização e clareza do código, como também facilitam a manutenção. Aplicar essas cinco dicas pode fazer uma grande diferença positiva no seu código.

以上是o 改進 JavaScript 程式碼的實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！