欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-27 17:19:28
展开语法用"..."进行表示,展开语法将可迭代的对象拆分成独立的值(语法层面展开)。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进行介绍:...

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

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

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"

小节

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

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