JS开发优雅小技巧

判断变量是否符合条件

// 判断变量是否符合条件
// bad
if(value === '1' || value === '2' || value === '3') {
  // ...
}
// good
const options = ['1', '2', '3']
if(options.includes(value)) {}

判断参数或者参数下面属性是否存在

// 判断参数或者参数下面属性是否存在
// bad
function handleF(event) {
    if(event) {
        const target = event.target;
    }
}
// good
function handleF(evnet) {
    if(!event || !event.target) {
        return;
    }
}

|| 和 && 运算符

// || 和 && 运算符
// bad
const value = obj.text || "tt";
const value = obj && obj.data && obj.data.text;
// good
const value = obj.text ?? "tt"; // 空值合并操作符(当左边的值为null和undefined时，返回右侧的值)；0 ?? "tt" 返回 0；null ?? "tt" 返回 "tt"; undefined ?? "tt" 返回 "tt";
const value = obj?.data?.text; // 链判断运算符

获取数组的最后一项值

// bad
let arr = [1, 2, 3];
arr[arr.length - 1];

// good
arr.at(-1);

将字符串转为数字

// bad
let str = "123";
parseInt(str);

// good
+str

某个变量值不存在的时候

// bad
if(!foo){
    foo = bar;
}
// good
foo = foo || bar;

条件为true或false时，进行赋值

// bad
if(a === true) {
    b = '1'
}else {
    b = '2'
}

// good
b = a ? '1' : '2'; // 三目运算符

数组去重

// good
cosnt uniqueArr = (arr) => [...new Set(arr)];

去除数组空项

// good
cosnt arr = [1, 2, , 3];
arr.flat(); // 输出 [1, 2, 3]
// flat 扁平化数组