es6 扩展运算符 三个点(...)
2017-03-02 14:52
381 查看
es6 扩展运算符 三个点(…)
看了阮大大的文章,发现很多都有运算符【暂且叫运算符】三个点点。于是查了一下。其实看起来这样用也很6
干货如下
表面意思:
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
该运算符主要用于函数调用。
function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(...numbers) // 42
上面代码中,array.push(…items)和add(…numbers)这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。
替代数组的apply方法
由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。
ES5的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f(...args);
下面是扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。
// ES5的写法 Math.max.apply(null, [14, 3, 77]) // ES6的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77);
另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。
// ES5的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
上面代码的ES5写法中,push方法的参数不能是数组,所以只好通过apply方法变通使用push方法。有了扩展运算符,就可以直接将数组传入push方法。
合并数组
// ES5 [1, 2].concat(more) // ES6 [1, 2, ...more] var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
扩展运算符还可以将字符串转为真正的数组。
> [...'hello'] // [ "h", "e", "l", "l", "o" ] 6到飞起
【有一个重要的好处,那就是能够正确识别32位的Unicode字符。】
2实现了Iterator接口的对象
Iterator应该是es7元编程的概念,指 symbol Iterator。你理解为对象的迭代器就OK了,这里的对象指广泛对象,即
Object Array String 这种,它们都有对应的迭代接口—— for .. for.. in .. for … of
forEach , keys .. 这些
var nodeList = document.querySelectorAll('div'); var array = [...nodeList];
上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了Iterator接口。【Iterator百度翻译为迭代器。我也不吉道为什么】
对于那些没有部署Iterator接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // TypeError: Cannot spread non-iterable object. let arr = [...arrayLike];
上面代码中,arrayLike是一个类似数组的对象,但是没有部署Iterator接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。
相关文章推荐
- es6 学习小记 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- ES6 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- es6 扩展运算符 三个点(...)
- es6扩展运算符 三个点(...)
- es6中的解构赋值、扩展运算符和rest参数使用详解
- ES6,扩展运算符的用途
- es6 对象的扩展运算符
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- ES6-数组的扩展-扩展运算符
- ES6-rest参数和扩展运算符
- 如何理解es6语法的,对象前面加三个点(...) 对象的解构赋值和扩展
- ES6展开运算符(扩展运算符)的使用技巧
- 在es6中,对rest参数和扩展运算符的理解(待更新)
- ES6中的rest参数与扩展运算符详解
- 记录一下ES6扩展运算符(三点运算符)...的用法