你可能还不知道的很酷JavaScript特性：如何优雅的编写代码

如何优雅的写代码，我们可以用一些JavaScript特性实现

1、空运算符

空运算符(??)：如果左侧为 null 或者 undefined 时，则此运算符返回右侧值。
逻辑 OR运算符 (||) ：如果左侧操作数为假值时返回右侧操作数。

例如：当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。

var data= null ?? 'data';
console.log(data);//"data"
var data_or= null || 'data';
console.log(data_or);//"data"

var data1 = 0 ?? 4;
console.log(data1);// 0
var data1_or = 0 || 4;
console.log(data1_or);// 4

var data3 = false ?? true;
console.log(data3);// false
var data3_or = false || true;
console.log(data3_or);// true

通过以上对比，我们可以知道，在某些计算方法中，我们使用??会比使用||好，因为0在js中，会把他设置为false

此方法是ES11出的，因此兼容性可能会差一些，空运算符的兼容性如下：

2、Switch 语句优化

利用对象，实现Switch 语句优化

优化前：

switch (data) {
    case 1:
        data1();
        break;
    case 2:
        data2();
        break;
    case 3:
        data();
        break;
        // And so on...
}

优化后1：

// 优化后
var data = {
    1: data1,
    2: data2,
    3: data
};
const val = 1
data[val]();
function data1() {
    console.log("data1");
}
function data2() {
    console.log("data2");
}
function data() {
    console.log("data");
}

优化后2：

const data = {
    1: function data1() {
	    console.log("data1");
	},
    2: function data2(){
  	  console.log("data2");
	},
    3: function data() {
	    console.log("data");
	}
};
const val = 1
data[val]();

3、AND (&&) 运算符

如果我们想避免一个 if 语句，那么这个速记会很有帮助。

优化前

if (test1) {
	callMethod(); 
}

优化后

test1 && callMethod();

4、短函数调用

如果我们想避免一个 if…else 语句，那么使用三元表达式写短函数调用
优化前：

// 优化前
function data1() {
    console.log('data1');
};
function data2() {
    console.log('data2');
};
var data3 = 1;
//优化前
if (data3 == 1) {
    data1();
} else {
    data2();
} //data1

优化后：

function data1() {
    console.log('data1');
};
function data2() {
    console.log('data2');
};
var data3 = 1;
// 优化后
(data3 === 1 ? data1 : data2)(); //data1

5、返回简写

优化前：

let value;
function returnMe() {
    if (!(value === undefined)) {
        return value;
    } else {
        return callFunction('value');
    }
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {
    console.log(val);
}

优化后：

let value;
function returnMe() {
    return value || callFunction('value');
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {
    console.log(val);
}

6、可选链

var a = null
//优化前
//console.log(a.name)  //报错
//优化后 
console.log(a?.name) //undefined
a = {name:'zsf'}
console.log(a?.name) //zsf
console.log(a?.age) //undefined

此方法是ES11出的，因此兼容性可能会差一些，兼容性如下：

7、对象属性赋值

当我们想从两个字符串创建对象并保持与字符串相同的键时，可以使用这个技巧来完成。

let data1 = 'abcd'; 
let data2 = 'efgh';
//优化前
let data = {data1: data1, data2: data2};
//优化后 
let data = {data1, data2};

8、结构赋值

当我们想从两个字符串创建对象并保持与字符串相同的键时，可以使用这个技巧来完成。

优化前：

let data = {a:1,b:2}
let data1 = {c:3}
data1.a = data.a
data1.b = data.b
console.log(data1) // {a:1,b:2,c:3}

优化后

let data = {a:1,b:2}
let data1 = {...data,c:3}
console.log(data1) // {a:1,b:2,c:3}