簡單的技巧有助於使程式碼更清晰、更容易-js教程-PHP中文網

Những Tip đơn giản giúp đoạn code trở nên CLEAR và MAIN dễ hơn

以我自己作為前端程式設計師的經驗，我在寫程式碼時經常養成自己的習慣，幫助程式碼變得靈活，提高程式碼的閱讀和維護能力。
這些都是非常簡單但非常有用的技巧，我想分享給你，讓你一眼就能完全理解。

技巧 1：減少 if-else 語句的數量

每次我們編寫使用超過2個if-else的東西時，我們都需要考慮是否有更優化的方式來編寫程式碼。一個簡單的例子如下：

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登入後複製

在這個例子中我正在編寫一個獲取手機品牌價格的函數，如果我想添加oppo手機的價格，我需要添加一個if-else分支，或者我想修改手機。小米手機我將不得不努力找到小米手機在我下巴的位置。
像這樣編寫程式碼可能會使程式碼容易出現錯誤，例如冗長、難以閱讀、難以搜尋和擴展。
但別擔心，我將向您展示如何在不違反 DRY 原則的情況下正確編寫它。我們將使用一個物件來儲存產品價格，而不是使用 if-else-if
鏈。

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登入後複製

在上面的改進範例中，我們可以更清楚地閱讀程式碼，或者當我們想要更改產品的價格時，我們不需要更改 getPrice() 函數的核心邏輯。

技術 2：管線技術減少不必要的循環次數

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

登入後複製

這是傳統的方式，可以使用for迴圈來遍歷陣列中的每個元素，檢查哪個元素滿足條件，然後將其新增至結果陣列。
雖然上面的方法並沒有錯，但是這樣寫程式碼會讓程式碼變得更冗長，難以閱讀。相反，我們可以使用filter和map等常用函數來幫助保持程式碼簡潔並增強語意。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

登入後複製

技巧3：使用find替換重複的循環

繼續上面的電話部分範例。那麼使用find就顯示出明顯的方便

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登入後複製

這種搜尋方法可以讓你快速定位到陣列中第一個滿足給定條件的元素，使得程式碼比使用傳統循環更清晰。

技巧4：使用includes替換冗餘循環

當我們需要檢查陣列是否包含特定值時，使用 include 可以簡化程式碼，而不是循環遍歷數組來檢查元素是否存在。

例如：

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登入後複製

您只需要使用包含：

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

登入後複製

此方法為使用傳統循環的更繁瑣過程提供了一個優雅的解決方案。

在處理您經常需要檢查的陣列時，此功能特別有用。

技術 5：使用傳回唯一結果的變量

據我所知，尤其是在緊湊函數中，我們可以對返回結果使用一致的變數名稱。這澄清了傳回值的來源，並提供了標準的變數命名約定，如果其他人讀取您的程式碼，他們可以輕鬆識別它。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

登入後複製

技術 6：維護物件完整性

在操作從後端傳回的 JSON 資料時，我們經常會在鍵值中單獨處理特定屬性。當我們有時遇到只使用少數屬性的情況時，這一點甚至更加明顯。許多程式設計師傾向於只提取操作所需的屬性，這是人們想到的第一個方法，然而這是一種實用且短暫的做事方式。

當不確定函數稍後是否需要額外的依賴項時，建議保持整個物件的完整性。例如，功能組件可以使用圖示和內容，但稍後可以使用標題或日期。將整個物件傳遞給函數元件而不是單一屬性不僅可以減少 props 清單的長度，還可以增強程式碼的可讀性和靈活性

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登入後複製

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登入後複製