JavaScript那些让代码变得简洁的小技巧

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

大家好，我是小麦。今天聊聊在开发过程中，那些我们可能没有注意的一些让代码更简洁的小技巧。

多重判断

我在实习工作的时候，经常会写出这样的代码，一年后看回自己的代码，也忍不住给这段代码一个评价“很水”，建议这种多重判断的逻辑还是使用switch更美观以及更容易阅读。

if (a === 0) {
    name = "Lin"
} else if (a === 1) {
    name = "Mai"
} else if (a === 2) {
    name = "Zhang"
} else {
    name = "Yao"
}

// 更好的做法
switch (a) {
    case 0:
        name = "Lin"
        break;
    case 1:
        name = "Mai"
        break;
    case 2:
        name = "Zhang"
        break;
    default:
        name = "Yao"
}

多个或（||）的条件判断

我们在处理某些逻辑的时候，会经常写出下面的代码，例如：我们在处理接口状态码的时候，可能后端返回"10001","10002","10003"等状态码都表示的是系统繁忙，我们就会使用到以下技巧。

if (a === 0 || a === 1 || a === 2) {
    // xxx
}

// 更好的做法
let arr = [0, 1, 2];
if (arr.include(a)) {
    // xxx
}

多个与（&&）的条件判断

当我们在做某些需要多个条件同时成立的判断的时候，会用到以下技巧。

if (a === 0 && a === 1 && a === 2) {
    // xxx
}

// 更好的做法
const isTrue = a === 0 && a === 1 && a === 2;
if (isTrue) {
    // xxx
}

简单的if判断,使用三元表达式

某些判断比较简单的，我们可以使用三元表达式去代替，简洁成了一行代码。

if (a === 1) {
    name = "Mai";
} else {
    name = "Lin";
}

// 更好的做法
a === 1 ? name = "Mai" : name = "Lin";

巧用forEach遍历不返回新数组

forEach方法用于调用数组的每个元素，并将元素传递给回调函数，对于空数组不会执行回调函数。

// for循环
for (let i = 0; i < arr.length; i ++) {
    arr[i].name = "Mai";
}

// 更好的做法
arr.forEach(item => {
    item.name = "Mai";
})

巧用map遍历返回新数组

遍历数组，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，元素顺序与原数组一样。

// for循环
let arr1 = [1, 2, 3, 4, 5],
arr2 = [];

for (let i = 0, i < arr1.length; i ++ ) {
    arr2.push(arr1[i] + 1);
}

// 更好的做法
let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.map(item => item + 1);

巧用filter方法，获取符合条件的元素

filter方法过滤原数组，返回新数组。

// for循环
let arr1 = [1, 2, 3, 4, 5],
arr2 = [];

for (let i = 0, i < arr1.length; i ++ ) {
    if (arr1[i] > 2) {
        arr2.push(arr1[i]);
    }
}

// 更好的做法
let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.filter(item => item > 2);

巧用some方法，判断是否有符合条件的元素

// for循环
let arr = [1, 2, 3, 4];
const isTrue (x) => {
    for (let i = 0; i < arr.length; i ++) {
        if (arr[i] === x) {
            return true;
        }
    }
    return false;
}

// 更好的做法
let arr = [1, 2, 3, 4, 5];
let isTrue = (x, arr) => arr.some(item => item === x); // 返回true || false