ES6基础之展开语法(Spread syntax)

更新时间：2019年02月21日 10:35:28 作者：前端达人

这篇文章主要介绍了ES6基础之展开语法(Spread syntax)，主要介绍了扩展语法的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

展开语法用"..."进行表示，展开语法将可迭代的对象拆分成独立的值（语法层面展开）。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进行介绍：

函数传参中的应用
数组的相关应用
剩余参数的应用
函数传参中的应用

ES6之前，如果我们希望将数组作为参数分别传递给函数中的参数，我们可以使用Function的apply()方法。如下段代码所示：

function myFunction(a, b) {
 return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5”

从上述代码，apply方法接受一个数组，将它们分拆成单独参数传递函数进行调用。

ES6的展开语法能让我们以更简洁的方式进行调用，如下段代码所示：

function myFunction(a, b) {
  return a + b; 
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5”

代码运行期间，JavaScript解释器调用myFunction之前，将会用1,4表达式替换...运算符:

let result = myFunction(...data);

上述代码将会进行如下转换：

let result = myFunction(1,4);

替换后，函数中的代码将会继续执行。

数组的相关应用

数组的合并

展开语法可将数组添加到另外一个数组中，成为其中的一部分。

let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7”

代码运行期间，如下代码：

let array2 = [1, ...array1, 5, 6, 7];

上述代码将会替换成如下代码：

let array2 = [1, 2, 3, 4, 5, 6, 7];

在push方法中的运用

有时候，我们需要将一个数组的内容追加到另一个数组中，ES6之前我们可以这么做，如下段代码所示：

var array1 = [2,3,4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4”

ES6的展开语法能以更简洁的形式实现，如下段代码所示：

let array1 = [2,3,4];
let array2=[1];
array2.push(...array1);
console.log(array2); //Output "1, 2, 3, 4”

代码运行期间，如下代码：

array2.push(...array1);

上述代码将会替换成如下代码:

array2.push(2, 3, 4);

传递多个数组参数

我们可以使用展开语法传递多个数组进行参数传递，如下段代码所示：

let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
 return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15”

剩余参数的应用

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数，我们可以使用展开语法...进行获取。

ES6之前，我们可以这样获取剩余参数，如下段代码所示：

function myFunction(a, b) {
  const args = Array.prototype.slice.call(arguments, myFunction.length);
  console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5”

ES6中，上述代码我们可以这样改下，如下段代码所示：

function myFunction(a, b, ...args) {
  console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);

是不是很简单，有个我们需要注意的事，一旦函数中的参数第一个参数使用剩余参数，就不能声明第二个非剩余参数，否则将会抛出错误。例如下段代码所示:

function fn(...rest,foo) {} 
//Output "SyntaxError: Rest parameter must be last formal parameter"

小节

今天的内容就到这里，展开语法是不是特别的酷啊，在日后的开发中，我们尽量使用新的语法糖替代旧的写法。让我们代码看起来更加干净、整洁、易懂。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

javascript闭包的理解
这篇文章主要介绍了js闭包的相关知识，闭包是Javascript的一个难点，但也是一个很重要的知识点,需要的朋友可以参考下
2015-04-04
JavaScript中json对象和string对象之间相互转化
json对象和string对象之间的转化已经成为了大家耳熟能详的话题，本人今天就多啰嗦一些他们之间的故事，如有不对之处，还请各位海涵呢？不多说了直切主题
2012-12-12
微信小程序日期选择器实例代码
本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
这篇文章主要为大家详细介绍了js实现ctrl+v粘贴上传图片，兼容chrome，firefox，ie11，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03
javascript从image转换为base64位编码的String
选择webview把image以base64位编码的方式传给本地应用，就不需要再取一次图片文件了，从而提高了速度
2014-07-07
微信小程序绑定手机号获取验证码功能
这篇文章主要介绍了微信小程序绑定手机号获取验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
JavaSctit 利用FileReader和滤镜上传图片预览功能
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件内容，使用 File或 Blob对象指定要读取的文件或数据。下面通过本文给大家分享JavaSctit 利用FileReader和滤镜上传图片预览功能，需要的朋友参考下吧
2017-09-09
p5.js绘制旋转的正方形
这篇文章主要为大家详细介绍了p5.js绘制旋转的正方形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JS读取cookies信息(记录用户名)
很多网站、博客把网页生成html静态页面了，以利于搜索引擎的索引排名，减轻服务器负担。静态页面由于其稳定快速更快，给用户及站长带来了方便。但评论后如何记住用户的信息呢
2012-01-01
JS 异步遍历的实现方法
本文主要介绍了JS 异步遍历的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04