适合初学者的10个 JavaScript 代码整洁技巧

1. 数组合并

// 常规逻辑
const apples = ["🍎", "🍏"];
const fruits = ["🍉", "🍊", "🍇"].concat(apples);

console.log(fruits); // ["🍉", "🍊", "🍇", "🍎", "🍏"];

// 优雅写法 1
const apples = ["🍎", "🍏"];
const fruits = ["🍉", "🍊", "🍇", ...apples];

console.log(fruits); //  ["🍉", "🍊", "🍇", "🍎", "🍏"];

// 优雅写法 2
const apples = ["🍎", "🍏"];
const fruits = [...apples, "🥭", "🍌", "🍒"];
console.log(fruits); // ["🍎", "🍏", "🥭", "🍌", "🍒"];

// 优雅去重
const apples = ["🍎", "🍏", "🍏"];
const fruits = [...new Set(["🍉", "🍊", "🍇", "🍇", ...apples])];
console.log(fruits); // [ '🍉', '🍊', '🍇', '🍎', '🍏' ]

2. 数组中取值

// 常规逻辑
const apples = ["🍎", "🍏"];
const redApple = apples[0];
const greenApple = apples[1];

console.log(redApple); // 🍎
console.log(greenApple); // 🍏;

// 优雅写法
const apples = ["🍎", "🍏"];
const [redApple, greenApple] = apples; // 使用解构赋值

console.log(redApple); // 🍎
console.log(greenApple); // 🍏;

3. 对象取值

// 常规逻辑
const user = {
    name: "DevPoint",
    age: 30,
};

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

// 优雅写法
const user = {
    name: "DevPoint",
    age: 30,
};

const { name, age } = user;

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

4. 数组循环

数组循环的方法有 .forEach() 与 for...of，在使用上各有特色，但在效率上，for...of 比 .forEach() 快。因此推荐使用 for...of。

// 常规逻辑
const fruits = ["🍉", "🍊", "🍇", "🍎"];

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

// 优雅写法
const fruits = ["🍉", "🍊", "🍇", "🍎"];

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

5. 箭头函数作为回调

箭头函数是 ES6 中引入新的语法，除了让代码变得优雅的同时，可以避免 this 带来的问题。

// 常规逻辑
const fruits = ["🍉", "🍊", "🍇", "🍎"];

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

// 优雅写法
const fruits = ["🍉", "🍊", "🍇", "🍎"];
fruits.forEach((fruit) => console.log(fruit));

6. 数组搜索

数组操作，在前端开发中是比较常见的功能，为了提高开发效率降低重复代码，可以考虑写一个通用的数组操作的脚本库。

假设需要通过一个对象的属性从一个对象数组中查找一个对象，通常使用 for 循环：

// 常规逻辑
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 }

// 优雅写法
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.字符串转换为数字

// 常规逻辑
const num = parseInt("10");

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

// 优雅写法
const num = +"10";
console.log(num); //=> 10
console.log(typeof num); // "number"
console.log(+"10" === 10); // true;

同样的方法可以用于判断是否为整数：

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

8. null 值初始化

// 常规逻辑
function getUserRole(role) {
    let userRole;
    if (role) {
        userRole = role;
    } else {
        userRole = "USER";
    }
    return userRole;
}

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

// 优雅写法
function getUserRole(role) {
    return role || "USER"; // 默认值定义的常见方法
}

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

9. 字符串拼接

过去无尽的 + 号，再加上一些排版就更痛苦。

// 常规逻辑
const name = "DevPoint";
const message = "Hi " + name + "!";
console.log(message); // Hi DevPoint!
// 优雅写法
const name = "DevPoint";
const message = `Hi ${name}!`;
console.log(message); // Hi DevPoint!

10 对象合并

对象的合并，在ES6中，可以学习一些扩展运算符和解构赋值，这样有利于写出更加简洁的代码。

// 常规逻辑
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 }
// 优雅写法
const employee = { name: "DevPoint", age: 30 };
const salary = { grade: "A" };
const summary = { ...employee, ...salary };
console.log(summary); // { name: 'DevPoint', age: 30, grade: 'A' }