飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

JS函数:Rest 参数与 Spread 语法

时间:2021-11-29  作者:匿名  

Rest 参数与 Spread 语法

在 JavaScript 中,很多内建函数都支持传入任意数量的参数。

例如:

Math.max(arg1, arg2, ..., argN) —— 返回入参中的最大值。

Object.assign(dest, src1, ..., srcN) —— 依次将属性从 src1..N 复制到 dest。

……等。

在本章中,我们将学习如何编程实现支持函数可传入任意数量的参数。以及,如何将数组作为参数传递给这类函数。

Rest 参数

在 JavaScript 中可以使用任意数量的参数调用函数。

function sum(a, b) {
  return a + b;
}
alert( sum(1, 2, 3, 4, 5) );

虽然这里不会因为传入“过多”的参数而报错。但是当然,在结果中只有前两个参数被计算进去了。

Rest 参数可以通过使用三个点 ... 并在后面跟着包含剩余参数的数组名称,意思是“将剩余参数收集到一个数组中”。

Rest 参数必须放到参数列表的末尾,Rest之前可以有参数,但是Rest的后面不能再有参数,否则会报错。

例如,我们需要把所有的参数都放到数组 args 中:

function sumAll(...args) { // 数组名为 args
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}
alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

上面的函数从名字上我们就已经知道它要干什么了,sumAll也就是相加所有的意思,我们使用了一个for循环,遍历了所有输入参数数组args的值,并把它们加起来,其中sum += arg就是sum = sum + arg的意思。

下面的例子把前两个参数定义为变量,并把剩余的参数收集到 titles 数组中:

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar
  // 剩余的参数被放入 titles 数组中
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}
showName("Julius", "Caesar", "Consul", "Imperator");

“arguments” 变量

有一个名为 arguments 的特殊的类数组对象,该对象按参数索引包含所有参数。

例如:

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );
  // 它是可遍历的
  // for(let arg of arguments) alert(arg);
}
// 依次显示:2,Julius,Caesar
showName("Julius", "Caesar");
// 依次显示:1,Ilya,undefined(没有第二个参数)
showName("Ilya");

尽管 arguments 是一个类数组,也是可迭代对象,但它并不是数组,它不支持数组方法,无法调用 arguments.map(...) 等方法。

arguments会获取所有输入的参数,不能像rest 参数那样只截取一部分参数,自己定义一部分参数。

值得注意的是,箭头函数没有自身的 this也没有特殊的 arguments 对象。

Spread 语法

我们刚刚看到了如何从参数列表中获取数组,那我们要做相反的事怎么办?我们如何将一个数组传入单个参数中呢?

例如,内建函数 Math.max 会返回参数中最大的值:

alert( Math.max(3, 5, 1) ); // 5

假如我们有一个数组 [3, 5, 1],我们该如何用它调用 Math.max 呢?

如果手动去设置的话就会是:

let arg = [3, 5, 1];
Math.max(arg[0], arg[1], arg[2])

显然这不是我们想要的,这样不美观也不方便维护。这时我们就可以使用Spread 语法!它看起来和 rest 参数很像,也使用 ...,但是二者的用途完全相反。

let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5(spread 语法把数组转换为参数列表)

多个数组也同样可以使用

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(...arr1, ...arr2) ); // 8

我们还可以将 spread 语法与常规值结合使用:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

我们还可以使用 spread 语法来合并数组:

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15(0,然后是 arr,然后是 2,然后是 arr2)
搜你所爱
JavaScript基础教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。