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);

输出：

[ '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() 方法从类似数组或可迭代对象创建数组。

myfreax

微信公众号

支付宝打赏