A autora do artigo, cuja tradução estamos publicando hoje, diz que uma das edições do podcast
Syntax FM , que forneceu uma visão geral de métodos úteis de objetos e matrizes em JavaScript, motivou sua ideia. Esses métodos ajudam os desenvolvedores a escrever código limpo e legível. Seu uso reduz a necessidade de bibliotecas de terceiros como o
Lodash .
Array.prototype.filter ()
O método
Array.prototype.filter () cria uma nova matriz na qual apenas os elementos da matriz original que correspondem à condição especificada caem.
▍ Exemplo
Com base em uma matriz contendo informações sobre os alunos, criaremos uma nova matriz na qual os registros serão incluídos apenas sobre os alunos cuja idade lhes permita comprar álcool.
const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 );
Array.prototype.map ()
O método
Array.prototype.map () permite criar uma nova matriz com base nos valores de alguma forma processados de outra matriz. Esse método é ótimo para modificar dados; devido ao fato de não fazer alterações na matriz original, é frequentemente usado no React.
▍ Exemplo
Com base na matriz numérica, crie uma nova matriz, no início de cada elemento do qual o sinal
$ será colocado.
const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); // dollars: ['$2', '$3', '$4', '$5']
Array.prototype.reduce ()
O método
Array.prototype.reduce () geralmente é negligenciado imerecidamente. Permite reduzir a matriz para um único valor que se acumula no elemento receptor. O valor retornado por esse método pode ser de qualquer tipo. Por exemplo, poderia ser um objeto, uma matriz, uma sequência ou um número.
▍ Exemplo
Usaremos o método
.reduce() para obter a soma dos elementos de uma matriz numérica.
const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
De fato, esse método pode ser usado de várias maneiras interessantes. Exemplos relevantes podem ser encontrados na
documentação do
MDN . Em particular, estamos falando sobre expandir matrizes de matrizes, agrupar objetos por propriedades e remover elementos duplicados de matrizes.
Array.prototype.forEach ()
O método
Array.prototype.forEach () aplica a função passada a ele para cada elemento da matriz.
▍ Exemplo
Veja como
.forEach() cada elemento da matriz no console usando o método
.forEach() .
const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); // : // 'happy' // 'sad' // 'angry'
Array.prototype.some ()
O método
Array.prototype.some () verifica se pelo menos um elemento da matriz corresponde à condição especificada pela função passada a ela. Este método, por exemplo, é capaz de se mostrar bem na solução da tarefa de verificar os privilégios do usuário. Pode ser considerado um análogo do
.forEach() anteriormente considerado, com a diferença de que, quando usado com a ajuda da função que é passada a ele, é possível executar determinadas ações nos elementos da matriz até que essa função retorne o valor verdadeiro, interrompa o processamento.
▍ Exemplo
Verifique se a matriz contém pelo menos uma sequência de
admin .
const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin');
Array.prototype.every ()
O método
Array.prototype.every () é semelhante ao método
.some () descrito acima, mas só retornará
true se todos os elementos da matriz atenderem à condição especificada pela função passada para esse método.
▍ Exemplo
Verifique se todas as estimativas armazenadas na matriz são iguais ou maiores que 3.
const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 );
Array.prototype.includes ()
O método
Array.prototype.includes () permite que você saiba se uma matriz contém um determinado valor. É semelhante ao método
.some() , mas não verifica se os elementos da matriz correspondem a uma determinada condição, mas se a matriz contém o valor especificado quando foi chamado.
▍ Exemplo
Verifique se existe um elemento de string
waldo na matriz:
const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo');
Array.from ()
O método estático
Array.from () permite criar matrizes com base em outras matrizes ou seqüências de caracteres. Se necessário, esse método pode receber uma função para executar o mapeamento, o que permite influenciar os dados que cairão na nova matriz. De fato, é fornecido um método especial para o mapeamento -
Array.prototype.map () , portanto, não está totalmente claro por que alguém pode precisar desse recurso do método
Array.from() .
▍ Exemplo
Crie uma matriz com base na cadeia.
const newArray = Array.from('hello'); // newArray ['h', 'e', 'l', 'l', 'o']
Crie uma matriz contendo valores dobrados dos elementos da matriz numérica original.
const doubledValues = Array.from([2, 4, 6], number => number * 2);
Object.values ()
O método
Object.values () retorna uma matriz de valores de propriedade do objeto passado para ele.
▍ Exemplo
Formamos uma matriz de valores de propriedade do objeto.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const colors = Object.values(icecreamColors); // colors ["brown", "white", "red"]
Object.keys ()
O método
Object.keys () retorna uma matriz que consiste em nomes de propriedades do objeto (chaves).
▍ Exemplo
Vamos formar uma matriz de nomes de propriedades de objetos.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); // types: ["chocolate", "vanilla", "strawberry"]
Object.entries ()
O método
Object.entries () retorna, depois de processar o objeto passado para ele, uma matriz contendo matrizes que são pares do formulário
[, ] , que são os nomes das propriedades e os valores dessas propriedades.
▍ Exemplo
Formamos uma matriz que contém, para o objeto de nosso interesse, dados sobre os nomes das propriedades e seus valores.
const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); // entries // [['rain', 0], ['temperature', 24], ['humidity', 33]]
Operador de extensão e matrizes
O operador de extensão (operador de
propagação , ...), aplicado às matrizes, permite expandi-las extraindo seus elementos delas. Esse operador é útil, por exemplo, quando você precisa combinar várias matrizes. Além disso, seu uso elimina a necessidade de usar o método
.splice() se você precisar remover alguns elementos da matriz, pois ele pode ser combinado com o método
.slice() , que evita alterar a matriz original.
▍ Exemplo
Combine as duas matrizes.
const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; // combined : [1, 2, 3, 4, 5, 6, 7, 8]
Formamos uma nova matriz, que é a matriz original da qual o elemento foi excluído. Nesse caso, a matriz original não deve mudar.
const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals : ['squirrel', 'bear', 'deer', 'rat']
Operador de extensão e objetos
A aplicação do operador de extensão aos objetos permite adicionar novas propriedades e valores a eles sem alterar os objetos originais (ou seja, novos objetos são criados como resultado dessas operações). Além disso, este operador pode ser usado para combinar objetos. Vale a pena notar aqui que o operador de extensão aplicado a um objeto não afeta objetos aninhados nele.
▍ Exemplo
Crie um novo objeto adicionando uma nova propriedade ao objeto original sem alterar o objeto original.
const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' }
A sintaxe dos demais parâmetros da função
Ao trabalhar com funções, você pode usar a
sintaxe dos parâmetros restantes para organizar a recepção de qualquer número de argumentos na forma de uma matriz.
▍ Exemplo
Imprimimos uma matriz contendo os argumentos passados para a função.
function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud');
Object.freeze ()
O método
Object.freeze () "congela" um objeto, impedindo que as propriedades existentes desse objeto alterem ou adicionem novas propriedades e valores ao objeto. Há um equívoco de que esse método seja semelhante a declarar objetos usando a palavra-chave
const ; no entanto, objetos constantes podem ser modificados.
▍ Exemplo
"Congelamos" um objeto, após o que tentamos alterar sua propriedade e garantimos que isso não possa ser feito.
const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; // frozenObject , { name: 'Robert' }
Object.seal ()
O método
Object.seal () permite "selar" o objeto, impedindo a adição de novas propriedades. Ao mesmo tempo, as propriedades existentes podem ser alteradas.
▍ Exemplo
Nós "selamos" o objeto, o que não nos permitirá adicionar uma nova propriedade a ele, mas permitirá alterar as propriedades existentes.
const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; // sealedObject : { name: 'Bob' }
Object.assign ()
O método
Object.assign () permite combinar objetos, copiando propriedades de um objeto para outro. De fato, o mesmo efeito pode ser alcançado usando o operador de expansão descrito acima, para que este método possa ser completamente dispensado. Deve-se notar que esse método, como o operador de extensão, não realiza uma clonagem profunda de objetos. Se você precisar de uma ferramenta pronta para clonagem profunda de objetos - dê uma olhada nas ferramentas da biblioteca
Lodash .
▍ Exemplo
Vamos criar um de dois objetos.
const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject);
Sumário
Neste artigo, falamos sobre métodos úteis de matrizes e objetos em JavaScript. Muitos dos métodos discutidos aqui retornam novas matrizes ou objetos. Isso torna possível combiná-los em cadeias. Esses métodos não modificam os dados de origem, o que é especialmente importante no desenvolvimento do React. Além disso, o uso desses métodos, na grande maioria dos casos, permite abandonar loops
for while e
for while .
Caros leitores! Quais métodos de matrizes e objetos em JavaScript você usa com mais frequência?
