ES6 展开运算符 Spread operator
2016-07-01 17:16
585 查看
展开运算符
展开运算符(spread)是三个点(…),可以将数组转为用逗号分隔的参数序列。如同rest参数的逆运算。语法
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>...]
用于数组字面量:
[...iterableObj, 4, 5, 6]
用于函数调用:
myFunction(...iterableObj);
展开运算符主要用于函数调用,如下:
function func(x, y, z, a, b) { console.log(x, y, z, a, b); } var args = [1, 2]; func(0, ...args, 3, ...[4]); // 0 1 2 3 4
注意:任何实现了Iterator接口的对象,都可以用展开运算符转为真正的数组。
用法
替换apply方法展开运算符可以展开数组,因此可以替换apply方法,将数组转为函数的参数。
function func(x, y, z) { } var args = [0, 1, 2]; // ES5写法 func.apply(null, args); // ES6写法 func(...args);
更强大的数组字面量操作
如果由一个已知数组创建一个新数组,数组字面量语法则不足以达到目的,必须结合push, splice, concat等方法。而展开运算符可以轻松实现这个目标:
var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
展开运算符可以用于任何数组字面量,并可以多次使用。
适用new
JS的函数只能返回一个值,如果返回多个值就需要用到数组或对象。展开运算符提供了一种处理这种返回值的有效方法
替换push方法
push方法常用于将一个数组加入到另一个数组的结尾。在ES5中是这样做的:
var arr1 = [0, 1, 2], arr2 = [3, 4, 5]; // Append all items in arr2 onto arr1 Array.prototype.push.apply(arr1, arr2);
push方法的参数不能是数组,所以只好通过apply方法变通使用push方法。有了展开运算符,就可以像下面直接将数组传入push方法。
var arr1 = [0, 1, 2], arr2 = [3, 4, 5]; arr1.push(...arr2); arr1 // [0, 1, 2, 3, 4, 5]
上面可以将返回的数组使用展开运算直接传入构造函数。
只用于可迭代的变量
下面的用法就会报错:
var obj = {key1: 'value1'}; var args = [...obj]; // 报错 function func(x) { console.log(x); } func(...obj); // 报错
相关文章推荐
- ES6 走马观花(ECMAScript2015 新特性)
- React and React with ES6
- fetch 设置 HTTP 注意事项
- 跟我学习javascript的最新标准ES6
- ES6中非常实用的新特性介绍
- 深入浅析react native es6语法
- JavaScript学习笔记之ES6数组方法
- ES6的新特性概览
- ES6中如何使用Set和WeakSet
- JavaScript ES6的新特性使用新方法定义Class
- React 相关文档
- 借助Babel 6平台使用ES6新特性
- ECMAScript 6 let和const命令
- ES6中Generator理解
- 移动开发实用手册
- JavaScript学习笔记之ES6数组方法
- Spread Studio for .NET 7发布了,最近有个Spread 7线上发布会
- ES6语法篇(其一)