JS中函数参数传递方法

动态函数参数方法(arguments 和剩余参数)

arguments 对象

arguments 对象是 JavaScript 函数内部的一个局部变量，它是一个类数组对象（并不是数组对象），包含了函数被调用时传递的所有参数。

特点：

• 类数组对象： arguments 对象并非真正的数组，它有一个 length 属性和类数组对象的索引属性，但它不具备数组的所有方法。

• 动态性： arguments 对象具有动态性，即它会随着函数的调用而变化，包含调用时传递的参数。

• 不受函数签名限制： arguments 允许你在函数内部获取所有传递的参数，即使这些参数并没有在函数的参数列表中显式地声明。

function exampleFunction(arg1, arg2) {
  console.log(arguments.length);  // 输出参数的个数
  console.log(arguments[0]);      // 输出第一个参数的值
  console.log(arguments[1]);      // 输出第二个参数的值
}
exampleFunction('foo', 'bar', 'baz');// 输出：3 'foo''bar'

剩余参数

剩余参数和 arguments对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性（如callee属性）。

// 在调用参数之前，可以使用将“arguments”转换为普通数组
function f(a, b) {
  var normalArray = Array.prototype.slice.call(arguments);
  // -- or --
  var normalArray = [].slice.call(arguments);
  // -- or --
  var normalArray = Array.from(arguments);
  var first = normalArray.shift(); // 获取到第一个argument
  var first = arguments.shift(); // ERROR (arguments is not a normal array)
}
// 现在我们可以便捷的使用剩余参数
function f(...args) {
  var normalArray = args;
  var first = normalArray.shift(); // OK, gives the first argument
}

解构赋值语法

function example({data, tag, datakey, selector}) {
  console.log(data, tag, datakey, selector);
}
const obj = { data: 'value', tag: 'div', datakey: 'key', selector: '.example' };
example(obj);

常规参数传递

function example(data, tag, datakey, selector) {
  console.log(data, tag, datakey, selector);
}
example('value', 'div', 'key', '.example');

总结：如果希望传递的参数是一个对象，并且你想在函数内部直接使用对象属性，那么解构赋值语法会更方便。如果你只关心每个参数的值而不涉及对象，那么常规参数传递方式就足够了。

参考资料：
1、arguments 对象： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
2、剩余参数：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters