JavaScript Array.from()

摘要：在本教程中，您将学习关于 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);Code language: JavaScript (javascript)

输出

[ 'Apple', 'Orange', 'Banana' ]Code language: JSON / JSON with Comments (json)

为了使其更简洁，您可以使用 slice() 方法，该方法属于 Array.prototype，如下所示

function arrayFromArgs() {
    return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);Code language: JavaScript (javascript)

ES6 引入了 Array.from() 方法，该方法可以从类似数组或 可迭代对象 创建 Array 的新实例。以下展示了 Array.from() 方法的语法

Array.from(target [, mapFn[, thisArg]])Code language: CSS (css)

在此语法中

• target 是要转换为数组的类似数组或可迭代对象。
• mapFn 是要对数组的每个元素调用的映射函数
• thisArg 是执行 mapFn 函数时的 this 值。

Array.from() 返回 Array 的新实例，其中包含 target 对象的所有元素。

JavaScript Array.from() 方法示例

让我们来看一些使用 Array.from() 方法的示例。

1) 从类似数组的对象创建数组

以下示例使用 Array.from() 方法从函数的 arguments 对象创建新的数组

function arrayFromArgs() {
    return Array.from(arguments);
}

console.log(arrayFromArgs(1, 'A'));Code language: JavaScript (javascript)

输出

[ 1, 'A' ]Code language: JSON / JSON with Comments (json)

在此示例中，我们从 arrayFromArgs() 函数的参数创建数组并返回它。

2) 带有映射函数的 JavaScript 数组 Array.from()

Array.from() 方法接受一个 回调函数，它允许您在正在创建的数组的每个元素上执行映射函数。请查看以下示例

function addOne() {
    return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));Code language: JavaScript (javascript)

输出

[ 2, 3, 4 ]Code language: JSON / JSON with Comments (json)

在此示例中，我们将 addOne() 函数的每个参数增加 1，并将结果添加到新数组中。

3) 带有 this 值的 JavaScript Array.from()

如果映射函数属于对象，则可以选择将第三个参数传递给 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);Code language: JavaScript (javascript)

输出

[ 10, 12, 14 ]Code language: JSON / JSON with Comments (json)

4) 从可迭代对象创建数组

由于 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);
Code language: JavaScript (javascript)

输出

[0, 2, 4, 6, 8]Code language: JSON / JSON with Comments (json)

在此示例中

• 首先，定义 even 对象，该对象具有 [System.iterator]，它返回从 0 到 10 的偶数。
• 然后，使用 Array.from() 方法从 even 对象创建新的偶数数组。

在本教程中，您已经学习了如何使用 JavaScript Array.from() 方法从类似数组或可迭代对象创建数组。