在本教程中，您将了解从类数组或可迭代对象创建数组的 JavaScript Array.from() 方法。
JavaScript Array.from() 数组方法简介
要在 ES5 从类似数组的对象创建数组，您可以迭代所有数组元素并将它们中的每个元素添加到数组中，如下所示：
function arrayFromArgs() {
var results = [];
for (var i = 0; i < arguments.length; i++) {
results.push(arguments[i]);
}
return results;
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);输出：
[ 'Apple', 'Orange', 'Banana' ]为了更加简洁，可以使用 Array.prototype 的 slice() 方法：
function arrayFromArgs() {
return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);ES6 引入从类数组或可迭代对象创建数组的 Array.from() 方法。下面是 Array.from() 方法的语法：
Array.from(target [, mapFn[, thisArg]])在这个语法中：
target是要转换为数组的类数组或可迭代对象。mapFn是对数组的每个元素调用的函数。thisArg是执行mapFn函数时this的值。
Array.from() 返回一个包含 target 对象所有元素数组实例。
JavaScript Array.from 方法示例
让我们举一些使用该Array.from()方法的例子。
从类似数组的对象创建数组
以下示例使用 Array.from() 方法从函数 arguments 对象创建数组：
function arrayFromArgs() {
return Array.from(arguments);
}
console.log(arrayFromArgs(1, 'A'));输出：
[ 1, 'A' ]
在此示例中，我们从 arrayFromArgs() 函数的参数创建一个数组并返回该数组。
JavaScript Array.from 映射函数
Array.from() 方法接受一个回调函数，允许您对正在创建的数组的每个元素执行映射函数。请查看以下示例：
function addOne() {
return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));输出：
[ 2, 3, 4 ]在此示例中，我们将 addOne() 函数的每个参数加一并将结果添加到新数组中。
JavaScript Array.from 映射函数上下文 this
如果映射函数属于一个对象，您可以选择将第三个参数传递给 Array.from() 方法。该对象将会是映射函数内的 this 值。考虑这个例子：
let doubler = {
factor: 2,
double(x) {
return x * this.factor;
}
}
let scores = [5, 6, 7];
let newScores = Array.from(scores, doubler.double, doubler);
console.log(newScores);输出：
[ 10, 12, 14 ]从可迭代对象创建数组
由于 Array.from() 方法也适用于可迭代对象，因此您可以使用它从任何具有 [symbol.iterator] 属性的对象创建数组。例如：
let even = {
*[Symbol.iterator]() {
for (let i = 0; i < 10; i += 2) {
yield i;
}
}
};
let evenNumbers = Array.from(even);
console.log(evenNumbers);输出：
[0, 2, 4, 6, 8]在这个例子中：
- 首先，使用
[System.iterator]返回 0 到 10 之间偶数。 - 然后，使用
Array.from()方法从对象创建一个新的偶数数组。
结论
在本教程中，您学习了如何使用 JavaScript Array.from() 方法从类似数组或可迭代对象创建数组。