力扣 30 天 JavaScript 挑战 第37天 第九题笔记 知识点： 剩余参数，拓展运算符

开始答题

版本一

/**
 * @param {...(null|boolean|number|string|Array|Object)} args
 * @return {number}
 */
var argumentsLength = function(...args) {
    return args.length
};

/**
 * argumentsLength(1, 2, 3); // 3
 */

提交通过了 ，我最开始遇到这道题的时候，还想在函数里面如何拿到传递的多个参数，想一想只能是args了，试了一下，成功了。

问了ai为什么会成功，...args是es6写法，通过这个写法将传递的多个参数组合成了一个数组arg。

如果不用这个写法，还可以使用还传统写法：使用内置的 arguments 对象（不是数组，而是一个类数组对象）。如下代码

function argumentsLength() {
 return arguments.length;
}
argumentsLength(1，2，3)

拓展了类数组，剩余参数（...args）知识点。

最开始看到这个函数的时候，我还有疑问，也没有声明arguments，咋可以使用arguments.length呢。继续问ai。

ai回答：在非箭头函数中，js引擎会在函数执行时，自动注入一个类数组arguments但是arguments不是全局变量，也不是我们声明的。可以理解为

 function argumentsLength() {
  // 引擎偷偷帮你加上：
  // var arguments = {0: 1, 1: 2, 2: 3, length: 3}
}

这里你可能有些好奇。这里需要注意的一点是arguments虽然说是类数组，但本质上是一个对象。所以不能使用map方法。但可以使用length方法，因为js引擎为我们自动注入arguments的时候给他加了length属性。

开始学习官方题解

剩余参数

1. 定义：剩余参数（...args)是一种允许函数接受不定数量参数的功能。
2. 注意点：剩余参数仅收集传递给函数的附加参数，不包括通过命名参数或默认参数值传递的参数。如果没有传递额外参数，剩余参数也将是一个空数组。

function demo(x, y = 100, ...args) {
  console.log("x:", x);
  console.log("y:", y);
  console.log("args:", args);
}

demo(1, 2, 3, 4, 5);
//输出为
//x: 1
//y: 2
//args: [3, 4, 5]
//这里的命名参数x，y没有通过剩余参数传递。
demo(1);
//输出为
//x: 1
//y: 100
//args: []
//这里的命名参数x，默认参数y没有通过剩余参数传递。并且没有传递额外参数，剩余参数是一个空数组。

3. 剩余参数于拓展运算符的区别
   剩余参数是打包，拓展运算符是拆开。

特性	剩余参数 ...args	展开运算符 ...arr
出现位置	函数定义的形参里	函数调用、数组字面量、对象字面量中
作用方向	收集 → 把多个值打包成数组	展开 → 把数组/可迭代对象拆开成独立元素
返回结果	总是一个数组	展开成一个个元素（不是数组）
例子	function f(...args) {}	f(...[1,2,3])

举个例子

// 剩余参数：收集
function demo(a, b, ...rest) {
  console.log(a);    // 1
  console.log(b);    // 2
  console.log(rest); // [3, 4, 5]
}
demo(1, 2, 3, 4, 5);

// 展开运算符：展开
const nums = [3, 4, 5];
demo(1, 2, ...nums);
// 相当于 demo(1, 2, 3, 4, 5)

官方解法

多了一个通过使用剩余参数

var argumentsLength = function(...args) {
    return args.length
};