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"]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

用原型链的方式写一个类和子类

1432
来自专栏吴伟祥

Spring4的新特性 Bean Validation1.1

613
来自专栏iOS开发随笔

iOS Swift基础语法(二)

1133
来自专栏Java成神之路

PHP中 对象自动调用的方法:__set()、__get()、__tostring()

 (1)__get($property_name):获取私有属性$name值时,此对象会自动调用该方法,将属性name值传给参数$property_name,通...

1044
来自专栏从零开始学 Web 前端

从零开始学 Web 之 ES6(五)ES6基础语法三

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

872
来自专栏玄魂工作室

《改善C程序代码的125个建议》-防止整数类型产生回绕与溢出

以下内容摘抄自《改善C程序代码的125个建议》: 建议2:防止整数类型产生回绕与溢出 到C99为止,C语言为我们提供了12个相关的数据类型关键字来表达各种数据...

2967
来自专栏技术博客

C#项目代码规范

   小菜就是小菜,几个人搞出来的项目,让公司大牛稍微看了下,最后送出了惨不忍睹四个字。命名各种各样,五花八门,大写英文、小写英文、大写拼音、小写拼音、英文和拼...

1394
来自专栏MasiMaro 的技术博文

C函数原理

C语言作为面向过程的语言,函数是其中最重要的部分,同时函数也是C种的一个难点,这篇文章希望通过汇编的方式说明函数的实现原理。

1183
来自专栏LuckQI

Redis初识~List命令

1082
来自专栏爱撒谎的男孩

Struts2之类型转换器

3625

扫码关注云+社区

领取腾讯云代金券