JavaScript Array.from()

Resumo : neste tutorial, você aprenderá sobre o Array.from()método JavaScript que cria um novo array a partir de um objeto semelhante a um array ou iterável.

Introdução ao método JavaScript Array.from()

Para criar um array a partir de um objeto semelhante a um array no ES5, você itera sobre todos os elementos do array e adiciona cada um deles a um array intermediário como este:

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);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'Apple', 'Orange', 'Banana' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Para torná-lo mais conciso, você pode usar o slice()método Array.prototypea seguir:

function arrayFromArgs() {
    return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);Linguagem de código:  JavaScript  ( javascript )

ES6 apresenta o Array.from()método que cria uma nova instância de Arrayum objeto semelhante a um array ou iterável . O seguinte ilustra a sintaxe do Array.from()método:

Array.from(target [, mapFn[, thisArg]])Linguagem de código:  CSS  ( css )

Nesta sintaxe:

• targeté um objeto semelhante a um array ou iterável para converter em um array.
• mapFné a função map para chamar cada elemento do array
• thisArgé o thisvalor ao executar a mapFnfunção.

O Array.from()retorna uma nova instância Arrayque contém todos os elementos do targetobjeto.

Exemplos de métodos JavaScript Array.from()

Vejamos alguns exemplos de uso do Array.from()método.

1) Crie um array a partir de um objeto semelhante a um array

O exemplo a seguir usa o Array.from()método para criar um novo array a partir do argumentsobjeto de uma função:

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

console.log(arrayFromArgs(1, 'A'));Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 1, 'A' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste exemplo, criamos um array a partir dos argumentos da arrayFromArgs()função e o retornamos.

2) Matriz JavaScript Array.from()com função de mapeamento

O Array.from()método aceita uma função de retorno de chamada que permite executar a função de mapeamento em cada elemento do array que está sendo criado. Veja o exemplo a seguir:

function addOne() {
    return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 2, 3, 4 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste exemplo, aumentamos cada argumento da addOne()função em um e adicionamos o resultado ao novo array.

3) JavaScript Array.from() com este valor

Se a função de mapeamento pertencer a um objeto, você poderá opcionalmente passar o terceiro argumento para o Array.from() método. O objeto representará o  thisvalor dentro da função de mapeamento. Considere este exemplo:

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);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 10, 12, 14 ]Linguagem de código:  JSON/JSON com comentários  ( json )

4) Crie um array a partir de um objeto iterável

Como o Array.from()método também funciona em um objeto iterável , você pode usá-lo para criar um array a partir de qualquer objeto que possua uma [symbol.iterator]propriedade. Por exemplo:

let even = {
    *[Symbol.iterator]() {
        for (let i = 0; i < 10; i += 2) {
            yield i;
        }
    }
};
let evenNumbers = Array.from(even);
console.log(evenNumbers);
Linguagem de código:  JavaScript  ( javascript )

Saída:

[0, 2, 4, 6, 8]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste exemplo:

• Primeiro, defina o evenobjeto com o [System.iterator]que retorna números pares de 0 a 10.
• Em seguida, use o Array.from()método para criar uma nova matriz de números pares a partir do evenobjeto.

Neste tutorial, você aprendeu como usar o Array.from()método JavaScript para criar um array a partir de um objeto semelhante a um array ou iterável.