简洁的JavaScript代码写法

一、简化if-else

我们平时的代码：

if (10 < 20) { 
    console.log("10小于20");
} else { 
    console.log("10大于20");
}

输出：10小于20

可简化为三元运算符：

10 < 20 ? console.log("10小于20") : console.log("10大于20")

输出：10小于20

此外，也可用来简化判断是否有值: 

let value;
value ?? console.log("没有值")

// 输出：没有值

 如果判断条件过多可以考虑switch case 与键值对。

let val = 2;
switch (val) {
    case 1 :
        console.log("我的值是1");
        break;  
    case 2 :
        console.log("我的值是2");
        break;  
    case 3 :
        console.log("我的值是3");
        break;  
    default :  
        console.log("我的值是随便");
}

输出： 我的值是2

let val = 2
let obj = {
    1: "我的值是1",
    2: "我的值是2",
    3: "我的值是3",
}
let result = obj[val] ? obj[val] : "我的值是随便";
console.log(result);

输出：我的值是2

二、字符串与数字相互转换

let num1 = 10;
let str1 = '10';

//数字转字符串
let numToStr = num1 + '';

//字符串转数字
let strToNum1 = str1 * 1;
let strToNum2 = +str1;

三、模板字符串 ``

以前的写法： 

let num = 100;
console.log('小明的成绩是' + num + '分');

//输出：小明的成绩是100分

现在Es6增加的模板字符串可以简写为：

let num = 100;
console.log(`小明的成绩是${num}分`);

//输出：小明的成绩是100分

 四、利用拓展运算符简化字符串转数组及合并数组

字符串转数组：

let str = 'hello';
let arr = [...str]
console.log(arr);

//输出：['h', 'e', 'l', 'l', 'o']

合并数组： 

let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr = [...arr1,...arr2]
console.log(arr);

//输出：[1, 2, 3, 4, 5, 6]

五、利用new Set() 数组去重

let arr1 = [1,2,3,2,2,4,5,6];
let arr = [...new Set(arr1)];
console.log(arr);

//输出：[1, 2, 3, 4, 5, 6]

六、交换两个变量 

一般我们会写为这样：

let a = 1;
let b = 2;
let c = a;
a = b;
b = c;
console.log(a, b);

//输出：2 1

其实完全可以不借助于第三个变量：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

//输出：2 1

 七、转换布尔值

console.log(!!0);         //false
console.log(!!1);         //true
console.log(!!2);         //true
console.log(!!'');        //false
console.log(!!'str');     //true
console.log(!!null);      //false
console.log(!!undefined); //false
console.log(!!true);      //true
console.log(!!false);     //false
console.log(!!NaN);       //false

 八、利用链接运算符判断值是否存在

我们一般会采取这种方式判断值是否存在：

let data = {
    info: {
        name: '张三',
    }
}
if(data && data.info){
    console.log(data.info.name);   // 张三
    console.log(data.info.age);    // undefined
}

 使用链接运算符可简化为：

let data = {
    info: {
        name: '张三',
    }
}
console.log(data?.info?.name);    // 张三
console.log(data?.info?.age);    // undefined