国庆摆烂第三天，我总结了项目中常用的ES6语法（二）

今天我们接着来讲日常项目中常用的ES6语法。

7.对象的扩展

属性简单表达方式,当对象的属性值为一个变量时，且变量名和对象键值相同，我们可以使用对象的简写方式：

let foo = 'foo'
let obj = {
  foo:foo
}
// 等价于
let obj = {foo}

属性名称表达方式,当对象的键为一个变量时，我们可以使用属性名称表达式：

let foo = 'foo'
let obj = {
   [foo]: 123
}

console.log(obj.foo)  // 123
console.log(obj[foo])  // 123
console.log(obj['f'+'oo']) // 123

属性遍历,ES6一共有5种遍历方式,：for .. in 、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Reflect.ownKeys(),我工作中常用的其实就前面两种，后面的三种不翻书根本记不住。

let obj = {a:1,b:2}

for(k in obj) {
  console.log(k,obj[k])  // a,1   b,2
}

Object.keys(obj)  // 返回对象的键组成的数组 [a,b]

8.对象新增方法

Object.assign()用于合并对象，将source对象的可枚举属性复制到target对象，注意这个复制是浅拷贝。

let target = {a:1}
let source1 = {b:2}
let source2 = {c: 3}

Object.assign(target,source1,source2)
console.log(target)  //{ a:1,b:2,c:3}

Object.keys()，Object.values()，Object.entries()分别获取对象的键数组，值数组，建值对数组

let obj = {a:1,b:2}
console.log(Object.keys(obj)) // [a,b]
console.log(Object.values(obj)) // [1,2]
console.log(Object.entries(obj)) // [[a,1],[b,2]]

9.运算符扩展

ES2016 新增了一个指数运算符（**）,不要记错了，之前我一直把^当作指数运算符，吃了很大亏，还一直找不到问题在哪儿。
可选链式操作符(?.)，之前有做一个屎山项目，对象多层嵌套，后端返回的数据还不一定有到你需要的那一层,于是就发现了这样的代码：

<div v-if="obj&&obj.a&&obj.a.b&&obj.a.b.c&&obj.a.b.c.d">{{obj.a.b.c.d}}</div>
// 当你看见满篇都是 && 符号的时候真的是头都大， 有了可选链式操作符之后，我们可以这样写：
obj?.a?.b?.c?.d // 再也不用担心报错了 

Null 判断运算符(??)，这个操作符与 || 有点相似，但其中有一下区别：

?? 只有在符号左边的值为null 和undefined时才会返回符号右边的值
console.log(0??1) // 0
console.log(''??1) // ''
console.log(null??1) // 1
console.log(undefined??1) // 1

10.Map和Set数据集

Map和Set数据集其实在开发中用的比较少，基本上都是用在刷算法题的时候，Map用于模拟hashMap，Set用于纯数字数组去重。

11.Promise用法

Promise在这里就不讲了，要讲的话太多了，我自己也没怎么弄明白。

12.async 函数

async await两个关键字一般用来将异步函数变为同步函数，避免异步函数多层嵌套：

  let functon = async () => {
    let res = await ajax.get(...)
  }

这些大概就是我项目中常用的ES6语法了，如有不足之处，请指正。

相关链接

国庆摆烂第二天，我总结了项目中常用的ES6语法（一）