力扣 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属性。
开始学习官方题解
剩余参数
- 定义：剩余参数（…args)是一种允许函数接受不定数量参数的功能。
- 注意点：剩余参数仅收集传递给函数的附加参数，不包括通过命名参数或默认参数值传递的参数。如果没有传递额外参数，剩余参数也将是一个空数组。
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没有通过剩余参数传递。并且没有传递额外参数，剩余参数是一个空数组。
- 剩余参数于拓展运算符的区别
剩余参数是打包，拓展运算符是拆开。
| 特性 | 剩余参数 ...args | 展开运算符 ...arr |
|---|---|---|
| 出现位置 | 函数定义的形参里 | 函数调用、数组字面量、对象字面量中 |
| 作用方向 | 收集 → 把多个值打包成数组 | 展开 → 把数组/可迭代对象拆开成独立元素 |
| 返回结果 | 总是一个数组 | 展开成一个个元素（不是数组） |
| 例子 | function f(...args) {} | f(...[1,2,3]) |
举个例子
// 剩余参数：收集
function demo(a, b, ...rest) {console.log(a); // 1console.log(b); // 2console.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
};