Manipulando array com javascript — parte 1

Seja frontend, backend ou mobile, a manipulação de array é uma habilidade bastante importante para qualquer programador javascript/typescript. Percebendo a importância dessa habilidade, decidi escrever esse post compartilhando os principais métodos usados para manipular arrays e como podemos usá-los nas nossas aplicações.

Inserindo e removendo dados no array

Para começar, vamos aprender os métodos para inserir e remover elementos de um array.

push()

Adiciona um elemento no final do array.

let numbersList = [1, 2, 3, 4]

numbersList.push(5) // -> [1, 2, 3, 4, 5]

pop()

Remove o ultimo elemento do array.

let numberList = [1, 2, 3, 4, 5]

numberList.pop() // -> [1, 2, 3, 4]

unshift()

Adiciona o elemento no inicio do array.

let numbers = [2, 3, 4]

numbers.unshift(1) // -> [1, 2, 3, 4]

shift()

Remove o primeiro elemento do array.

let numbers = [1, 2, 3, 4, 5]

numbers.shift() // -> [2, 3, 4, 5]

concat()

O método concat() serve para adicionar elementos em um array sem alterar o array original, criando assim um novo array.

Podemos adicionar elementos no inicio, ou no fim do array, depende de como usaremos o método.

const countries = ['Brazil', 'Canada', 'Argentina']

const newCountries = [].concat(countries, 'Chile')

console.log(newCountries) // -> ['Brazil', 'Canada', 'Argentina', 'Chile']

Também podemos usar o método concat() para unir dois ou mais arrays em um novo array.

const europe = ['Germany', 'France']

const southAmerica = ['Brazil', 'Argentina', 'Chile']

const countries = [].concat(europe, southAmerica)

console.log(countries) // -> ['Germany', 'France', 'Brazil', 'Argentina', 'Chile']

splice()

Vimos como adicionar elementos no inicio e no final do array, agora vamos aprender como adicionar um novo elemento em qualquer posição do array.

O método splice() consegue adicionar, remover ou substituir um elemento específico de um array. Com a seguinte estrutura:

array.splice(posiçao_do_elemento, 0, novo_elemento...)

Pegando um array com os países da América do Sul, queremos colocar o Peru no lugar de índice 1 no array, neste caso, faríamos assim:

const southAmerica = ['Brazil', 'Argentina', 'Chile']

southAmerica.splice(1, 0, 'Peru')

console.log(southAmerica) // -> ['Brazil', 'Peru', 'Argentina', 'Chile']

Para adicionar em qualquer outro lugar do array, bastaria mudar o parâmetro de 1 para o índice desejado. Também conseguimos adicionar mais de um elemento apartir de um índice, como por exemplo:

const southAmerica = ['Brazil', 'Argentina', 'Chile']

southAmerica.splice(1, 0, 'Peru', 'Uruguai')

console.log(southAmerica) // -> ['Brazil', 'Peru', 'Uruguai', 'Argentina', 'Chile']

Filtrando e selecionando dados no array

filter()

Esse método irá criar um novo array com os dados do array antigo que atendam a uma condicional. Muito utilizado em filtro de produtos quando quisemos visualizar somente os produtos que atendam as condições que queremos.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const evenNumbers = numbers.filter((number) => number % 2 === 0)

console.log(evenNumbers) // -> [ 2, 4, 6, 8, 10 ]

const languages = ["Dart", "Java", "Javascript", "Python", "Rust"]

const languagesIncludesJava = languages.filter((language) =>
  language.includes("Java")
)

console.log(languagesIncludesJava) // -> [ 'Java', 'Javascript' ]

Também conseguimos filtrar arrays de objetos.

const users = [
  {
    name: "Hermando Thiago",
    age: 21,
  },
  {
    name: "Maria Lorena",
    age: 17,
  },
  {
    name: "Francisco Hernandes",
    age: 18,
  },
]

const overAgeUsers = users.filter((user) => user.age >= 18)

console.log(overAgeUsers) // -> [{ name: 'Hermando Thiago', age: 21 }, { name: 'Francisco Hernandes', age: 18 }]

find()

Esse método retorna o primeiro elemento que atende a uma função com condicional, caso não exista um elemento que atenda ao requisito, irá retornar undefined.

const numbers = [1, 2, 3, 4, 5, 6]

const evenNumbers = numbers.find((number) => number % 2 === 0)

console.log(evenNumbers) // -> 2

const numberGreateThanTen = numbers.find((number) => number > 10)

console.log(numberGreateThanTen) // -> undefined

findIndex()

Esse método é bem parecido com o método find(), mas no lugar de retornar o elemento, retorna o índice do elemento que atende à condicional. Caso não exista esse elemento, retorna -1.

const numbers = [1, 2, 3, 4, 5, 6]

const indexFirstEvenNumber = numbers.find((number) => number % 2 === 0)

console.log(indexFirstEvenNumber) // -> 1

const indexNumberGreateThanTen = numbers.find((number) => number > 10)

console.log(indexNumberGreateThanTen) // -> -1

indexOf()

O método indexOf() tem o mesmo objetivo que o método findIndex(), só com algumas diferenças, no lugar de passar uma função com a condicional, passamos direto o elemento que estamos procurando, e temos um segundo parâmetro que é opcional, sendo de qual index começaremos a fazer a busca.

const animals = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(animals.indexOf('bison')) // -> 1

// Começando a busca do índice 2
console.log(animals.indexOf('bison', 2)) // -> 4

console.log(animals.indexOf('giraffe')) // -> -1

E é isso pessoal, espero que tenham gostado do post e que tenham aprendido muito com os exemplos que dei. O javascript tem vários métodos de array, de forma que a o post iria ficar gigante se eu trouxesse todos aqui, então vou escrever um segundo post com métodos um pouco mais complexos e com exemplos no dia a dia, como ordenação, operações com array e mais alguns tópicos importantes.

Muito obrigado pela atenção :)

Minhas redes sociais:

linkedin: https://www.linkedin.com/in/hermando-thiago/

github: https://github.com/HermandoThiago

email: hermandodev@gmail.com