这些ES6用法你都会吗?

一 关于取值

取值在程序中非常常见,比如从对象obj中取值

const obj = {
a:1
b:2
c:3
d:4
}

吐槽:

const a =  obj.a;
const b =  obj.b;
const c =  obj.c;
//或者
const f =  obj.a  +  obj.b;
const g =  obj.c  +  obj.d;

改进:用ES6解构赋值

const { a,b,c,d } = obj
const f = a +b
const h = c + d
// 如果想创建的变量名和对象的属性名不一致,可以这么写
const { a : a1 } = obj  //  a1 === a
// 注意结构对象不能为 undefined null ,否者会报错,故要给被结构对象一个默认值
const  { a,b,c,d } = obj || { }

二 关于合并数据

比如合并两个数组,合并两个对象

const  a = [ 1,2,3 ];
const b=[ 1,5,6 ];
const c = a.concat(b); // [ 1,2,3,1,5,6 ]
const obj1 ={a:1}
const obj2 = {b:1,}
const obj=0bject.assign( { }，obj1，obj2 ); // { a:1,b:1 }

数组合并考虑去重, 改进: ES6扩展运算符

const a = [ 1,2,3 ];
const b=[ 1,5,6 ];
const c=[...newSet([...a,...b])]; // 用 new set 去重,[1,2,3,5,6]
const obj1 = {a:1}
const obj2 = {b:1,}
const obj = {...obj1,...obj2}; // {a:1,b:1}

三 关于拼接字符串的

const name ='小明';
const score =59;
let result =' ' ;
if(score >60){ 
result =`${name}的考试成绩及格`;
} else {
result= `${name}的考试成绩不及格`;
}

改进:ES6字符串模板${ }中可以放任意的JavaScript表达式,可以进行运算以及引用对象属性

const name ='小明';
const score =59;
const result = `${ name }${ score > 60 ? `的考试成绩及格` : '的考试成绩不合格' } `;

四 关于if中判断条件

if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
操作...
}

**改进: SE6中数组的实例方法includes **

const condition = [ 1,2,3,4 ];
if( condition.includes( type ) ) {
操作...
}

关于列表搜索

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [ 1,2,3,4,5 ];
const result = a.filter(
 item => { 
 return item ===3 
 }
 )

如果是精确搜索不会用ES6中的find吗?性能优化懂么，find方法中找到符合条件的项，不会继续遍历数组
改进

const a = [ 1,2,3,4,5 ];
const result = a.find(
		item =>{
			return item ===3
			}
		)

关于扁平化数组

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

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

改进: ES6的flat方法,无论是二维,三维,四维都能扁平化,方便快捷

const deps ={
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
Let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。
补充
flat方法不支持IE浏览器。

七 关于获取对象属性值

const name = obj && obj.name

改进

const name = obj ?.name

八 关于添加对象属性

给对象添加属性时，若属性名是动态变化的，怎么处理

let obj ={};
let index = 1;
let key =`topic${index}`;
'obj[key]= `话题内容'

改进:ES6中对象属性名可以用表达式

let obj ={};
let index = 1;
obj [ `topic${index}` ] = ' 话题内容';

九 关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if( value !== null  && value !== undefined && value !==''){
操作....
}

改进:ES6中的空值合并运算符

if( (value? ' ') !==' ' ){
操作...
}

十 关于异步函数

异步函数很常见，经常是用 Promise 来实现。但是容易形成回调地狱

constfn1 =()=>{
return new Promise((resolve,reject) =>{ 
setTimeout(()=>{
resolve(1);
}，300);
});
}
const fn2=()=>{
return new Promise((resolve,reject) =>{
setTimeout(
()=>{resolve(2);
},600);
});
}
const fn =()=>{
fn1().then(
res1 =>{console.log(res1);//1
fn2().then(res2 =>{
console.log(res2)
})
})
}

改进

const res1= await fn1();
const res2=await fn2();
console.log(res2) // 2

**
补充
但是要做并发请求时，还是要用到Promise.all()。**

const fn =() =>{
console.log(res); //[1,2]
})
}

**
如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()**