ES6简单用法取代ES5,简洁代码

一、关于取值

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

1.直接取值

const {a,b,c,d,e} = obj;

2.修改key值取值

const {a:a1} = obj;  // a1 = 1

3.ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

二、关于合并数据

ES5写法

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 obj1 = {
  b:1,
}
const obj = Object.assgin({}, obj1, obj2);//{a:1,b:1}

改进： 增加去重 和 扩展运算符

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

三、if中判断条件

1.判断简化

if(type == 'a' || type == 'b' || type == 'c' || type == 'd' ||){
   //...
}

改进

const condition = ['a','b','c','d'];
if( condition.includes(type) ){
   //...
}

2.条件简化

// bad 
let test: boolean;
if (x > 100) {
  test = true;
} else {
  test = false;
}

// better
let test = x > 10 ? true : false;
// ||
let test = x > 10;

四、关于数组遍历取值

const a = [1,2,3,4,5];
const a2 = [];
const result = a.map(item =>{
    if(item == 3) a2.push(item )
})

1.改进 取指定值

const a = [1,2,4,5,6,8];

const a2= a.filter(item=>item==5);
console.log(a2)//[5]

const a3= a.find(item => item == 5);
console.log(a3);//5

2.改进 取指范围值

const a = [1,2,4,5,6,8];

const a2= a.filter(item=>item > 5);
console.log(a2) // [6, 8]

const a3= a.find(item => item > 5);
console.log(a3); // 6

五、关于扁平化数组

const deps = {
	'a':[1,2,3],
	'b':[3,4,5],
	'c':[5,6,7],
	'd':[7,8,9],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

改进： 使用Object.values加ES6的 flat方法
flat方法不支持IE浏览器。

const deps = {
	'a':[1,2,3],
	'b':[3,4,5],
	'c':[5,6,7],
	'd':[7,8,9],
}
let member = Object.values(deps).flat(Infinity); // [1, 2, 3, 3, 4, 5, 5, 6, 7, 7, 8, 9]
member = [...new Set(member)]

六、关于获取对象属性值

const name = obj && obj.name;

改进： 使用 ES6中的可选链操作符

const name = obj?.name;

七、关于输入框非空的判断

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

改进： 使用ES6中新出的空值合并运算符

if(value??'' !== ''){
  //...
}

八、关于异步函数

const func1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const func2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const func  = () =>{
   func1().then(res1 =>{
      console.log(res1);// 1
      func2().then(res2 =>{
        console.log(res2)
      })
   })
}

改进

const fn = async () =>{
  const run1 = await func1();
  const run2 = await func2();
  console.log(run1);// 1
  console.log(run2);// 2
}

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

const func= () =>{
   Promise.all([func1(),func2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

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