简洁的JS代码片段

一、较短的if-else的空合并 (??)

let maybeSomething;

// LONG FORM
if(maybeSomething){
　　console.log(maybeSomething);
}else{
　　console.log("Nothing found");
}

// SHORTHAND
console.log(maybeSomething ?? "Nothing found");

二、防止崩溃的可选链 (?.)

在未定义属性时使用可选链运算符，undefined将返回而不是错误，可以防止代码崩溃。

const student = {
　　name:"Mike",
　　age:18,
　　address:{
　　　　state:"New York"
　　}
}

// LONG FORM
console.log(student && student.address && student.address.state);

// SHORTHAND
console.log(student?.address?.state);

三、在没有第三个变量的情况下交换两个变量

let x = 1;
let y = 2;

// LONG FORM
let temp = x;
x = y;
y = temp;

// SHORTHAND
[x,y] = [y,x];

四、将任何值转换未布尔值 (!!)

在js中，可以使用 !! 将任何内容转换未布尔值。

!!true;            // true
!!2;               // true
!![];              // true
!!"Test";          // true


!!false;           // false
!!0;               // false
!!"";              // false

五、传播解构

使用扩展运算符将剩余元素分配给变量。

const student = {
　　name:"Mike",
　　age:18,
     city:"New York",
     state:true
}

// LONG FORM
const name = student.name;
const age = student.age;
const address = { city:student.city, state:student.state };

// SHORTHAND
const { name,age,...address } = student;

六、使用 && 进行短路评估 (&&)

不必用if语句检查某结果是否为真，可以使用 && 运算符。

let isReady = true;

const doSomething(){
   console.log("Yay!");         
}

// LONG FORM
if(isReady){
   doSomething();  
}

// SHORTHAND
isReady && doSomething();

七、从数组中删除重复项 (Set)

const numbers = [1,1,20,3,3,3,9,9,16];
const uniqueNumbers = [];

// LONG FORM
numbers.forEach(item => {
    if(!uniqueNumbers.includes(item)){
        uniqueNumbers.push(item);
    }
})                                         // [1,20,3,9,16]

// SHORTHAND
uniqueNumbers = [...new Set(numbers)];    // [1,20,3,9,16]

八、压缩多个条件 (includes)

避免使用长 || 检查多个条件链，可以使用 includes() 方法。

const num = 1;

// LONG FORM
if(num == 1 || num == 2 || num == 3){
   console.log("Yay");
}

// SHORTHAND
if([1,2,3].includes(num)){
   console.log("Yay");
}

九、指数运算符 Math.pow() 简写 (**)

// LONG FORM
Math.pow(4,2);   // 16
Math.pow(2,3);   // 8

// SHORTHAND
4**2;            // 16
2**3;            // 8

十、四舍五入 Math.floor() 简写 (~~)

// LONG FORM
Math.floor(5.25);   // 5.0

// SHORTHAND
~~5.25;             // 5.0