Array from: entenda o que é, como criar e confira alguns exemplos

Quando trabalhamos com desenvolvimento web, lidamos diretamente com diversos tipos de dados em nossa rotina. Muitas vezes, precisamos de alguma forma de manipulá-los ou armazená-los em algum lugar. No JavaScript, existe um objeto nativo que nos auxilia diretamente com essas necessidades: os Arrays. 

Porém, como dito anteriormente, por se tratar de diferentes tipos de dados, antes de manipulá-los, é necessário convertê-los em um Array.

Nesse artigo, iremos aprender sobre como realizar e utilizar esse procedimento em nossos códigos.

O que é array from?

Array from é um método nativo do JavaScript, capaz de criar uma nova instância de um Array a partir de diferentes tipos de dados. Ou seja, caso tenhamos um array-like (objeto semelhante a um Array) ou um objeto iterável, podemos utilizar esse método para convertê-los e acessar todas as propriedades, assim como as vantagens, de um Array.

Qual a sua sintaxe?

Para utilizarmos em nossos códigos, primeiros precisamos instanciar o Array, seguido de um ponto com o nome do método(from). Esse método recebe alguns parâmetros, que iremos abordar no próximo tópico.

Quais os parâmetros do JavaScript Array from?

Como acabamos de ver em sua sintaxe, esse método pode receber até três parâmetros. São eles:

arrayLike

É o objeto a ser convertido em Array.

mapFn

Esse parâmetro é opcional. Nesse caso, passamos uma função que utilizará o método map, executando uma ação em cada elemento do nosso Array.

thisArg

Esse parâmetro também é opcional. Ao utilizarmos uma map function, esse parâmetro especificará qual o valor a ser usado como this.

Exemplo de utilização do método

No exemplo abaixo, criaremos uma função para converter os parâmetros recebidos pela função em um Array. Ao utilizarmos o método Array.from, podemos verificar no console do navegador o resultado da nossa operação. 

Arrays e objetos: quando usar e qual a diferença?

Já sabemos que Array é uma estrutura de dados, onde podemos armazená-los e manipulá-los, associados a um índice específico para cada item, começando sempre em zero. Dessa forma, quando queremos capturar algum elemento dentro do array, precisamos passar o seu índice, como uma forma de acessar a sua posição dentro da lista. Confira o exemplo abaixo:

Esses valores são pré-determinados e sempre numéricos, como vimos anteriormente, conforme a posição do elemento dentro da lista.

Porém, podem existir situações onde esse tipo de armazenamento e acesso de informações não seja suficiente e totalmente útil. Para isso, utilizamos os objetos. Através deles, conseguimos definir diversas propriedades em um único dado, com nomes literais e seus devidos valores. Confira o exemplo abaixo: 

Tanto os arrays, quanto os objetos são formas de armazenar e manipular informações. Porém, conforme os exemplos acima, podemos ver uma grande diferença entre as propriedades e a forma de acessar esses dados. Cada um tem suas funcionalidades e suas utilidades dependendo da situação. Cabe a pessoa desenvolvedora avaliar e saber trabalhar com ambos.

Como usar o array?

Já vimos o que é e como converter diferentes tipos de dados em um Array. Porém, é importantíssimo saber como utilizá-los em nossas aplicações. Para manipular os dados ali presentes, existem diversos métodos nativos que podem nos auxiliar. A seguir, veremos na prática como utilizar essas funcionalidades.

Adicionando elementos a um array

Para adicionarmos novos elementos em um array já existente, utilizarmos o método push. Confira o exemplo a seguir: 

Perceba que o nosso elemento “Melância” foi adicionado ao array de frutas na última posição. 

E como faríamos caso quiséssemos adicionar um novo elemento na primeira posição de um array? Para isso, existe o método unshift.

Podemos também adicionar um elemento em qualquer outra posição dentro da nossa lista, utilizando método splice. Esse método recebe como parâmetro três argumentos: a posição do array onde o nosso novo elemento será inserido, a quantidade de itens que serão excluídos desse array e o elemento em si. 

Removendo elementos de um array

Assim como para inserimos os elementos em um array, podemos remover de diferentes posições. Para excluir o primeiro item de um array, utilizamos o método shift. Além da sua exclusão, esse método retorna o elemento removido, caso o seu valor seja atribuído a uma variável.

Já para removermos o último elemento de um array, utilizamos o método pop. Assim como método shift, o elemento removido é retornado, caso seja atribuído a uma variável. 

Da mesma forma que utilizamos o splice para adicionar elementos, podemos utilizá-lo para remover, passando como parâmetro a posição do array e a quantidade de itens excluídos a partir dessa posição.

Alterando elementos de um array

Para alterarmos os elementos de um array, existem duas formas. A primeiro é mais manual, selecionando diretamente o elemento a ser alterado a partir do seu índice e atribuindo um novo valor para ele.

A segunda e mais recomendada forma, é utilizando novamente o método splice. Dessa vez, passando como argumento a posição da lista, a quantidade de itens removidos e o novo item a ser inserido naquela posição.

Iterando arrays

Existem diferentes formas de iteração dos elementos de um Array. Neste artigo, veremos as duas principais e mais utilizadas.

A primeira é através de uma estrutura de repetição, utilizando o looping for. Essa estrutura recebe três parâmetros fundamentais. O primeiro deles é o índice de início do nosso looping. O segundo é até onde essa repetição vai iterar. Para isso, utilizamos o comprimento total do array, através do método length. Já o último, é a iteração de cada elemento.

No exemplo a seguir, iremos iterar e trazer no console do nosso navegador cada elemento presente no array com o seu índice.

Já a seguinte forma de iteração de um array, é utilizando o método forEach, passando como parâmetro uma função de callback, que receberá o elemento atual iterado e o seu índice. Perceba que a sintaxe será bem mais enxuta se comparada a uma estrutura de repetição, como a citada anteriormente. 

Conclusão

Lidar com arrays é muito comum para qualquer pessoa programadora no mercado de trabalho. É fundamental ter conhecimento sobre o conteúdo para poder criar as aplicações de maneira funcional. 

Nesse artigo, podemos compreender a importância da manipulação dos dados dentro da nossa aplicação. Aprendemos na prática como executá-la, através dos métodos. Além disso, vimos como é possível converter diferentes tipos de objetos e dados em um array.

O JavaScript é uma linguagem muito poderosa. Esse tipo nativo de objeto é apenas uma das suas diversas funcionalidades. Se deseja aprender mais sobre essa linguagem de programação, que está em alta entre as empresas de tecnologia, venha conhecer a formação em Desenvolvimento Full Stack da Kenzie Academy Brasil.