800+ IT
News
als RSS Feed abonnieren📚 Métodos de Manipulação de Arrays
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to
O que é Array em JavaScript?
Um Array (também conhecido como matriz) armazena uma coleção de elementos, que podem ser de diferentes tipos de dados, tais como números, strings, booleans e objetos. Os elementos dentro de um array são acessados através de um índice, que começa em 0 para o primeiro elemento do array.
Embora seja possível armazenar diferentes tipos de dados em um único array no JavaScript, é recomendado que usemos apenas um tipo de dado por array. Isso ajuda a manter a organização dos dados e torna mais fácil a manipulação dos elementos dentro do array.
Podemos declarar arrays de duas maneiras diferentes.
- new Array
const fruits = new Array("Apple", "Banana");
- Literal Notation
const fruits = ["Apple", "Banana"];
Métodos de Array
Agora, vamos entender os métodos de um array dentro do JavaScript e como usá-los.
- Map()
O método .map() permite executar uma função de callback para cada elemento dentro do array.
const list = [1, 2, 3, 4, 5];
list.map((item) => item * 2); // Output: [2, 4, 6, 8, 10]
- Filter()
O método .filter() retorna uma cópia superficial com todos os elementos que passaram no teste implementado pela função fornecida.
const list = [1, 2, 3, 4, 5];
list.filter((item) => item % 2 === 0); // Output: [2, 4]
- Push()
Adiciona um novo ou mais elementos ao final do array e retorna o novo comprimento.
const list = [1, 2, 3, 4, 5];
list.push(6); // Output: 6
console.log(list); // Output: [1, 2, 3, 4, 5, 6]
- Pop()
Remove o último elemento do array e retorna esse elemento.
const list = [1, 2, 3, 4, 5];
list.pop(); // Output: 5
console.log(list); // Output: [1, 2, 3, 4]
- Unshift()
Adiciona um novo ou mais elementos ao inicio do array e retorna o novo comprimento.
const list = [1, 2, 3, 4, 5];
list.unshift(0); // Output: 6
console.log(list); // Output: [0, 1, 2, 3, 4, 5]
- Shift()
Remove o primeiro elemento do array e retorna esse elemento.
const list = [1, 2, 3, 4, 5];
list.shift(); // Output: 1
console.log(list); // Output: [2, 3, 4, 5]
- Splice()
O método .splice() é um método de uso geral para alterar o conteúdo de uma array removendo, substituindo ou adicionando elementos em posições especificadas da array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // Output: ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']
- Slice()
O método .slice() retorna uma cópia superficial com todos os elementos selecionados. Este método recebe dois argumentos, o índice inicial e o índice final da seleção. O índice final é opcional, e se não for especificado, o método seleciona todos os elementos a partir do índice inicial até o final do array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.slice(1)); // Output: ["Orange", "Apple", "Mango"]
console.log(fruits.slice(1, 3)); // Output: ["Orange", "Apple"]
- IndexOf()
O método .indexOf() retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // Output: 2
list.indexOf(6); // Output: -1
- Reduce()
O método .reduce() executa uma função de callback para cada elemento do array, retornando o resultado final do cálculo de todos os elementos.
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item); // Output: 15
- Includes()
Retorna true se o elemento fornecido estiver presente no array.
const list = [1, 2, 3, 4, 5];
list.includes(3); // Output: true
list.includes(6); // Output: false
- Sort()
O método .sort() ordena os elementos do array. A ordem padrão é crescente, construída na conversão dos elementos em strings e, em seguida, comparando suas sequências de valores de unidades de código UTF-16.
const array = ['D', 'B', 'A', 'C'];
array.sort(); // Output: ['A', 'B', 'C', 'D']
const list = [4, 1, 3, 2, 10];
list.sort(); // Output: [1, 10, 2, 3, 4]
list.sort((a, b) => a - b); // Output: [1, 2, 3, 4, 10]
- Reverse()
Inverte a ordem dos elementos.
const list = [1, 2, 3, 4, 5];
list.reverse();
console.log(list) // Output: [5, 4, 3, 2, 1]
- Find()
Retorna o primeiro elemento do array que satisfaz a função de teste fornecida. Se nenhum valor satisfizer a função de teste, undefined será retornado.
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // Output: 3
list.find((el) => el === 6); // Output: undefined
- FindIndex()
O método .findIndex() retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.
A principal diferença entre .indexOf() e findIndex são os parâmetros dessas funções:
.indexOf()espera um valor como primeiro parâmetro. Isso o torna uma boa escolha para encontrar o índice em arrays de tipos primitivos, como strings, numbers, ou booleans..findIndex()espera uma função de callback como primeiro parâmetro. Isso faz com quê este método seja uma boa escolha para buscar o índice em arrays de tipos não primitivos (por exemplo, objetos) ou se sua condição de localização for mais complexa do que apenas um valor.
const list = [5, 12, 8, 130, 44];
list.findIndex((element) => element > 13); // Output: 3
const array = [
{
id: 12
}, {
id: 34
}, {
id: 78
}, {
id: 88
}
];
array.findIndex((element) => element.id === 78); // Output: 2
- Join()
Une todos os elementos de um array em uma string.
const list = [1, 2, 3, 4, 5];
list.join(', '); // Output: "1, 2, 3, 4, 5"
- Some()
Retorna true se pelo menos um elemento do array passar no teste implementado pela função fornecida.
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // Output: true
list.some((el) => el === 6); // Output: false
- Every()
Retorna true se todos os elementos do array passarem no teste implementado pela função fornecida.
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // Output: false
const list = [2, 4, 6, 8, 10];
list.every((el) => el % 2 === 0); // Output: true
- At()
Retorna o elemento no índice especificado.
const list = [5, 12, 8, 130, 44];
let index = 2;
console.log(`Using an index of ${ index } the item returned is ${ list.at(index) }.`); // Output: "Using an index of 2 the item returned is 8"
index = -2;
console.log(`Using an index of ${ index } item returned is ${ list.at(index) }.`); // Output: "Using an index of -2 item returned is 130"
- Flat()
Retorna um novo array com todos os elementos do sub-array concatenados nele recursivamente até a profundidade especificada.
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // Output: [1, 2, 3, 4, 5, 6]