ES6:spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法

上一篇文章中,我介绍了一些关于 ES6 解构方法的新特性。

本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread syntax(扩展语法)。

spread syntax 实际上非常简单,假设你的可遍历对象中有一些元素(如数组),你想把这些元素应用于另一个新的数组或者一个函数调用。通常的做法,你会从索引开始,利用循环访问每个元素。但是通过 spread syntax 这个事情就变的很简单了,你可以使用三个点作为前缀,即 ... 应用于可遍历对象上,问题就解决了。

为了更直观,我们一起看几个用例就明白了。

复制一个数组

假设有一个数组名字是 names。

如何把 names 里面的元素复制到一个新数组中呢?

传统的做法是用循环来实现,但是使用 spread syntax,解决方法很简洁。

可以看到比循环方法简单的多。

这里值得一提的是,这里复制的是引用。也就是说如果一个数组中的元素发生改变,那么另一个数组中的元素也相应地发生改变。

连接数组

spread syntax 另一个用法是连接数组,做法是把你想要扩展的数组放到一起。如下:

把独立变量扩展到一起

除了把元素复制到一个新数组中,还可以把独立变量一起扩展到某数组中。下面举个例子,把第一个元素和 names 数组扩展到一起。

还可以把独立变量放到 names 的后面。

在函数调用中使用 spread syntax

你已经掌握了如何在数组中运用 spread syntax,现在我们来看一下如何在函数调用中使用。

假设我们有个简单函数 —— printer —— 接受三个参数,并且打印出来。

依照 printer 函数定义,可以使用 spread syntax 把数组元素应用于 printer 函数。

和数组的用法一样,可以把独立变量一起输出。我们添加 ‘Emily’ 作为 printer 函数的第一个参数,后面跟着 ...names

如果传递给函数过多的参数,那么超过函数参数个数的元素将会被忽略掉。

Bonus:spread syntax 应用于对象字面值!

这个特征是基于 ECMAScript 的附加特征。但是目前使用它需要 babel 插件,叫做: babel-plugin-transform-object-rest-spread

通过 spread syntax 这种变体,你可以把两个对象扩展到一起。假设你有两个对象包含了个人信息 —— nameAndAgeabout

接下来用 spread syntax 把两个对象合并到一起。

OK,这篇文章介绍了 spread syntax 的用法。后面我们会继续介绍 ES6 新特性,敬请继续关注!

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部