1.对象取值
恕我直言,2022了,还有人不用解构赋值的吗?
let obj = {
a:1,
b:2,
c:3,
d:4,
e:5,
}
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
改进
const {a,b,c,d,e} = obj;
当然,有些人说obj中的key不规范,我不想要,我需要修改key值,可以的啊
改进
const {a:testA,b:testB} = obj;
console.log("testA",testA);// 1
console.log("testB",testB);// 2
//const {partA:partB} = obj 将obj.partA的值赋予partB,不会影响obj的属性
当然,解构赋值虽好,但如果对象为undefined或null,则报错,因为,链式结构不存在
2. if判断条件
很多时候,有人会在if的判断条件中进行多取值判断
如下所示:
let type = 3;
if (type === 1 || type === 2 || type === 3) {
//...
} else {
//...
}
改进
const typeMap = [1, 2, 3, 4, 5];
if (typeMap.includes(type)) {
//...
}
3. 数组扁平化
获取所有班级的成员id,json格式如下
const list = {
"一班":[1,2,3],
"二班":[4,5],
"三班":[6]
}
let students = [];
for (let item in list){
const value = list[item];
if(Array.isArray(value)){
students = [...students,...value];
}
}
console.log("students",students)
首先,获取对象全部属性不需要遍历,Object.values轻松解决,其次,数据的扁平化处理,es6有flat方法来处理,这个方法,可以无视被扁平化的数组的维度,直接获取数组所有的值,同时,也将移除空项
改进
const list = {
"一班":[1,2,3],
"二班":[4,5],
"三班":[6]
}
let students = Object.values(list).flat(Infinity);//[ 1, 2, 3, 4, 5, 6 ]
flat()方法,可以获取数组指定层数内的所有元素,并输出为新的数组
语法如下:
let newArray = arr.flat(depth)
参数：depth 可选，指定要提取嵌套数组的结构深度，默认值为 1,一般为数字,也可使用Infinity,提取所有的层级的元素
let arr = [1,2,[3,4,[5,6]],7];
let arr = [1,2,[3,4,[5,6,[8]]],7];
let arr1 = arr.flat(1);
console.log("arr1",arr1) // let arr = [1,2,[3,4,[5,6,[8]]],7];
let arr2 = arr.flat(2);
console.log("arr2",arr2) // [1, 2, 3, 4, 5, 6,[ 8 ], 7]
let arrAll = arr.flat(Infinity);
console.log("arrAll",arrAll) //[1, 2, 3, 4,5, 6, 8, 7]
flat缺点是:不支持IE浏览器
4.合并数据
两个数组/对象合并为一个
const a = [1, 2, 3];
const b = [1, 5, 6];
const c = a.concat(b);//[1,2,3,1,5,6]
console.log("c", c)
const obj1 = {
a: 1,
}
const obj2 = {
b: 1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
console.log("obj", obj)
改进
使用es6的 new Set()对象合并数组(同时还能达到去重效果)
使用es6的...运算符,合并对象
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
console.log("c", c)
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}
console.log("obj", obj)
5. 字符串拼接模版
字符串模版拼接数据,灵活使用,有些人只在使用基本功能
const name = 'lock';
const merits = "A";
let result = '';
if(merits === "A"){
result = `${name}提升等级`;
}else{
result = `${name}优化处理`;
}
console.log("result",result)
改进
es6的${},是可以放入任何javaScript表达式的,可以进行计算或对象属性引用
const name = 'lock';
const merits = "A";
const result = `${name}${merits === "A" ?'提升等级':'优化处理'}`;
console.log("result",result)
6.参数非空判断
我相信,很多人还在使用下述方法判断参数非空
if(value !== null && value !== undefined && value !== ''){
//...
}
改进
es6有一个新的运算符,null判断运算符,??
它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值;
if((value??'') !== ''){
//...
}
