es6学习

---

前言

在小北公众号里看到的干货，码住学习。

---

一、取值

从对象中取值或拼接新的对象属性名，一般操作

let d = {a:1,b:2,c:3}
let a = d.a
let b = d.b
let c = d.c
let g = d.a+d.c

使用解构赋值

let {a,b,c} = obj || {}
let g = a+c

如果想创建的变量名和对象的属性名不一致时

let {a:a1} = obj || {}
console.log(a1) //1

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

二、合并数据

合并数组/对象

let a = [1,2,3],
let b = [1,3,4]
let c = a.concat(b)   //[1, 2, 3, 1, 2, 4]

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

使用扩展运算符并且去重

let c = [...new Set([...a,...b])],  //1,2,3,4

let obj = {...obj1,...obj2} //{a:1,b:2}

三、关于if中的判断条件

在项目中会遇到各种各样的判断，if过多看起来不太专业的样子

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

使用ES6中数组实例方法includes

let typeList=[1,2,3,4]
if(typeList.includes(type)){
	//...
}

四、数据扁平化

let 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)]   // [1, 2, 3, 5, 8, 12, 5, 14, 79, 3, 64, 105]

使用Object对象的values(),返回对象所有value值的组成的数组，es6的flat(),使用Infinity参数，无需知道被扁平化的数组的维度，就可以完成扁平化

member = Object.values(deps).flat(Infinity)

flat()不支持IE

五、获取对象属性值

const name = obj && obj.name;

ES6中的可选链操作符

const name = obj?.name;

es6中新增的运算符** 、**=，||、??、?.、||=、&&=、??=

指数运算符 **，**=

** 这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的

2** 3** 2 = 2**（3**2）=512

let b = 4;
b **= 3;
// 等同于 b = b * b * b;

链判断运算符|| ,?? ,?.

// 错误的写法
const  firstName = message.body.user.firstName || 'default';

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

firstName属性在对象的第四层，所以需要判断四次，每一层是否有值,层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法

const firstName = message?.body?.user?.firstName || 'default';

?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

??本质上是逻辑运算，它与其他两个逻辑运算符&&和||有一个优先级问题，它们之间的优先级到底孰高孰低。优先级的不同，往往会导致逻辑运算的结果不同。
现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

逻辑赋值运算符||=、&&=、??=

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

这三个运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。
它们的一个用途是，为变量或属性设置默认值。

六、输入框非空的判断

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

使用空值合并运算符

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

七、异步函数

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

这样嵌套函数调用容易形成回调地狱，使用asycn/await

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的使用和大佬吐槽的废物写法，有责该之。