ES6特性之：Spread操作符

Spread操作符(...)，也称作展开操作符，作用是将可迭代的(Iterable)对象进行展开。

比如有2个数组，我们要将其中一个数组中所有元素插入到另一个数组中，通过Spread操作符，就可以这样进行：

var fruits = ["apple", "orange", "peach"];
var shoppingList = ["t-shirt", ...fruits, "egg"]; // shoppingList的值：["t-shirt", "apple", "organe", "peach", "egg"]

我们看到，通过在shoppingList中使用Spread操作符对fruits数组进行展开，就可以轻松的将fruits数组元素变成shoppingList中的数组元素，非常简单。如果不用Spread操作符，我们也可以通过循环数组并建新数组的方式来实现，但是明显会复杂的多。

另一个常见的场景是在函数调用传参的时候：

function testFunc(x, y, z) {console.log(x, y, z);
}var args = [10, 15, 20];testFunc(args);  //不正确
testFunc(...args); //正确

我们的testFunc()是一个接受3个参数的函数，而变量args是一个包含了3个元素的数组。如果直接把args作为参数传入testFunc()，肯定是不符合这个函数的设计逻辑的。在这种情况下，使用Spread操作符，就可以把数组中的元素展开并填充这个函数的参数列表，达到理想中的效果。

最后，我们在一开始提到，Spread操作符可以展开Iterable的对象，这样的话，除了数组之外，所有实现了Symbol.iterator的对象，如：Set, Map和Generator等等，都可以使用Spread操作符。

var map = new Map();
map.set("a", 1);
map.set("b", 2);
var arr1 = [...map];  //[["a", 1], ["b", 2]]var set = new Set();
set.add(1);
set.add(2);
set.add(1);
set.add(3);
var arr2 = [...set];  //[1, 2, 3]function *myGen() {yield "hello";yield "world";
}
var arr2 = [...myGen()]; //["hello", "world"]

ES6特性之：Spread操作符相关推荐

JavaScript ES6 特性
JavaScript ES6 特性下面的代码主要是描述以下内容: let是块区作用域,不会变量提升.var也是块做作用域,但是会变量提升. -展开操作符作用于数组. 数组解构赋值. 对象增强. -展 ...
9个超级实用的 ES6 特性,超级实用哦！
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...
一些当前 Node.js 中最流行 ES6 特性的 benchmark （V8 / Chakra）
前言项目 github 地址:https://github.com/DavidCai1993/ES6-benchmark 如果有想要增加的特性 benchmark ,欢迎更新benchmarks/ ...
最常用的ES6特性(转)
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
第四节：教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
javascript es6 特性简介
目录 1.变量声明 const 和 let 2.字符串 3.函数 4.拓展的对象功能 5.更方便的数据访问--解构 6.Spread Operator 展开运算符 7.import 和 export ...
es6 数组合并_九个前端开发必学超级实用的 ES6 特性
1.展开操作符顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...
【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录
使用场景:发现项目有些旧代码多层调用某个对象的属性,由于目标对象可能没那个属性,就导致报错,之前研究es6新特性时发现可以用?.来判断某个对象是否有某个属性来赋值. 测试源代码: var a = {n ...
Nodejs 4.0 ES6特性
简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 ...

ES6特性之：Spread操作符

ES6特性之：Spread操作符相关推荐

最新文章

热门文章