如何在 JavaScript 的 .apply() 上正确使用随机数组？ [复制]

Question

我很明白在JS上使用.apply()方法的基本原理。

function sayHi(x, y, z) {
  console.log("I'm " + this.name + ", My choices are" + x + "," + y + "," + z);
}
var personA = {
    name : "Albert"
};
var personB = {
    name : "Bob"
};

var name = "Cindy";
var options = [" a", " b", " c"];

sayHi.apply(personA, options); // "I'm Albert, My choices are a, b, c"
sayHi.apply(personB, [" d", " e", " f"]); // "I'm Bob, My choices are d, e, f" 

sn-p 以上是一个理想情况，您只想在sayHi() 函数中使用一定数量的数组元素，然后传递确切的sayHi() 函数所需的相同数量的数据（数组）。

然而，有时您需要利用给定数据集中的所有数组元素，其中数据也可能变化量。因此，sayHi() 函数不仅接受包含 3 个元素的数组，还可以接受包含 4、5、6 或更多元素的数组，不仅接受它，还利用传递的所有元素，如下所示：

function sayHi(....) {
  // Accept any array with varying amount of elements, and using it
  for (...) {
    // A loop that will go through each element in given array
  }
}
var personA = {
    name : "Albert"
};
var personB = {
    name : "Bob"
};

var name = "Cindy";
var options3 = [" a", " b", " c"];
var options4 = [" a", " b", " c", " d"];
var options5 = [" a", " b", " c", " d", " e"];
// and so on

sayHi.apply(personA, options3);
sayHi.apply(personA, options4);
sayHi.apply(personA, options5);

到目前为止，我还没有找到方法来做到这一点，所以我需要你的帮助来向我解释。

谢谢，

Answer 1

您可以使用 3 种不同的方法。

首先，您可以使用arguments 类数组对象代替x、y 和z。

function sayHi() {
  for(var choice in arguments){
    // Do stuff.
  }
}

function sayHi() {
  // Note that arguments is not an array but only an array-like object.
  var choicesStr = "My choices are " + Array.prototype.join.call(arguments, ", ");
  console.log("I'm " + this.name + ", " + choicesStr);
}
var personA = {
    name : "Albert"
};
var personB = {
    name : "Bob"
};

var name = "Cindy";
var options = ["a", "b", "c"];

sayHi.apply(personA, options); // "I'm Albert, My choices are a, b, c"
sayHi.apply(personB, ["d", "e", "f", "i", "j"]); // "I'm Bob, My choices are d, e, f"

这种方法的缺点是arguments 将包含所有参数。如果您需要提供应区别对待的第一个参数，则必须先提取它。

其次，您可以使用ES6 rest parameter 功能。

function sayHi(...choices) {
  for(var choice in choices){
    // Do stuff.
  }
}

function sayHi(...choices) {
  // Note that unlike arguments, the rest parameter is a real array.
  var choicesStr = "My choices are " + choices.join(", ");
  console.log("I'm " + this.name + ", " + choicesStr);
}
var personA = {
    name : "Albert"
};
var personB = {
    name : "Bob"
};

var name = "Cindy";
var options = ["a", "b", "c"];

sayHi.apply(personA, options); // "I'm Albert, My choices are a, b, c"
sayHi.apply(personB, ["d", " e", " f", "i", "j"]); // "I'm Bob, My choices are d, e, f"

优点是可以方便的提供航向参数，单独考虑。

function sayHi(firstArg, ...choices) {
  for(var choice in choices){
    // Do stuff.
  }
}

这种方法的缺点是its support is not yet widespread。如果这是一个问题，您可以使用像 Babel 这样的转译器。

第三，你可以用call而不是apply传递一个数组

function sayHi(choices) {
  var choicesStr = "My choices are " + choices.join(", ");
  console.log("I'm " + this.name + ", " + choicesStr);
}
var personA = {
    name : "Albert"
};
var personB = {
    name : "Bob"
};

var name = "Cindy";
var options = ["a", "b", "c"];

sayHi.call(personA, options); // "I'm Albert, My choices are a, b, c"
sayHi.call(personB, ["d", " e", "f", "i", "j"]); // "I'm Bob, My choices are d, e, f"

Answer 2

您想使用函数的arguments 对象，它为您提供了一个包含所有传入参数的数组，无论是否命名。

function sayHi(){  
  for (var i=0;i<arguments.length;++i){
    console.log( "Hi "+arguments[i] );  
  }
}

var parents = ["Mom","Dad"];
var children= ["Suzie","Jacob","Jerome","Sandra"];
sayHi.apply(this,parents);
sayHi.apply(this,children);

但是请注意，如果您要将对象数组传递给函数，您也可以，您知道，只传递数组，而不是跳过apply 和arguments：

function sayHi(people){
  people.forEach(function(name){
    console.log( "Hi "+name );  
  });
}

var parents = ["Mom","Dad"];
var children= ["Suzie","Jacob","Jerome","Sandra"];
sayHi(parents);
sayHi(children);