如何写出让别人看着不嫌弃的代码？本文主要从实际出发，记录一些平时在工作中或者学习中的更高级的前端代码编写技巧。
1、单个if-else
使用三元运算符替代单个if-else情况。如果出现多层if-else的情况，不建议使用三元运算符，这样只会加大代码的阅读难度。
// 替换前
if(value === 1){
name = 'jack'
}else{
name = 'zhou'
}
// 替换后
let name = value === 1 ? 'jack' : 'zhou'
2、使用解构赋值
在取出对象的值时，使用解构赋值。
// 替换前
let obj = {
a: 1,
b: 2,
};
let a = obj.a;
let b = obj.b;
// 替换后
let { a, b } = obj;
3、扩展运算符
扩展运算符的使用，可以在一定程度上简化代码操作。
// 替换前
let a = [1, 2, 3];
let b = [4, 5];
let c = a.concat(b);
let a1 = {
a: 1,
};
let b1 = {
b: 2,
};
let c1 = Object.assign({}, a1, b1);
// 替换后
let c = [...a, ...b];
let c1 = { ...a1, ...b1 };
let d = [...b, 3, ...a, 8];
4、模板字符串
使用模板字符串代替，用+拼接的方式。模板字符串支持变量，表达式，函数等。
// 替换前
let a = "123";
let b = a + "34";
// 替换后
let b = `${a}34`;
5、includes方法
当需要判断一个变量是否是多种情况中的一种，可以使用数组进行存储所有的情况，并使用includes方法判断。这种方法也有利于后续的条件拓展。
// 替换前
if (a === "1" || a === "2" || a === "3") {
}
// 替换后
const condition = ["1", "2", "3"];
if(condition.includes(a)){
}
6、对象的遍历
使用对象或者数组的遍历方法，替代for循环。
const obj = {
a: 1,
b: 2,
};
Object.values(obj).forEach(() => {});
Object.keys(obj).forEach(() => {});
Object.entries(obj).forEach(() => {});
const arr = [1, 3, 4];
arr.forEach(() => {});
arr.map(() => {});
arr.filter(() => {});
arr.some(() => {});
arr.every(() => {});
arr.find(() => {});
......
7、短路运算和可选链
先说一说之前常用的短路运算符&&和||。
表达式1&&表达式2，如果表达式1的运算结果为false，则整个表达式的结果为false，同时不会再对后面的表达式2进行运算判断。如果表达式1的运算结果为true，则根据表达式2的运算结果继续判断。
表达式1||表达式2，如果表达式1的运算结果为true，则整个表达式的结果为true，同时不会再对后面的表达式2进行运算判断。如果表达式1的运算结果为false，则根据表达式2的运算结果继续判断。
可选操作符?.的使用，可以避免某些因引用不存在对象的属性值而导致的异常错误。尤其在实际业务代码中，我们不能确定接口返回会不会出现null值的情况，所有需要做判空处理，可选操作符可简化操作。
// 替换前
let a = c && c.a;
// 替换后
let a = c?.a
??的使用，表达式1??表达式2，当表达式1为null或者undefined时，才会返回表达式2的结果。
let a = null ?? '1'
// a = 1
let b = undefined ?? '2'
// b = 2
let c = 0 ?? '1'
// c = 0
let d = '' ?? '2'
// d = ''
