你会用ES6的写法吗？

对于一名有代码强迫症和洁癖的程序员来说，你还在用ES5的写法吗？本人不是说ES5写法不行，只是代码的可读性比较差，而且看起来也比较冗余，接下来教大家最简洁的代码解决你的冗余问题。

一、关于对象的取值问题

例子：

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

吐槽大会（取值）：
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;

不会用ES6的解构赋值取值吗？一行代码代替四行代码甚至更多不香吗？

改进方法：
const { a, b, c, d } = obj;

补充：
ES6的解构赋值固然好用。但是要注意解构对象不能为 undefined 或者 null ,否则会报错，故要给结构的对象一个默认值。

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

二：关于合并两个数组和两个对象的吐槽

例子：
1、数组

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);   //[1,2,3,1,5,6]

2、对象

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);  //{a:1,b:1}

吐槽大会：
ES6的扩展运算符，三个点是不是忘记了，还要数组合并不考虑去重吗？上面的例子如果有重复的属性，不会去重，想要得到去重后的数组和对象，还需再进一步处理。

改进：
1、数组

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set( [...a, ...b] )];     //[1,2,3,5,6]

2、对象
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字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。

改进：

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

四：关于 if 判断条件的问题

例子：

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

吐槽大会：
ES6的数组 includes 方法会不会使用啊~~~

改进：

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

五、关于异步函数的吐槽

例子：

const fn1 = () =>{
  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 fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

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

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

还有一些ES6的写法，下次再跟大家补充，也随时欢迎大家在下方留言吐槽哦！
如果在分享中有问题，欢迎大家指正，万分感谢！