简介
JavaScript 中一些常用简写技巧总结，让代码告别屎山，从我做起！
文章目录
1、防止崩溃的可选链(?.)
可选链操作符?. 如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。
const person = {
name: "张三",
age: 30,
address: {
area: "beijing"
},
}
// 一层一层判断
console.log(person && person.address && person.address.province) // 输出：undefined
// 使用可选链操作符
console.log(person?.address?.province) // 输出：undefined
2、includes的正确使用姿势
在操作符||代码段里有一个if判断比较长，这时候就可以用includes去简化代码
if(val === 0 || val === "" || val === false || val === null || val === undefined){
// ...
}
// 使用includes简化
if([0, '', false, null, undefined].includes(val)){
// ...
}
检查一个字段是否存在于数组中，可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中
let numbers = [1, 2, 3];
const state = numbers.indexOf(1) > -1 // true
const state = numbers.includes(1) // true
3、Array.map()的简写
想要拿到接口返回的特定字段的值，可以用解构赋值和对象的简写方法对map方法简写。
比如接口返回数据，此时如果只想要数据里的id和name，可以用下面的简写方式。
// 接口返回数据
res = [{
id: 1,
name: '张三',
age: 20,
sex: 0
}, {
id: 2,
name: '李四',
age: 24,
sex: 1
}]
// 第一种方法：箭头函数、返回对象
const list= res.map(v => ({
id: v.id, name: v.name}))
// 第二种方法：箭头函数、 解构赋值
const list= res.map(({
id, name}) => ({
id, name}))
4、逗号运算符(,)
逗号（ , ）运算符对它的每个操作数从左到右求值，并返回最后一个操作数的值。这让你可以创建一个复合表达式，其中多个表达式被评估，复合表达式的最终值是其成员表达式中最右边的值。这通常用于为 for 循环提供多个参数。
// 简化前
const list= arr => {
arr.push('张三')
return arr
}
console.log(list([1,2])) // 输出：[1, 2, '张三']
这段代码要返回修改后的数组，不能直接return arr.push('a')，因为push的返回值是修改后的数组长度，这时候可以用逗号运算符简化成一行代码。
// 简化后
const list= arr => (arr.push('张三'), arr)
console.log(list([1,2])) // 输出：[1, 2, '张三']
5、在没有第三个变量的情况下交换两个变量
在 Js 中，可以使用解构从数组中拆分值。可以应用于交换两个变量而无需第三个变量
let x = 1;
let y = 2;
// 交换变量
[x, y] = [y, x];
console.log(x,y) //x:2,y:1
6、从数组中删除重复项
js中的set具备自动去重功能，Set 是一个集合，它允许你仅存储唯一值。如果给一个数组利用set方法去重，首先利用new Set()去重转为对象，然后在利用Array.from()把对象转回数组
//set特点：没有下标。自动去重
let arr = [1,2,3,2]
//数组转对象,这个过程实现去重
let setArr = new Set(arr)
console.log(setArr) //{1, 2, 3}
//需要利用Array.from将其转为数组
let newArr = Array.from(setArr)
console.log(newArr) // [1, 2, 3]
//简化后
let arr = [1,2,3,2];
let newArr = [...new Set(arr)];
6、数组降维
es6 flat() 用于将嵌套的数组“拉平”，变成一维数组。flat参数为几，那么是将几层数组拉平到一层数组。该方法返回一个新数组，对原数据没有影响。
如果不确定需要降维的数组有多深，可以传入最大值作为参数Infinity，默认值深度为1
const arr = [1, [2, [3, 4], 5], 6]
const flatArr = arr.flat(Infinity) // 输出 [1, 2, 3, 4, 5, 6]
你是否在使用map的时候想要对数组降维，像这样：
const arr = [1, 2, 3, 4]
const result = arr.map(v => [v, v * 2]).flat()
console.log(result); // 输出 [1, 2, 2, 4, 3, 6, 4, 8]
js也提供了更简便的方法，那就是flatMap()，可以改成这样：
const result = arr.flatMap(v => [v, v * 2])
7、快速生成0-9的数组
//传统写法
let arr = []
for(let i=0; i<10; i++){
arr.push(i)
}
// 现在
const arr = [...new Array(10).keys()]
8、逻辑空赋值(??=)
逻辑空赋值??= 逻辑空赋值运算符(x ??= y)仅在 x 是 nullish (null 或 undefined) 时对其赋值。
const res ={
num: 100 };
let text= res.num?res.num:0
//简化后
const res ={
num: 100 };
let text= res.num??= 0;
9、优雅的写条件判断代码
简单的条件判断逻辑用if else 或者 三元运算符, 一眼看去还能知道是什么意思，但是大量的if else和叠加在一起的三元运算符简直就是接盘侠的噩梦
比如真实项目中遇到像这样的，家人们，谁懂啊!
<div>{
{
info.status==1?'状态1':info.status==2?:'状态2':info.status==3?'状态3':info.status==4?'状态4':'状态5' }}</div>
复杂逻辑推荐使用对象Map写法，可读性高，看着舒服~~~
（1）普通的if else
let txt = '';
if (falg) {
txt = "成功"
} else {
txt = "失败"
}
（2）三元运算符
let txt = flag ? "成功" : "失败";
（3）多个if else
let txt = '';
if (status == 1) {
txt = "成功";
} else if (status == 2) {
txt = "失败";
} else if (status == 3) {
txt = "进行中";
} else {
txt = "未开始";
}
（4）switch case
let txt = '';
switch (status) {
case 1:
txt = "成功";
break;
case 2:
txt = "成功";
break;
case 3:
txt = "进行中";
break;
default:
txt = "未开始";
}
（5）对象写法
const statusMap = {
1: "成功",
2: "失败",
3: "进行中",
4: "未开始"
}
//调用直接 statusMapp[status]
（6）Map写法
const actions = new Map([
[1, "成功"],
[2, "失败"],
[3, "进行中"],
[4, "未开始"]
])
// 调用直接 actions.get(status)
10、函数条件调用
// 冗余
function test1() {
console.log('test1');
};
function test2() {
console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
test1();
} else {
test2();
}
// 简化后
(test3 === 1? test1:test2)();
11、使用 && 进行短路评估
不必用if语句检查某事是否为真，你可以使用&&运算符
var isReady = true;
function play(){
console.log("hello!");
}
if(isReady){
play();
}
//简化后
isReady && play();
12、将对象的值收集到数组中
Object.keys()将对象的所有key收集到一个新数组中，Object.values()将对象的所有value值收集到一个新数组中
const info = {
name: "张三", age: 35 };
let key = [];
let data = [];
for (let key in info) {
key.push(key);
data.push(info[key]);
}
// SHORTHAND
const data = Object.keys(info);
const data = Object.values(info);