什么是整潔的代碼呢？答案可能因人而異，個(gè)人提倡以函數(shù)式風(fēng)格編寫(xiě)代碼，如果做得正確的話(huà)，代碼將更容易閱讀、分解和測(cè)試。在開(kāi)始函數(shù)式編程之前，學(xué)習(xí)一些小的技巧有助于編寫(xiě)整潔的代碼。最好的方式是閱讀開(kāi)源項(xiàng)目，學(xué)習(xí)別人的方式。對(duì)于JavaScript，ES6 引入了許多新的特性，也使得寫(xiě)代碼多一種更加優(yōu)雅的方式。

1. 數(shù)組合并

// 常規(guī)邏輯
const apples = ["??", "??"];
const fruits = ["??", "??", "??"].concat(apples);

console.log(fruits); // ["??", "??", "??", "??", "??"];

// 優(yōu)雅寫(xiě)法 1
const apples = ["??", "??"];
const fruits = ["??", "??", "??", ...apples];

console.log(fruits); //  ["??", "??", "??", "??", "??"];

// 優(yōu)雅寫(xiě)法 2
const apples = ["??", "??"];
const fruits = [...apples, "??", "??", "??"];
console.log(fruits); // ["??", "??", "??", "??", "??"];

// 優(yōu)雅去重
const apples = ["??", "??", "??"];
const fruits = [...new Set(["??", "??", "??", "??", ...apples])];
console.log(fruits); // [ '??', '??', '??', '??', '??' ]

2. 數(shù)組中取值

// 常規(guī)邏輯
const apples = ["??", "??"];
const redApple = apples[0];
const greenApple = apples[1];

console.log(redApple); // ??
console.log(greenApple); // ??;

// 優(yōu)雅寫(xiě)法
const apples = ["??", "??"];
const [redApple, greenApple] = apples; // 使用解構(gòu)賦值

console.log(redApple); // ??
console.log(greenApple); // ??;

3. 對(duì)象取值

// 常規(guī)邏輯
const user = {
    name: "DevPoint",
    age: 30,
};

const name = user.name; // DevPoint
const age = user.age; // 30
console.log(name);
console.log(age);

// 優(yōu)雅寫(xiě)法
const user = {
    name: "DevPoint",
    age: 30,
};

const { name, age } = user;

console.log(name); // DevPoint
console.log(age); // 30

4. 數(shù)組循環(huán)

// 常規(guī)邏輯
const fruits = ["??", "??", "??", "??"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// 優(yōu)雅寫(xiě)法
const fruits = ["??", "??", "??", "??"];

for (fruit of fruits) {
    console.log(fruit);
}

5. 箭頭函數(shù)作為回調(diào)

// 常規(guī)邏輯
const fruits = ["??", "??", "??", "??"];

fruits.forEach(function (fruit) {
    console.log(fruit);
});

// 優(yōu)雅寫(xiě)法
const fruits = ["??", "??", "??", "??"];
fruits.forEach((fruit) => console.log(fruit));

6. 數(shù)組搜索

假設(shè)需要通過(guò)一個(gè)對(duì)象的屬性從一個(gè)對(duì)象數(shù)組中查找一個(gè)對(duì)象，通常使用 for 循環(huán)：

// 常規(guī)邏輯
const inventory = [
    { name: "Bananas", quantity: 5 },
    { name: "Apples", quantity: 10 },
    { name: "Grapes", quantity: 2 },
];

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
    for (let index = 0; index < arr.length; index++) {
        if (arr[index].name === "Apples") {
            return arr[index];
        }
    }
}

const result = getApples(inventory);
console.log(result); // { name: 'Apples', quantity: 10 }

// 優(yōu)雅寫(xiě)法
const inventory = [
    { name: "Bananas", quantity: 5 },
    { name: "Apples", quantity: 10 },
    { name: "Grapes", quantity: 2 },
];

function getApples(arr, value) {
    return arr.find((obj) => obj.name === "Apples");
}

const result = getApples(inventory);
console.log(result);

7.字符串轉(zhuǎn)換為數(shù)字

// 常規(guī)邏輯
const num = parseInt("10");

console.log(num); // 10
console.log(typeof num); // "number";

// 優(yōu)雅寫(xiě)法
const num = +"10";
console.log(num); //=> 10
console.log(typeof num); // "number"
console.log(+"10" === 10); // true;

同樣的方法可以用于判斷是否為整數(shù)：

const isInteger = (val) => Number.isInteger(+val);
console.log(isInteger("DevPoint")); // false
console.log(isInteger("30")); // true
console.log(isInteger(30)); // true

8. null 值初始化

// 常規(guī)邏輯
function getUserRole(role) {
    let userRole;
    if (role) {
        userRole = role;
    } else {
        userRole = "USER";
    }
    return userRole;
}

console.log(getUserRole()); // "USER"
console.log(getUserRole("ADMIN")); // "ADMIN";

// 優(yōu)雅寫(xiě)法
function getUserRole(role) {
    return role || "USER"; // 默認(rèn)值定義的常見(jiàn)方法
}

console.log(getUserRole()); // "USER"
console.log(getUserRole("ADMIN")); // "ADMIN";

9. 字符串拼接

過(guò)去無(wú)盡的 + 號(hào)，再加上一些排版就更痛苦。

// 常規(guī)邏輯
const name = "DevPoint";
const message = "Hi " + name + "!";
console.log(message); // Hi DevPoint!
// 優(yōu)雅寫(xiě)法
const name = "DevPoint";
const message = `Hi ${name}!`;
console.log(message); // Hi DevPoint!

10 對(duì)象合并

// 常規(guī)邏輯
const employee = { name: "DevPoint", age: 30 };
const salary = { grade: "A" };
const summary = salary;
for (const key in employee) {
    summary[key] = employee[key];
}
console.log(summary); // { grade: 'A', name: 'DevPoint', age: 30 }
// 優(yōu)雅寫(xiě)法
const employee = { name: "DevPoint", age: 30 };
const salary = { grade: "A" };
const summary = { ...employee, ...salary };
console.log(summary); // { name: 'DevPoint', age: 30, grade: 'A' }