ES6使用场景

1.优化if判断

 

 

 2.非空判断??

如果??左侧为undefined或者null时才会返回右侧的值

ES5方式：if(value ！== null && value ！== undefined && value ！== ''){//……}

ES6方式：if ((value ?? '') ！== '') {}  

3.链判断元素运算符?.

如果左侧对象是undefined或null，就不再往下运算，直接返回undefined

ES5方式：const name = res.data && res.data.name

ES6方式：const name = res.data?.name

4.逻辑赋值运算符

ES5方式：user.id = user.id || 1;

ES6方式：user.id ||= 1

5.解构赋值

注意：ES6结构赋值的对象不能是null或者undefined，所以在赋值的时候要加上||{}，如：const { name: tName, sex } = obj || {}

6.spread运算符及set数据结构

新的数据结构set，类似于数组，但是值是唯一的，没有重复值。Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();
   [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

  for (let i of s) {
  console.log(i);
  }
  // 2 3 5 4

Array.form 方法可以将Set结构转为数组。

function dedupe(array) {
  return Array.from(new Set(array)); 数组去重
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

 7.Map数据结构

类似对象，键值对集合，但键不限于字符串。Map的遍历顺序就是插入顺序。

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

 Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

 set方法返回当前map对象，因此可采用链式写法。

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

8.Proxy

9.Promise（异步编程的一种解决方案）

Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

7.reduce