一、对象取值(es6解构赋值)
const obj = {
name:'张三',
age:'20',
sex:'男',
job:'coder'
}
const name = obj.name;
const age = obj.age;
const sex = obj.sex;
const job = obj.job;
es6对象解构改进:一行代码即可解决
const {name,age,sex,job} = obj;
二、if条件判断
if多取值条件判断
const status = 1;
if(status === 0 || status === 1 || status ===2) {
//...
}else {
//...
}
es6 includes方法改进:
const statusMap = [0,1,2,3];
if(statusMap.includes(status)) {
//...
}
三、数据合并
//数组
const a = [1,2,3];
const b = [3,4,5];
const c = a.concat(b); //[1,2,3,3,4,5];
//对象
const obj1 = {name1:'张三'};
const obj2 = {name2:'李四'};
const obj = Object.assign({},obj1,obj2); //{name1:'张三',name2:'李四'}
es6 new Set()合并数组,'...'运算符合并对象改进:
//数组
//使用Set数据结构,它的所有成员都是唯一的(不可能存在重复的值)
const c = [...new Set([...a,...b])]; //[1,2,3,4,5]
//对象
const obj = {...obj1,obj2}; //{name1:'张三',name2:'李四'}
四、数组扁平化
const obj = {
a:[1,2,3],
b:[4,5],
c:[6]
}
let res = [];
//遍历对象
for (let item in obj){
const value = obj[item];
if(Array.isArray(value)){
//解构数组
res = [...res,...value];
}
}
console.log("res",res); //[1,2,3,4,5,6]
es6改进:
使用Object.values()获取对象的全部属性,得到的是一个数组
使用es6的flat方法对数组进行扁平化,它可以无视被扁平化数组的维度,可以获取数组所有的值,也将移除数组中的空项
const arr = Object.values(obj); //[[1,2,3],[4,5],[6]];
const res = arr.flat(Infinity); //[1,2,3,4,5,6]
flat()方法可以获取数组指定层数内的所有元素,并输出为新的数组
语法如下:
const newArr = arr.flat(depth)
//参数:depth可选
//指定要提取嵌套数组的结构深度,默认为1,一般为数字,也可使用Infinity(无穷),提取所有的层级的元素
const arr = [1,2,[3,4,[5,6,[7]]],8];
//去掉值的一层数组
const arr1 = arr.flat(1); // [1,2,3,4,[5,6,[7]],8];
//去掉值的两层数组
const arr2 = arr.flat(2); // [1,2,3,4,5,6,[7],8];
//去掉值的所有层
const arrAll = arr.flat(Infinity); //[1,2,3,4,5,6,7,8];
五、非空判断
if(value !== null && value !== undefined && value !== ''){
//...
}
es6改进:
?? 是ES6提供的一个操作符,被称为非空运算符,例如 xxx?? ' yyy ' ,如果xxx的值不为null或undefined,则取xxx的值,如果xxx的值为null,则取yyy
if(value??'' !== '') {
//...
}
//eg:判断用户身份
const judge = (status) => {
if(status === 0) {
return '普通用户';
}
if(status === 1) {
return '管理员';
}
if(status === 2) {
return '超级管理员';
}
return '未知用户';
}
//改进:
const judege = (status) => {
const arr = {
0:'普通用户',
1:'管理员',
2:'超级管理员'
};
return arr[status]??'未知用户';
}