【JavaScript】arguments对象

arguments对象是什么

arguments 是一个对应于传递给函数的参数的类数组对象

简而言之，arguments对象是用来接收参数的

arguments对象的特性

1. 和数组类似
   接收参数的是以数组的形式

• 拥有length属性
  （用来计算接收了多少个参数）
• 索引参数元素
  （如：arguments[0]、arguments[1]、arguments[1] = 'new value';等）

2. 但不属于数组

• 没有数组的方法，如pop()、push()等
• 本质上是对象而非数组，_proto_属性是Object

console.log(typeof arguments);    // typeof参数返回 'object'

console.log(typeof arguments[0]); // 还可以使用索引确定单个参数的类型

3. 可以被转换成一个真正的数组

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];

// 不常用
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

arguments对象的属性

arguments.callee

指向 调用当前函数的函数 / 参数所属的当前执行的函数

function fn() {
    var a = 'AAA';    
    console.log(arguments.callee);    
}

fn();
// 打印当前整个函数
// ƒ fn() {
//  var a = 'AAA';    
//  console.log(arguments.callee);    
//  }

arguments.length

传递给函数的参数数量

arguments[@@iterator]

返回一个新的Array 迭代器对象，该对象包含参数中每个索引的值

注意：

在严格模式下，arguments对象已与过往不同。arguments[@@iterator]不再与函数的实际形参之间共享，同时caller属性也被移除。

arguments对象的使用

1. 遍历参数求和

function add() {
    var sum =0,
        len = arguments.length;
    for(var i=0; i<len; i++){
        sum += arguments[i];
    }
    return sum;
}
add()                           // 0
add(1)                          // 1
add(1,2,3,4);                   // 10

2.定义连接字符串的函数

// 连接字符串：唯一正式声明的参数是一个字符串，该参数指定一个字符作为衔接点来连接字符串
function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}
// 可以传递任意数量的参数到该函数，并使用每个参数作为列表中的项创建列表
myConcat(", ", "red", "orange", "blue"); // returns "red, orange, blue"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // returns "elephant; giraffe; lion; cheetah"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); // returns "sage. basil. oregano. pepper. parsley"

3. 定义创建HTML列表的方法

// 通过一个字符串来创建HTML列表：唯一正式声明了的参数是一个字符。当该参数为 "u" 时，创建一个无序列表 (项目列表)；当该参数为 "o" 时，则创建一个有序列表 (编号列表)
function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list
  return result;
}

// 可以传递任意数量的参数到该函数，并将每个参数作为一个项添加到指定类型的列表中
var listHTML = list("u", "One", "Two", "Three");

/* listHTML is:

"<ul><li>One</li><li>Two</li><li>Three</li></ul>"

*/

与剩余参数、默认参数和解构赋值参数结合使用

function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]

• 严格模式：剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为

• 非严格模式

1. 函数没有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值会跟踪参数的值（反之亦然）

// 更新了arguments[0] 也更新了a
function func(a) {
  arguments[0] = 99;   
  console.log(a);
}
func(10); // 99

// 更新了a 也更新了arguments[0]
function func(a) {
  a = 99;              
  console.log(arguments[0]);
}
func(10); // 99

2. 函数有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值不会跟踪参数的值（反之亦然）。相反, arguments反映了调用时提供的参数

// 更新了arguments[0] 但不会更新a
function func(a = 55) {
  arguments[0] = 99; 
  console.log(a);
}
func(10); // 10

// 更新了a 但不会更新 arguments[0]
function func(a = 55) {
  a = 99; 
  console.log(arguments[0]);
}
func(10); // 10

function func(a = 55) {
  console.log(arguments[0]);
}
func(); // undefined