Embora existam alguns métodos úteis para trabalhar com Arrays em JavaScript, às vezes eles não são suficientes para atender a todas as nossas necessidades. Você pode economizar muito tempo usando uma biblioteca como a Lodash, que oferece um grande conjunto de métodos que implementam funcionalidades comuns que faltam nos métodos nativos do JavaScript.
Neste tutorial, mostrarei alguns métodos interessantes definidos em Lodash que você pode começar a usar imediatamente. Tudo o que você precisa fazer para começar é carregar a biblioteca em seu projeto a partir de qualquer CDN.
Dividir uma matriz em pedaços
Você pode usar o chunk() método para dividir sua matriz em pedaços menores, cada um dos quais conterá o número especificado de elementos. Este agrupamento de elementos acontece da esquerda para a direita. Às vezes, a matriz não pode ser dividida uniformemente e o pedaço final conterá os elementos restantes neste caso.
1 |
let people = ["Jane", "Adam", "Nitish", "Joe", "Rakesh", "Will", "Andrew", "Samantha"]; |
2 |
|
3 |
console.log(_.chunk(people, 3)); |
4 |
/* Outputs:
|
5 |
|
6 |
[['Jane', 'Adam', 'Nitish'], ['Joe', 'Rakesh', 'Will'], ['Andrew', 'Samantha']]
|
7 |
|
8 |
*/
|
Embaralhar os elementos de uma matriz
PHP tem um método embutido para embaralhar arrays, mas tal método não existe atualmente em JavaScript. Embora não seja difícil escrever sua própria função aleatória, você também pode usar o shuffle() método em Lodash para randomizar os elementos em uma matriz.
1 |
let people = ["Jane", "Adam", "Nitish", "Joe", "Rakesh", "Will", "Andrew", "Samantha"]; |
2 |
|
3 |
console.log(_.shuffle(people)); |
4 |
// outputs: ['Joe', 'Samantha', 'Adam', 'Jane', 'Andrew', 'Rakesh', 'Will', 'Nitish']
|
É importante lembrar que este método retorna um array de valores embaralhados. Isso significa que, embora você possa chamá-lo em um objeto, você obterá apenas uma matriz de valores embaralhados, conforme mostrado abaixo:
1 |
let country_capitals = { |
2 |
"India": "Delhi", |
3 |
"China": "Beijing", |
4 |
"Germany": "Berlin", |
5 |
"France": "Paris" |
6 |
}
|
7 |
|
8 |
console.log(_.shuffle(country_capitals)); |
9 |
// Outputs: ['Paris', 'Beijing', 'Berlin', 'Delhi']
|
Remover valores falsos de uma matriz
Fazer uma variedade de operações em uma matriz pode, às vezes, resultar em seu preenchimento com valores falsos indesejados. Você também pode receber essa matriz de algum outro serviço de terceiros. Por exemplo, digamos que você deva obter informações meteorológicas de diferentes lugares armazenados em uma matriz e alguns dos valores retornados são undefined, false ou uma string vazia etc.
Nesses casos, você pode usar o compact() método para filtrar todos os valores falsos que incluem false, null, undefinedNaN, a string vazia ""e 0. Aqui está um exemplo:
1 |
let values = ["Chilly", "Sunny", undefined, '', "Sunny", false, "Cloudy"]; |
2 |
|
3 |
console.log(_.compact(values)); |
4 |
// Outputs: ['Chilly', 'Sunny', 'Sunny', 'Cloudy']
|
Removendo elementos de uma matriz
Há uma variedade de métodos em Lodash que podem ajudá-lo a remover elementos de um array. O drop() O método permite remover um número específico de elementos do início da matriz. Por outro lado, o dropRight() O método permite remover um número específico de elementos do final da matriz. Observe que nenhum desses métodos altera a matriz original.
Você provavelmente já sabe que o nativo slice() método em JavaScript alcança a mesma coisa que drop() e dropRight() quando fornecidos os parâmetros corretos. Uma pequena diferença entre eles é que drop() e dropRight() retornar undefined ao trabalhar com slots de array vazios. Isso é importante lembrar quando você está trabalhando com métodos de matriz como map(). Aqui está um exemplo:
1 |
let numbers = new Array(10); |
2 |
_.fill(numbers, 5, 3, 6); |
3 |
|
4 |
console.log(numbers) |
5 |
// Outputs: [empty × 3, 5, 5, 5, empty × 4]
|
6 |
|
7 |
console.log(numbers.slice(2)); |
8 |
// Outputs: [empty, 5, 5, 5, empty × 4]
|
9 |
|
10 |
console.log(_.drop(numbers, 2)); |
11 |
// Outputs: [undefined, 5, 5, 5, undefined, undefined, undefined, undefined]
|
12 |
|
13 |
console.log(numbers.slice(0, -2)); |
14 |
// Outputs: [empty × 3, 5, 5, 5, empty × 2]
|
15 |
|
16 |
console.log(_.dropRight(numbers, 2)); |
17 |
// Outputs: [undefined, undefined, undefined, 5, 5, 5, undefined, undefined]
|
E se, em vez de remover um número fixo de elementos, você quiser remover elementos de qualquer extremidade que não atendam a um determinado critério? Você pode considerar usar o dropWhile() e dropRightWhile() métodos neste caso. Eles aceitam uma função de retorno de chamada e continuam descartando valores, desde que essa função de retorno de chamada retorne um valor verdadeiro.
1 |
function is_negative(num) { |
2 |
return num < 0; |
3 |
}
|
4 |
|
5 |
let numbers = [-2, -5, 8, 3, 42, -63, 2, -1, -34]; |
6 |
|
7 |
console.log(_.dropWhile(numbers, is_negative)); |
8 |
// Outputs: [8, 3, 42, -63, 2, -1, -34]
|
9 |
|
10 |
console.log(_.dropRightWhile(numbers, is_negative)); |
11 |
// outputs: [-2, -5, 8, 3, 42, -63, 2]
|
Como você pode ver, os valores negativos foram removidos do início e do final da matriz nas respectivas chamadas de função. Também é possível remover todos os valores negativos de nossa matriz usando o remove() método. No entanto, você deve se lembrar que esse método altera o array original enquanto retorna um novo array com os valores removidos.
1 |
function is_negative(num) { |
2 |
return num < 0; |
3 |
}
|
4 |
|
5 |
let numbers = [-2, -5, 8, 3, 42, -63, 2, -1, -34]; |
6 |
|
7 |
let negatives = _.remove(numbers, is_negative); |
8 |
|
9 |
console.log(numbers); |
10 |
// Outputs: [8, 3, 42, 2]
|
11 |
|
12 |
console.log(negatives); |
13 |
// outputs: [-2, -5, -63, -1, -34]
|
Encontrando Elementos de Array Exclusivos
Digamos que você tenha um monte de palavras aleatórias armazenadas em uma matriz e deseja extrair apenas uma lista de palavras exclusivas dessa matriz. O que você faz? Você pode usar o uniq() método para fazê-lo rapidamente. A matriz que você retorna conterá apenas a primeira ocorrência de cada elemento repetido. Os elementos na nova matriz também estarão em sua ordem original.
1 |
let words = ["copy", "proof", "legal", "proof", "first", "above", "first", "taxation", "result", "relief", "version", "order", "order", "result", "copy", "fire", "pudding", "anyway"]; |
2 |
|
3 |
console.log(_.uniq(words)); |
4 |
// Outputs: ['copy', 'proof', 'legal', 'first', 'above', 'taxation', 'result', 'relief', 'version', 'order', 'fire', 'pudding', 'anyway']
|
Outra variação desse método é uniqBy() que lhe permitirá definir os critérios utilizados para determinar se o valor em consideração é único ou não. Este método aceita um iteratee como seu segundo parâmetro, que é basicamente uma função invocada para cada elemento. Você também pode passar uma propriedade a ser avaliada para cada elemento.
Aqui está um exemplo que considera o comprimento das palavras como o fator primário ao determinar a exclusividade do elemento.
1 |
let words = ["copy", "proof", "legal", "proof", "first", "above", "first", "taxation", "result", "relief", "version", "order", "order", "result", "copy", "fire", "pudding", "anyway"]; |
2 |
|
3 |
console.log(_.uniqBy(words, 'length')); |
4 |
// Outputs: ['copy', 'proof', 'taxation', 'result', 'version']
|
Encontrando a diferença entre dois arrays
Encontrar a diferença entre duas matrizes permite filtrar quaisquer elementos presentes nas outras matrizes. Isso pode ser útil em várias situações, como selecionar equipes ou paletas de cores nas quais você não deseja sobreposição de cores.
O difference() método de Lodash permite que você faça exatamente isso. Ele retornará um novo array que contém todos os valores do primeiro array que não fazem parte do segundo array. A ordem dos valores retornados será determinada pela primeira matriz. Aqui está um exemplo:
1 |
let people = ["Adam", "Nitish", "Joe", "Rakesh", "Will", "Andrew", "Samantha"]; |
2 |
|
3 |
let team_a = ["Adam", "Andrew", "Jane", "Samantha"]; |
4 |
let team_b = _.difference(people, team_a); |
5 |
|
6 |
console.log(team_b); |
7 |
// Outputs: ['Nitish', 'Joe', 'Rakesh', 'Will']
|
Existe outro método chamado differenceBy() que permite calcular a diferença entre duas matrizes. No entanto, oferece controle adicional sobre a maneira como os valores são comparados. Você pode passar uma função de retorno de chamada para o differenceBy() método que será invocado para todos os elementos para determinar como eles devem ser comparados. Aqui está um exemplo:
1 |
function first_name(full_name) { |
2 |
return full_name.split(' ')[0]; |
3 |
}
|
4 |
|
5 |
let people = ["Adam Brown", "Nitish Kumar", "Andrew Jones", "Joe Baker", "Rakesh Sharma", "Will Smith", "Joe Miller", "Andrew Blackman", "Samantha Garcia"]; |
6 |
|
7 |
let team_a = ["Adam Brown", "Andrew Jones", "Jane Miller", "Joe Adams"]; |
8 |
|
9 |
let team_b = _.difference(people, team_a); |
10 |
let team_c = _.differenceBy(people, team_a, first_name); |
11 |
|
12 |
console.log(team_b); |
13 |
// Outputs: ['Nitish Kumar', 'Joe Baker', 'Rakesh Sharma', 'Will Smith', 'Joe Miller', 'Andrew Blackman', 'Samantha Garcia']
|
14 |
|
15 |
console.log(team_c); |
16 |
// Outputs: ['Nitish Kumar', 'Rakesh Sharma', 'Will Smith', 'Samantha Garcia']
|
Como você pode ver, quando usamos nossa função personalizada para avaliar os valores para comparação, o array retornado com o differenceBy() O método descartou todos os elementos com uma correspondência de primeiro nome em vez de uma correspondência completa. Desde então, tivemos um “Joe Adams” na matriz team_ao team_c array até descartou “Joe Baker” enquanto calculava a diferença.
Agrupando Elementos de Array Juntos
No início deste tutorial, aprendemos como o chunk() O método pode ser usado para dividir uma matriz em matrizes menores de tamanho específico. Existe outro método chamado groupBy() que você pode usar para agrupar diferentes elementos de qualquer array.
Este método aceita uma função de retorno de chamada como seu segundo parâmetro, que define os critérios para agrupar os elementos. Ele retorna um objeto cujas chaves são os valores gerados pelo retorno de chamada e cujos valores são os elementos do array que geraram essas chaves. Aqui está um exemplo:
1 |
function first_name(full_name) { |
2 |
return full_name.split(' ')[0]; |
3 |
}
|
4 |
|
5 |
let people = ["Adam Brown", "Nitish Kumar", "Andrew Jones", "Joe Baker", "Rakesh Sharma", "Will Smith", "Joe Miller", "Andrew Blackman", "Samantha Garcia", "Will Bateman", "Adam Davis"]; |
6 |
|
7 |
console.log(_.groupBy(people, first_name)); |
8 |
/* Outputs:
|
9 |
|
10 |
{
|
11 |
"Adão": [
|
12 |
"Adam Brown",
|
13 |
"Adam Davis"
|
14 |
],
|
15 |
"Nitish": [
|
16 |
"Nitish Kumar"
|
17 |
],
|
18 |
"André": [
|
19 |
"Andrew Jones",
|
20 |
"Andrew Blackman"
|
21 |
],
|
22 |
"João": [
|
23 |
"Joe Baker",
|
24 |
"Joe Miller"
|
25 |
],
|
26 |
"Rakesh": [
|
27 |
"Rakesh Sharma"
|
28 |
],
|
29 |
"Vai": [
|
30 |
"Will Smith",
|
31 |
"Will Bateman"
|
32 |
],
|
33 |
"Samantha": [
|
34 |
"Samantha Garcia"
|
35 |
]
|
36 |
}
|
37 |
|
38 |
*/
|
Pensamentos finais
Este tutorial cobriu alguns métodos úteis na biblioteca Lodash que você pode usar para manipular arrays. A biblioteca foi imensamente útil quando foi lançada pela primeira vez devido à sua extensa lista de métodos muito úteis. Ele ainda fornece algumas funcionalidades decentes, mas os padrões JavaScript também melhoraram muito com o tempo.
Algumas das funcionalidades originais implementadas na biblioteca agora estão disponíveis nativamente em JavaScript. No entanto, você ainda pode obter o melhor dos dois mundos carregando seletivamente os métodos que usará em seu código.
Miniatura de postagem gerada com o DALL-E 2 da OpenAI.
