Um array é um dos conceitos mais comuns do Javascript, o que nos dá muitas possibilidades de trabalhar com os dados armazenados em seu interior. Levando em consideração que array é um dos tópicos mais básicos em Javascript que você aprende no início de sua trajetória de programação, neste artigo, gostaria de mostrar alguns truques que você talvez não conheça e que podem ser muito útil na codificação! Vamos começar.

1. Remova duplicatas de uma matriz

É uma pergunta de entrevista muito popular sobre arrays Javascript, como extrair os valores únicos do array Javascript. Aqui está uma solução rápida e fácil para este problema, você pode usar um novo Set() para esta finalidade. E eu gostaria de mostrar duas maneiras possíveis de fazer isso, uma com o método .from() e a segunda com o operador spread (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns ["banana", "apple", "orange", "watermelon", "grape"]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns ["banana", "apple", "orange", "watermelon", "grape"]

Às vezes é necessário substituir um valor específico na matriz durante a criação do código, e há um método curto e interessante para fazer isso que talvez você ainda não conheça. Para isso, podemos usar .splice(start, value to remove, valueToAdd) e passar para lá todos os três parâmetros especificando onde queremos iniciar a modificação, quantos valores queremos alterar e os novos valores.

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

Provavelmente todo mundo conhece o método .map() de arrays, mas existe uma solução diferente que pode ser usada para obter um efeito semelhante e um código muito limpo também. Podemos usar o método .from() para esse propósito.

var 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 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

Você tem uma matriz cheia de elementos, mas precisa limpá-la para qualquer finalidade e não deseja remover itens um por um? É muito simples fazer isso em uma linha de código. Para esvaziar um array, você precisa definir o comprimento de um array para 0, e é isso!

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

Acontece que temos um array, mas para algum propósito precisamos de um objeto com esses dados, e a maneira mais rápida de converter o array em um objeto é usar um conhecido operador de spread (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

Existem algumas situações em que criamos um array, e queremos preenchê-lo com alguns dados, ou precisamos de um array com os mesmos valores, e neste caso o método .fill() vem com uma solução fácil e limpa.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

Você sabe como mesclar arrays em um array sem usar o método .concat()? Existe uma maneira simples de mesclar qualquer quantidade de arrays em uma linha de código. Como você provavelmente já percebeu, o operador spread (…) é bastante útil ao trabalhar com arrays e é o mesmo neste caso.

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

É também um dos desafios mais populares que você pode enfrentar em qualquer entrevista Javascript porque mostra se você pode usar métodos de matriz e qual é a sua lógica. Para encontrar a interseção de dois arrays, usaremos um dos métodos mostrados anteriormente neste artigo, para garantir que os valores no array que estamos verificando não sejam duplicados e usaremos o método .filter e o método .includes. Como resultado, obteremos o array com os valores que foram apresentados em ambos os arrays. Verifique o código:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

Primeiro, vamos definir valores falsos. Em Javascript, os valores falsos são false, 0, „”, nulo, NaN, indefinido. Agora podemos descobrir como remover esses tipos de valores de nossa matriz. Para conseguir isso, vamos usar o método .filter().

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

Às vezes, precisamos selecionar um valor da matriz aleatoriamente. Para criá-lo de maneira fácil, rápida e curta e manter nosso código limpo, podemos obter um número de índice aleatório de acordo com o tamanho do array. Vejamos o código:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

Quando precisamos inverter nosso array, não há necessidade de criá-lo por meio de loops e funções complicadas, existe um método de array fácil que faz tudo para nós e, com uma linha de código, podemos inverter nosso array. Vamos verificar:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

Em Javascript existe um método interessante que permite encontrar o índice da última ocorrência do elemento dado. Por exemplo, se nosso array tiver valores duplicados, podemos encontrar a posição da última ocorrência dele. Vejamos o exemplo de código:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

Outro desafio que acontece com muita frequência durante as entrevistas do Javascript Engineer. Nada assustador vem aqui; pode ser resolvido usando o método .reduce em uma linha de código. Vamos verificar o código:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Codificação de nível

Obrigado por fazer parte da nossa comunidade! Antes de você ir:

• Bata palmas para a história e siga o autor
• Veja mais conteúdo na publicação Level Up Coding
• Siga-nos: Twitter | Linkedin | Boletim de Notícias