| 扩展运算符，即...运算符是es6新增的一个语法，其主要作用是将数组或对象进行展开(这种说法也许不太准确)，希望通过下面的总结能让你明白其使用方法。 个人的理解和总结使用场景如下：
1、替代apply方法，一般在函数调用时处理参数假设我们的参数刚好是一个数组(单个参数这里就不讨论了，逐个传入即可)； 然后我们需要返回这个参数数组中所有元素之和，那么ES5的做法如下： function addFun(x, y, z) { return x + y + z;}var args = [1, 2, 3];// 两种调用方式// 1，这种方式在参数较少的情况下还能应付，但是参数一旦过多就不靠谱了，addFun(args[0], args[1], args[2])// 2，用apply方法直接传递数组addFun.apply(null, args);apply方法能很好的解决参数过多的问题，但是前提是你需要清除apply和call方法的区别，估计很多童鞋很少用apply方法。 ES6使用扩展运算符就简介多了： function addFun(x, y, z) { return x + y + z;}var args = [1, 2, 3];addFun(...args);这里...运算符是将args数组拆开成单个元素进行计算。
2、剩余参数(rest运算符)，主要针对函数形参
剩余参数运算符与扩展运算符都是...，但是使用起来却不一样，可以简单的理解为剩余运算符和扩展运算符是相反的，扩展运算符是把数组或对象进行展开，而剩余运算符是把多个元素‘合并'起来。 主要用于不定参数，可以理解为arguments的替代品，因此ES6开始不再使用arguments对象 let demoFun = function(...args) { for (let item of args) { console.log(item); }}demoFun(1, 2, 3) // 1, 2, 3let demoFun = function(argA, ...args) { console.log(argA); console.log(args)}demoFun(1, 2, 3);// 1// [2, 3]配合结构使用时，把他理解为整体为一个元素就行了 var [a, ...rest] = [1, 2, 3, 4];// 这里把...rest整体看成一个元素console.log(a) // 1console.log(...rest) // [2, 3, 4]
3、数据连接、合并
连接数组，使用push将数组添加到另一个数组的尾部 var arr1 = [1, 2, 3];var arr2 = [4, 5, 6];// ES5处理方式Array.prototype.push.apply(arr1, arr2);console.log(arr1) // [1, 2, 3, 4, 5, 6]// ES6处理方式arr1.push(...arr2);console.log(arr1) // [1, 2, 3, 4, 5, 6] 合并数组(代替concat方法) var arr1 = ['a', 'b', 'c'];var arr2 = ['d', 'e', 'f'];// ES5 合并var es5Arr = arr1.concat(arr2);console.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', 'f']// ES6 合并var es6Arr = [...arr1, ...arr2];console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']
4、数组和对象的拷贝
数组拷贝 var arr1 = [1, 2, 3];var arr2 = [...arr1];console.log(arr1 === arr2) // falsearr2.push(4); // 修改arr2，不会影响arr1的值console.log(arr1); // [1, 2, 3]console.log(arr2); // [1, 2, 3, 4] 对象也一样 var obj1 = { a: 1, b: 2};var obj2 = {...obj1};console.log(obj1 === obj2); // falseobj2.c = 3; // 修改obj2不会影响obj1console.log(obj1); // {a: 1, b: 2}console.log(obj2); // {a: 1, b: 2, c: 3}注意：扩展运算符拷贝是浅拷贝，只对数组或对象的第一层结构起作用
5、字符串转数组
var str = 'hello';// ES5 处理方式var es5Arr = str.split('');console.log(es5Arr) // ["h", "e", "l", "l", "o"]// ES6 处理方式var es6Arr = [...str];console.log(es6Arr) // ["h", "e", "l", "l", "o"]
6、在函数调用时使用拓展运算符。
以前如果我们想将数组元素迭代为函数参数使用，一般使用Function.prototype.apply的方式。 function myFunction(x, y, z) { console.log(x+""+y+""+z);} var args = [0, 1, 2]; myFunction.apply(null, args);有了展开语法，我们可以这样写。 function myFunction(x, y, z) { console.log(x+""+y+""+z); } var args = [0, 1, 2]; myFunction(...args);提示: ...arr返回的并不是一个数组，而是各个数组的值。只有[...arr]才是一个数组，所以...arr可以用来对方法进行传值
总结...运算符的常用方法和场景如上，其他的使用方法就不做过多介绍了，比如map、伪数组转化，有兴趣的朋友可以自己查查资料，其实本质上的用法都差不多，总结起来就是：三点放在形参或者等号左边为rest运算符;放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。 到此这篇关于ES6扩展运算符的理解与使用场景的文章就介绍到这了,更多相关ES6扩展运算符内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
基于Vue结合ElementUI的换肤解决方案
Vue路由回退的完美解决方案（vue-route-manager） |
