如何优雅的写代码,我们可以用一些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}