【ES6基础】展开语法(Spread syntax)

明天是元宵佳节，在此小编提早祝你们元宵佳节快乐！今天小编在这里给你们继续介绍ES6的语法糖——展开语法(Spread syntax)。

展开语法用"..."进行表示，展开语法将可迭代的对象拆分红单个的值（语法层面展开）。

展开语法一般用于将可迭代的对象的值传递到函数的参数中。今天小编将从如下方面进行介绍：

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

本篇文章阅读时间预计10分钟

函数传参中的应用

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"复制代码

小节

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

E6相关文章

【ES6基础】let和做用域

【ES6基础】const介绍

【ES6基础】默认参数值

更多精彩内容，请微信关注”前端达人”公众号！