ES6语法的简单介绍——拓展运算符

简单概要下我最近学习的ES6语法，说一说我觉得平时比较常用的几个需要掌握的语法。（有问题希望各位大神及时指出）

一、拓展运算符(...)

(1)、将一个数组转为逗号隔开的参数序列

(小栗子示范：cosnsole.log(...[5,6,7])  //5 6 7)

下面这段小代码是最近做的项目中所用到的简单示例

/**
* 组件回调函数 新增保存 编辑保存
* @param {* addData} 回传的数据
* @param {* saveType} 保存 or 保存并转化
* @param {* operaType} 新增保存 or 编辑保存
*/
async handlerCustomAdd(addData, saveType, operaType) {
 this.handleSpinCustom()
 let params = {
   ...addData,
   companyCityCode: addData.provinceArr[1],
   submitState: saveType === 'saveClueAs' ? 2 : 1}
 let url = operaType === 'customAdd' ? 'handlerCustomAdd' : 'handlerCustomUpdate'
 let { data } = await customApi[url](params);
 this.$Spin.hide();
 if (data.code === 0) {
 this.$Message.success('客户保存成功！');
 this.popShow = false;
 this.queryList()
  } else {
   this.$Message.error(data.message)}},
 

(2)、主要用于函数调用

 

(3)、合并数组（可以将多个数组进行合并）

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

结果
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

(4)、函数多参数传递, 替换Apply

 

　先把参数定义成数组，函数定义好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
  console.log( a1, a2, a3, a4)
}

在ES6前，要把数组参数传递给函数，要么按照下标访问数组元素去调用函数，缺点是数组个数和函数参数个数完全绑定，有一个个数发生变化，那么就要修改了。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

要么就用Apply进行调用，结果当然是没毛病，也是ES6之前用的最多的。

fun1.apply(null, arr4)

如果是用扩展运算符，那就方便l。

fun1(...arr4)

结果：

arg1 arg2 arg3 arg4

(5)、与解构配合赋值

　配合使用，可以从数组中提取除第一个以后的所有元素成另外一个数组。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

结果：

1
[ 2, 3, 4, 5, 6 ]

但要注意，与解构配合时，扩展运算符只能用在最后一个上，否则报错。

(6)、可以展开实现了Iterator 接口的对象

比如Map，Set，数组就是从Iterator接口实现来的，Object不是，所以扩展Object会报错。

扩展Set。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

结果:

1 2 3

(7)、扩展Map。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

结果：

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意，扩展出来的一个个的数组，按照map的键值对结构，每个数组都是2个元素，一个是key，一个是value。

如果扩展Object，就会报错。

let obj1 = {
   p1: 1,
   p2: 2,
   p3: 3
}
console.log(...obj1)

报错。