Matrizes sĂŁo uma das estruturas de dados mais populares em JavaScript porque sĂŁo usadas para armazenar dados. AlĂ©m disso, as matrizes oferecem muitas oportunidades para trabalhar com esses mesmos dados. Entendendo que para aqueles que estĂŁo no começo do caminho de aprender JavaScript, as matrizes sĂŁo um dos tĂłpicos mais bĂĄsicos. Neste artigo, gostaria de apresentar alguns truques Ășteis que vocĂȘ talvez nĂŁo conheça. Vamos começar.
1. Como deixar apenas valores exclusivos na matriz
Essa Ă© uma pergunta muito popular durante uma entrevista para a posição de um desenvolvedor Javascript. Aqui estĂĄ uma solução rĂĄpida e fĂĄcil para esse problema. Primeiro, vocĂȘ precisa obter os valores exclusivos da matriz, para isso, pode usar o
new Set() (
aprox. Re: a estrutura de dados do Set armazena apenas valores Ășnicos ). Em seguida, vocĂȘ precisa converter a estrutura de dados do conjunto em uma matriz. Quero apresentar a vocĂȘ duas maneiras de fazer isso: o primeiro - usando o mĂ©todo
from() , o segundo - usando o operador spread (
"âŠ" ).
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
Fåcil né?
2. Como substituir valores em uma matriz
HĂĄ situaçÔes em que vocĂȘ precisa substituir os valores na matriz por outros valores. Existe um bom mĂ©todo para isso que vocĂȘ talvez nĂŁo conheça - o mĂ©todo de
splice(start, value to remove, values to add) , em que
start Ă© o nĂșmero do Ăndice do qual queremos remover os elementos da matriz, o
value to remove Ă© o nĂșmero de elementos que queremos excluir e os
values to add serem
values to add sĂŁo os elementos que queremos inserir no lugar dos excluĂdos:
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits);
3. Como transformar uma matriz sem usar o método map()
Provavelmente todo mundo conhece o método da matriz
map() , mas hå outra solução que pode ser usada para obter um efeito semelhante e um código limpo. Para fazer isso, podemos usar o método
from() :
const friends = [ { name: 'John', age: 22 }, { name: 'Peter', age: 23 }, { name: 'Mark', age: 24 }, { name: 'Maria', age: 22 }, { name: 'Monica', age: 21 }, { name: 'Martha', age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames);
4. Como limpar rapidamente uma matriz
Por exemplo, temos uma matriz na qual existem muitos elementos. Precisamos limpĂĄ-lo (nĂŁo importa para que finalidade), enquanto nĂŁo queremos excluir os elementos um por um. Isso Ă© muito simples de fazer com uma linha de cĂłdigo. Para limpar a matriz, precisamos definir o comprimento da matriz como 0, e Ă© isso!
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits);
5. Como converter uma matriz em um objeto
Essa situação acontece: temos uma matriz, mas precisamos de um objeto (novamente, não importa para que finalidade) com esses dados, e a maneira mais råpida de converter uma matriz em um objeto é usar o operador spread (
"..." ):
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj);
6. Como preencher uma matriz com os mesmos valores
Existem situaçÔes diferentes em que queremos criar uma matriz e preenchĂȘ-la com alguns valores, ou precisamos de uma matriz com os mesmos valores. O mĂ©todo
fill() para essas tarefas é uma ótima solução:
const newArray = new Array(10).fill('1'); console.log(newArray);
7. Como combinar mais de duas matrizes
VocĂȘ sabe como combinar matrizes em uma sem usar o mĂ©todo
concat() ? Existe uma maneira fĂĄcil de combinar qualquer nĂșmero de matrizes em uma matriz com uma linha de cĂłdigo. Como vocĂȘ provavelmente jĂĄ entendeu, o operador spread (
"..." ) Ă© uma ferramenta bastante Ăștil ao trabalhar com matrizes, como neste caso:
const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food);
8. Como encontrar a interseção de duas matrizes
VocĂȘ pode enfrentar essa tarefa em qualquer entrevista JavaScript, porque sua solução mostra seu conhecimento dos mĂ©todos de matriz, bem como sua opiniĂŁo. Para encontrar os valores comuns das duas matrizes, usaremos um dos mĂ©todos discutidos anteriormente neste artigo para garantir que os valores na matriz que estamos verificando nĂŁo sejam duplicados. AlĂ©m disso, usaremos os mĂ©todos
filter() e
includes() . Como resultado, obtemos uma matriz com elementos representados nas duas matrizes:
const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues);
9. Como remover valores falsos de uma matriz
Para começar, vamos definir valores falsos. Em Javascript, os valores falsos são:
false ,
0 ,
"" ,
null ,
NaN e
undefined . Agora podemos descobrir como remover esses valores da nossa matriz. Para conseguir isso, precisamos do método
filter() :
const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr);
10. Como obter um valor aleatĂłrio de matriz
Ăs vezes, precisamos selecionar um valor aleatĂłrio da matriz. Para tornar a solução simples, curta e rĂĄpida, podemos obter um nĂșmero de Ăndice aleatĂłrio de acordo com o comprimento da matriz. Veja este exemplo:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor);
11. Como expandir a matriz na direção oposta
Quando precisamos "inverter" nossa matriz, não hå necessidade de criå-la através de loops e funçÔes complexas, porque existe um método simples de matriz
reverse() que faz tudo isso por nĂłs, e com uma linha de cĂłdigo podemos "inverter" nossa matriz:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors);
12. método lastIndexOf()
O JavaScript possui um método
lastIndexOf(elem) que permite encontrar o Ăndice da Ășltima ocorrĂȘncia de um elemento
elem . Por exemplo, se nossa matriz tiver valores duplicados, podemos encontrar nela a posição da Ășltima ocorrĂȘncia. DĂȘ uma olhada no seguinte exemplo de cĂłdigo:
const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex);
13. Como somar todos os valores em uma matriz
Outra pergunta popular durante uma entrevista para uma posição de desenvolvedor JavaScript. A soma de todos os elementos pode ser encontrada em uma linha de cĂłdigo, se vocĂȘ souber o mĂ©todo
reduce() :
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum);
ConclusĂŁo
Neste artigo, apresentei 13 truques Ășteis para ajudĂĄ-lo a escrever um cĂłdigo limpo e conciso. AlĂ©m disso, nĂŁo se esqueça de que existem muitos truques diferentes que vocĂȘ pode usar em Javascript e que merecem ser estudados nĂŁo apenas para trabalhar com matrizes, mas tambĂ©m para outras estruturas de dados. Espero que vocĂȘ tenha gostado das soluçÔes apresentadas no artigo e as utilize para melhorar o processo de desenvolvimento.
Tenha um bom cĂłdigo de escrita!