在代碼Review過程中，享受讓代碼變得優雅是一件很有成就感的事情，本文總結了項目開發中常見的3個代碼優化的技巧，這些技巧在VUE項目中有比較多的使用場景，不妨嘗試去編寫出高質量的代碼。

神奇的擴展運算符

擴展運算符…是我比較喜歡的JavaScript操作符，常用于數組、對象的操作。常用的場景有以下四個：

需要注意的點：擴展運算符…的拷貝屬于一層拷貝。

1.復制數組

const weeks = ["Monday", "Tuesday"];
const newWeeks = [...weeks];
console.log(newWeeks);  // [ 'Monday', 'Tuesday' ]

2.擴展數組

const weeks = ["Tuesday", "Wednesday"];
const newWeeks = ["Monday", ...weeks, "Thursday", "Friday"];
console.log(newWeeks);  // [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]

3.擴展對象

const myinfo = {
    name: "DevPoint",
    city: "Shenzhen",
};
const myDetail = {
    ...myinfo,
    province: "Guangdong",
};
console.log(myDetail); // { name: 'DevPoint', city: 'Shenzhen', province: 'Guangdong' }

4. 數組/對象合并

const weeks1 = ["Monday", "Thursday", "Friday"];
const weeks2 = ["Tuesday", "Wednesday"];
const newWeeks = [...weeks1, ...weeks2];
console.log(newWeeks); // [ 'Monday', 'Thursday', 'Friday', 'Tuesday', 'Wednesday' ]

const myinfo = {
    name: "DevPoint",
};
const address = {
    province: "Guangdong",
    city: "Shenzhen",
};
const myDetail = {
    ...myinfo,
    ...address,
};
console.log(myDetail); // { name: 'DevPoint', province: 'Guangdong', city: 'Shenzhen' }

null 檢查的最佳方法

null 值檢查是前端項目中比較常見的操作，在過去的語法中我們是這樣進行檢查：

if (tmp !== null && tmp !== undefined && tmp !=="") {
    //
}

現在一個簡單的if就可以實現：

if (tmp) {
    //
}

如果tmp為空值則條件為false，if的條件為true的情況包括：null、undefined、NaN、空字符串、0或false。

之前在《24個Javascript代碼優化技巧》介紹過空值的檢查方法，最新 Javascript 語法新增了空值合并運算符??確實有一個很好的快捷方式來實現這個功能。在 《Javascript代碼優化的15個小知識》文中也介紹了：如何在JavaScript中檢查空字符串/undefined/null。

使用 .map()、.reduce()、.filter()

是的，我們經常討論函數式和響應式編程的強大技術！幾年前第一次接觸函數式編程的時候，為我打開了一扇全新的門。現在，每當看到這些簡單的說明，會被它優雅的代碼風格所震撼。《javascript數組之includes、reduce》介紹了reduce的詳細用法。

函數式編程的基本原理之一是使用列表和操作，本文將用三個最著名的操作：map、reduce和filter來重構代碼的例子。

在Covid-19之前，一個日本家庭來巴黎度假。他們在超市買了些食物和日用品。但是所有的物品都是歐元標價，他們想知道每一件物品的價格以及換算成日元的價格。

以匯率 1歐元等于126日元來計算。

所以，按照傳統的方式，將用一個經典的循環來做：

const RATE = 126;
const items = [
    { name: "pineapple", price: 2, type: "food" },
    { name: "beef", price: 20, type: "food" },
    { name: "advocate", price: 1, type: "food" },
    { name: "shampoo", price: 5, type: "other" },
];

let sum = 0;
const itemsInYen = [];
const length = items.length;
for (let i = 0; i < length; i++) {
    const item = items[i];
    item.price *= RATE;
    itemsInYen.push(item);
    if (item.type === "food") {
        sum += item.price;
    }
}
console.log(itemsInYen);
console.log(sum); // 2898

輸出的結果如下：

[
  { name: 'pineapple', price: 252, type: 'food' },
  { name: 'beef', price: 2520, type: 'food' },
  { name: 'advocate', price: 126, type: 'food' },
  { name: 'shampoo', price: 630, type: 'other' }
]
2898

現在我們利用.map()、.reduce()、.filter()對上述代碼進行重構：

const RATE = 126;
const items = [
    { name: "pineapple", price: 2, type: "food" },
    { name: "beef", price: 20, type: "food" },
    { name: "advocate", price: 1, type: "food" },
    { name: "shampoo", price: 5, type: "other" },
];
const itemsInYen = items.map((item) => {
    const itemsInYen = { ...item };
    itemsInYen.price *= RATE;
    return itemsInYen;
});
console.log(itemsInYen);

const sum = itemsInYen
    .filter((item) => item.type === "food")
    .reduce((total, item) => (total += item.price), 0);
console.log(sum);

上述輸出結果一致。map 將所有價格從歐元轉換為日元，filter 過濾非食品的消費項，reduce 將每個食品項目的價格添加到總金額中!