- es6的扩展运算符 … 你了解多少呢
写在前面
之前学习react 过程中，遇到… 知道的不是很清楚，只是知道例如下面这样…arr1 相当于2, 4, 5, 61
2
3let arr1 = [2, 4, 5, 6]
let arr2 = [...arr1]
arr2 输出为 [2, 4, 5, 6]
程序员一定要一直保持学习的状态，反正我就是秉着这样的心态在前端这个领域一直摸索，以至于我的颈椎、前脑门、曾经一抓一大把的头发。。。你们懂得
言归正传，我查了好多资料，现在整理一下我对这个…得认知：
人家有个专业名词，叫做es6的扩展运算符，是一种展开语法，有什么用处呢，我们来看看
在MDN上面的介绍比较详细了:
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: “mdn”} 这种简洁的构造方式)可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开
什么意思呢？就想我开篇写的那样 …arr1 就相当于2, 4, 5, 6
let arr2 = […arr1] 就相当于let arr2 = [2, 4, 5, 6]，…起到的作用将一个数组转为用逗号分隔的参数序列
具体用处简单总结如下：
合并数组
1
2
3
4
5
6// ES5 的写法
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
Array.prototype.push.apply(arr1, arr2) ==> [1, 2, 3, 4, 5, 6]
// ES6 的写法
arr1.push(...arr2)数组最大元素
1
2
3
4
5
6var args = [1, 3, 5];
// ES5 的写法
Math.max.apply(null, args) ==>5
// ES6 的写法
Math.max(...args) ==>5
// 是不是简单了许多可以解构赋值结合, 用于生成数组，就是把剩余的东西放到一个array里面赋值给它。一般只针对array的解构
1
2
3
4
5
6
7
8let arr = [1, 2, 3, 4]
let first = arr[0]
let rest = arr.slice(1)
console.log(item) ==>[2, 3, 4]
// 使用扩展运算符
[first, ...rest] = arr
console.log(item) ==>[2, 3, 4]
* 需要注意的是：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错在对象的使用
1
2
3
4
5
6
7
8let obj1 = {
a: 1,
b: 2
}
let obj2 = {
c: 3,
...obj1
}扩展运算符还可以将字符串转为数组
1
[...'strToArr'] ==> ['s', 't', 'r', 'T', 'o', 'A', 'r', 'r']
好多获取dom的方法，例如querySelectorAll方法返回的是一个nodeList对象。它不是数组，而是一个类似数组的对象。可以扩展运算符可以将其转为真正的数组
1
let domArr =[...document.querySelectorAll('.list')]
扩展运算符内部调用的是数据结构的 Iterator 接口(遍历器)，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构
1
2
3
4
5
6let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
今天肩膀有点痛哦，加油吧，小伙伴们 !!!
对了，补充一下，如果在vue项目中用到…报错，需要安装一个插件： npm install –save-dev babel-plugin-transform-object-rest-spread
在.babelrc文件中配置： {“plugins”:[“transform-object-rest-spread”]}