js函数中类数组对象arguments介绍

arguments对象是JavaScript中每个函数内部都自带的一个局部类数组对象。它包含了传递给函数的所有参数，允许我们访问函数调用时传递的参数列表。即使在没有为函数显式定义参数时，arguments对象仍然会存在，并且能够捕获所有传入的参数。

1、类数组对象

尽管 arguments 看起来像数组，但它并不是真正的数组。它没有数组的方法，如 push、pop 或 slice。如果需要使用这些方法，可以先将 arguments 转换为真正的数组。

function demo() {
  // 类数组对象是引用类型数据
  console.log(typeof arguments); // object
  console.log(arr instanceof Array); // false
  console.log(arguments.length); // 输出：3
  console.log(arguments);// 输出：{ '0': 1, '1': 2, '2': 3 }
  // 数组方法都不能使用
  // arguments.pop(); // TypeError: arguments.pop is not a function
}
demo(1, 2, 3);

function foo() {
  // arguments 对象转换为数组
  // 1. 使用 Array.from() 方法
  let arr1 = Array.from(arguments);
  console.log(arr1); // [ 1, 2, 3, 4, 5 ]
  console.log(typeof arr1); // object
  console.log(arr1 instanceof Array); // true
  console.log(arr1.pop()); // 5
  // 2. 使用 Array.prototype.slice.call() 方法
  let arr2 = Array.prototype.slice.call(arguments);
  console.log(arr2); // [ 1, 2, 3, 4， 5 ]
  console.log(typeof arr2); // object
  console.log(arr2 instanceof Array); // true
  console.log(arr2.pop()); // 5
  // 3. 使用扩展运算符
  let arr3 = [...arguments];
  console.log(arr3); // [ 1, 2, 3, 4, 5 ]
  console.log(typeof arr3); // object
  console.log(arr3 instanceof Array); // true
  console.log(arr3.pop()); // 5
 
}
foo(1, 2, 3, 4, 5);

2、索引访问

可以通过索引访问 arguments 中的元素，也可以通过 length 属性获取参数数量，就像在数组中一样。例如，arguments[0] 是第一个参数，arguments[1] 是第二个参数，依此类推。

function foo() {
  console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5
  console.log(arguments[3]); // 4
  console.log(arguments.length); // 5
}
foo(1, 2, 3, 4, 5);

3、 与命名参数的关系

在早期的JavaScript中，如果你修改了arguments对象的值，可能会同时影响到命名参数的值（反之亦然。但是在现代JavaScript（严格模式）中，这种行为已经不再推荐，且命名参数与arguments之间不再相互关联。

function modify(a, b) {
    arguments[0] = 99;
    console.log(a); // 非严格模式下：99；严格模式下：1
}

modify(1, 2);

4、与箭头函数的兼容性

在箭头函数中，arguments 对象不可用。箭头函数不绑定自己的 arguments 对象；如果在箭头函数内部使用 arguments，它将取得包含箭头函数的普通函数的 arguments 值。

function outerFunction() {
  let arrowFunction = () => {
    console.log('arguments inside arrow function:', arguments[0]); // arguments inside arrow function: 10
	// 可见输出了外部函数的arguments 值
  };
 
  arrowFunction(20);
}
 
outerFunction(10);

5、callee 属性

arguments.callee 是一个指向当前执行的函数的引用。这在匿名函数中特别有用，因为它允许函数引用自身。

// 阶乘函数
let factorial = function(n) {
    if (n <= 1) return 1;
    return n * arguments.callee(n - 1);
};
 //这里 arguments.callee 指向当前执行的函数（即匿名函数），用于递归计算阶乘。
console.log(factorial(5)); // 120

6、arguments对象的替代方案：Rest参数

随着ES6（ECMAScript 2015）的引入，JavaScript提供了更现代的方式来处理不定数量的参数——Rest参数（…args）。Rest参数是数组类型，拥有完整的数组方法，因此在处理参数时更加直观和便捷。

function sum(...args) {
    return args.reduce((total, current) => total + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出：10

与arguments对象相比，Rest参数不仅更简洁，还能与其他命名参数一起使用，这在编写函数时更加灵活。

function logMessage(message, ...args) {
    console.log(message, args);
}

logMessage('Values:', 1, 2, 3); // 输出：Values: [1, 2, 3]

所以建议优先使用rest参数来处理不定数量的参数，而非传统arguments，这不仅提高了代码的可读性，也使代码更加现代化和灵活。