各位老铁，大家好！今天咱们来聊聊 JavaScript 里一个有点意思，但又经常让人摸不着头脑的东西：arguments 对象。别怕，我会用最通俗易懂的方式，把这个家伙扒个精光，让你们以后再也不怕它了！
什么是 arguments 对象？
简单来说，arguments 对象就是一个类数组对象，它存在于每一个非箭头函数中（箭头函数不绑定 arguments）。它包含了函数被调用时传入的所有参数，无论你在函数定义时声明了多少个形参。
你可以把它想象成一个“秘密武器包”，当你的函数被调用时，JavaScript 引擎会自动把所有传进来的参数都塞到这个包里。
function myFunction(a, b) {
console.log(arguments); // 输出类似：[Arguments] { '0': 1, '1': 2 }
console.log(arguments[0]); // 输出：1
console.log(arguments[1]); // 输出：2
console.log(arguments.length); // 输出：2
}
myFunction(1, 2);
myFunction(1, 2, 3, 4); // 即使定义了两个形参，也能访问到额外的参数从上面的例子可以看出，arguments 对象长得有点像数组，你可以通过索引来访问它的元素，也可以使用 length 属性来获取参数的个数。但是，请注意，它不是真正的数组。 这就是为什么我们称它为“类数组对象”。
arguments 对象的特性
- 类数组性： 具有数字索引和
length属性，可以像数组一样访问元素。 - 非数组性： 不能直接使用数组的方法，比如
push,pop,slice等。 - 动态性：
arguments对象的值会随着形参的值的变化而变化（在非严格模式下）。
function myFunction(a, b) {
console.log("Before modification:");
console.log("a:", a);
console.log("arguments[0]:", arguments[0]);
a = 10; // 修改形参 a 的值
console.log("After modification:");
console.log("a:", a);
console.log("arguments[0]:", arguments[0]);
}
myFunction(1, 2);在非严格模式下，如果你修改了形参的值，arguments 对象中对应索引的值也会被修改；反之亦然。这就是所谓的“映射”关系。 但是在严格模式下，这种映射关系会被打破。
function myFunction(a, b) {
"use strict"; // 开启严格模式
console.log("Before modification:");
console.log("a:", a);
console.log("arguments[0]:", arguments[0]);
a = 10; // 修改形参 a 的值
console.log("After modification:");
console.log("a:", a);
console.log("arguments[0]:", arguments[0]);
}
myFunction(1, 2);在严格模式下，修改形参的值不会影响 arguments 对象，反之亦然。
arguments.callee(已废弃)： 指向当前正在执行的函数本身。这个属性已经被废弃，不建议使用。arguments.caller(已废弃)： 指向调用当前函数的函数。这个属性也被废弃，不建议使用。
为什么要将 arguments 对象转换为真正的数组？
因为 arguments 对象不是真正的数组，所以不能直接使用数组的方法。 如果你想对参数进行一些数组操作，比如排序、过滤、映射等，就需要先将 arguments 对象转换为真正的数组。
如何将 arguments 对象转换为真正的数组？
有多种方法可以将 arguments 对象转换为真正的数组：
1. 使用 Array.prototype.slice.call(arguments)
这是最经典，也是最常用的方法。
function myFunction(a, b) {
var args = Array.prototype.slice.call(arguments);
console.log(args); // 输出：[ 1, 2, 3, 4 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4);这种方法的原理是： Array.prototype.slice 方法可以从一个数组中提取一部分元素，并返回一个新的数组。 call 方法可以改变 this 的指向，将 Array.prototype.slice 方法的 this 指向 arguments 对象，从而将 arguments 对象转换为数组。
2. 使用 [].slice.call(arguments)
这种方法和第一种方法类似，只是将 Array.prototype 简写为 []。
function myFunction(a, b) {
var args = [].slice.call(arguments);
console.log(args); // 输出：[ 1, 2, 3, 4 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4);3. 使用 Array.from(arguments) (ES6)
这是 ES6 中新增的方法，可以将类数组对象或可迭代对象转换为真正的数组。
function myFunction(a, b) {
var args = Array.from(arguments);
console.log(args); // 输出：[ 1, 2, 3, 4 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4);这种方法更加简洁明了，是推荐使用的。
4. 使用展开运算符 ... (ES6)
这也是 ES6 中新增的特性，可以将可迭代对象展开为多个独立的元素。
function myFunction(a, b) {
var args = [...arguments];
console.log(args); // 输出：[ 1, 2, 3, 4 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4);这种方法也很简洁，而且可读性很高。
5. 手动循环赋值
这是一种比较原始的方法，通过循环遍历 arguments 对象，并将每个元素赋值给一个新的数组。
function myFunction(a, b) {
var args = [];
for (var i = 0; i < arguments.length; i++) {
args[i] = arguments[i];
}
console.log(args); // 输出：[ 1, 2, 3, 4 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4);虽然这种方法也能实现转换，但是代码比较冗长，不建议使用。
各种方法的比较
| 方法 | 优点 | 缺点 | 兼容性 |
|---|---|---|---|
Array.prototype.slice.call(arguments) |
兼容性好，历史悠久 | 代码稍显冗长 | IE6+ |
[].slice.call(arguments) |
兼容性好，代码稍简洁 | 代码稍显冗长 | IE6+ |
Array.from(arguments) |
简洁明了，可读性高 | ES6 新增，兼容性稍差 | ES6+ |
[...arguments] |
简洁明了，可读性高 | ES6 新增，兼容性稍差 | ES6+ |
| 手动循环赋值 | 理解简单 | 代码冗长，效率较低，不推荐使用 | IE6+ |
arguments 对象的使用场景
虽然现在有了 ES6 的 rest 参数（后面会讲到），arguments 对象的使用场景已经大大减少，但它仍然有一些用武之地：
- 函数需要接收不定数量的参数： 当你不知道函数会被传入多少个参数时，可以使用
arguments对象来访问所有参数。 - 需要兼容旧版本的 JavaScript： 在一些旧的代码库中，可能仍然会使用
arguments对象。
ES6 的 rest 参数
ES6 引入了 rest 参数，它可以更方便地接收不定数量的参数，并且会将这些参数收集到一个真正的数组中。
function myFunction(a, b, ...args) {
console.log("a:", a);
console.log("b:", b);
console.log("args:", args); // 输出：[ 3, 4, 5 ] (一个真正的数组)
console.log(Array.isArray(args)); // 输出：true
}
myFunction(1, 2, 3, 4, 5);从上面的例子可以看出，rest 参数使用 ... 语法，可以将剩余的参数收集到一个名为 args 的数组中。 rest 参数必须是最后一个参数。
rest 参数 vs arguments 对象
| 特性 | rest 参数 | arguments 对象 |
|---|---|---|
| 类型 | 真正的数组 | 类数组对象 |
| 收集参数方式 | 将剩余参数收集到数组中 | 收集所有参数 |
| 位置 | 必须是最后一个参数 | 无限制 |
| 显式声明 | 需要显式声明 | 隐式存在于非箭头函数中 |
| 严格模式 | 无影响 | 在严格模式下，arguments 对象与形参的映射关系会被打破 |
总结
arguments对象是一个类数组对象，包含了函数被调用时传入的所有参数。arguments对象不是真正的数组，不能直接使用数组的方法。- 可以使用
Array.prototype.slice.call(arguments)、[].slice.call(arguments)、Array.from(arguments)、[...arguments]等方法将arguments对象转换为真正的数组。 - ES6 的 rest 参数可以更方便地接收不定数量的参数，并且会将这些参数收集到一个真正的数组中。
- 在现代 JavaScript 开发中，rest 参数通常比
arguments对象更受欢迎。
最佳实践
- 尽量使用 ES6 的 rest 参数来接收不定数量的参数。
- 如果必须使用
arguments对象，请尽快将其转换为真正的数组。 - 避免使用
arguments.callee和arguments.caller属性，因为它们已经被废弃。 - 在严格模式下，要注意
arguments对象与形参之间的映射关系。
举个栗子：模拟实现 Math.max 函数
Math.max 函数可以返回一组数中的最大值。我们可以使用 arguments 对象来模拟实现这个函数。
function myMax() {
if (arguments.length === 0) {
return -Infinity; // 如果没有参数，返回负无穷
}
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(myMax(1, 2, 3, 4, 5)); // 输出：5
console.log(myMax()); // 输出：-Infinity也可以使用 rest 参数来实现：
function myMax(...numbers) {
if (numbers.length === 0) {
return -Infinity;
}
let max = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
}
return max;
}
console.log(myMax(1, 2, 3, 4, 5)); // 输出：5
console.log(myMax()); // 输出：-Infinity或者更简洁的使用 reduce 方法：
function myMax(...numbers) {
if (numbers.length === 0) {
return -Infinity;
}
return numbers.reduce((max, current) => Math.max(max, current), -Infinity);
}
console.log(myMax(1, 2, 3, 4, 5)); // 输出：5
console.log(myMax()); // 输出：-Infinity总结的总结
arguments 对象是 JavaScript 中一个历史悠久，但又有点过时的特性。 虽然它仍然有一些用武之地，但在现代 JavaScript 开发中，rest 参数通常是更好的选择。 理解 arguments 对象的工作原理，可以帮助你更好地理解 JavaScript 的函数机制，以及如何编写更健壮、更易于维护的代码。
希望今天的讲座对大家有所帮助！ 记住，学习编程就像打怪升级，需要不断地学习和实践。 只要坚持下去，你也能成为一名编程高手！ 下课！