提高JavaScript代码优雅性的一些小技巧《一》

简介

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);