搬砖随笔——JavaScript代码简洁之道

目录

1、通过条件判断给变量赋值布尔值

2、判断数组长度不为零

3、使用 includes 简化条件判断

4、使用 some 判断是否有满足条件的元素

5、使用 forEach 遍历数组，不形成新数组

6、使用 filter 过滤原数组，形成新数组

7、使用 map 对数组中所有元素批量处理，形成新数组

8、解构数组交换变量

9、解构对象

10、字符串拼接使用 ${}

---

1、通过条件判断给变量赋值布尔值

// bad
if (a === 'a') {
    b = true;
} else {
    b = false;
}

// good
b = a === 'a';

2、判断数组长度不为零

// bad
if (arr.length > 0) {
    // ...
}

// good
if (arr.length) {
    // ...
}

// 同理，判断数组长度为0

// bad
if (arr.length === 0) {
    // ...
}

// good
if (!arr.length) {
    // ...
}

3、使用 includes 简化条件判断

// bad
if (a === 1 || a === 2 || a === 3 || a === 4) {
    // ...
}

// good
let arr = [1, 2, 3, 4];
if (arr.includes(a)) {
    // ...
}

4、使用 some 判断是否有满足条件的元素

// bad
let arr = [1, 3, 5, 7];
function isHasNum (num) {
    for (let i = 0; i < arr.length; i ++) {
        if (arr[i] === num) {
            return true;
        }
    }
    return false;
}

// good
let arr = [1, 3, 5, 7];
let isHasNum = num => arr.some(item => item === num);

// best
let arr = [1, 3, 5, 7];
let isHasNum = (num, arr) => arr.some(item => item === num);

5、使用 forEach 遍历数组，不形成新数组

// bad
for (let i = 0; i < arr.length; i ++) {
    // ...
    arr[i].name = 'leo';
}

// good
arr.forEach(item => {
    // ...
    item.name = 'leo';
});

6、使用 filter 过滤原数组，形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = [];
for (let i = 0; i < arr.length; i ++) {
    if (arr[i] > 3) {
        newArr.push(arr[i]);
    }
}

// good
let arr = [1, 3, 5, 7];
let newArr = arr.filter(num => num > 3);   // [5, 7]

7、使用 map 对数组中所有元素批量处理，形成新数组

// bad
let arr = [1, 3, 5, 7],   
    newArr = [];
for (let i = 0; i < arr.length; i ++) {   
    newArr.push(arr[i] * 2);
}

// good
let arr = [1, 3, 5, 7];
let newArr = arr.map(num => num * 2);   // [2, 6, 10, 14]

8、解构数组交换变量

// bad
let a = 1,  
    b = 2;
let temp = a;
a = b;
b = temp;

// good
let a = 1,
    b = 2;
[b, a] = [a, b];

9、解构对象

// bad
setMsg (person) {  
    this.name = person.name; 
    this.age = person.age;
}

// good
setMsg ({name, age}) {  
    this.name = name;
    this.age = age;
}

// 支持解构时重命名
setMsg ({name: newName, age: newAge}) {  
    this.name = newName;
    this.age = newAge;
}

// 支持解构时设置默认值
setMsg ({name, age = 16}) {  
    this.name = name;
    this.age = age;
}

10、字符串拼接使用 ${}

let person = {  
    name: 'leo',
    age: 18
}

// bad
function sayHi (obj) {  
    console.log('大家好，我叫' + obj.name + '，我今年' + obj.age);
}

// good
function sayHi (obj) {  
    console.log(`大家好，我叫${obj.name}，我今年${obj.age}`);
}

// best
function sayHi ({name, age}) {   
    console.log(`大家好，我叫${name}，我今年${age}`);
}