几个es6的新增的操作符和方法
2023-07-13 本文已影响0人
执着于98斤的it女
1、es6 includes方法
写判断时,经常会遇到多个判断条件:
if(type == 1 ||type == 2 ||type == 3 || type == 4 ){
//...
}
可以改成这样
const condition = [1,2,3,4];
if( condition.includes(type) ){
//...
}
2、可选链操作符?.
之前是这样
const name = obj && obj.name;
现在可以改成这样
const name = obj?.name;
// ?. 运算符
let data = {
arr: [0,0,0]
}
// 旧的写法 需加一个判断
if(data.arr) {
data.arr.forEach(v=>{})
}
// 旧的写法 二
(data.arr || []).forEach(v=>{})
// 新语法
data.arr?.forEach(v=>{})
3、空值合并运算符??
之前是这样
if(value !== null && value !== undefined && value !== ''){
//...
}
现在可以这样
if(value??'' !== ''){
//...
}
let b = 0 ?? 100; // b的值为0
let b = null ?? 100; // b的值为100
let b = false ?? 100; // b的值为 false
4、 || 运算符
// || 运算符
let a = '' || 100; // a的值为 100
let a = 0 || 100; // a的值为 100
let a = false || 100; // a的值为 100
let a = undefined || 100; // a的值为 100
let a = null || 100; // a的值为 100
let a = 10 || 100; // a的值为 10
5、扁平化数组
之前是这样写
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
现在可以这样
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);