一 关于取值
取值在程序中非常常见,比如从对象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()**