Os navegadores ganharam recentemente um novo método interoperável que pode ser chamado em matrizes:
Array.prototype.with()
Neste artigo, explicamos como esse método funciona e como usá-lo para atualizar uma matriz. sem mudar a matriz original.
Introdução ao Array.prototype.with(index, value)
O método Array.prototype.with(index, value)
retorna uma cópia da matriz
chamado com o index
definido para o novo value
fornecido.
O exemplo a seguir mostra uma matriz de idades. Você gostaria de criar uma nova cópia de a matriz enquanto altera a segunda idade de 15 para 16:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Detalhando o código: ages.with(...)
retorna uma cópia da variável ages
.
sem modificar a matriz original. ages.with(1, …)
substitui o segundo item
index = 1
). ages.with(1, 16)
atribui o segundo item a 16
.
É assim que foi possível criar uma nova cópia da matriz com uma modificação.
Isso é muito útil quando você quer garantir que a matriz original permaneça inalterado e este artigo aborda alguns dos casos de uso para isso. Mas, por enquanto, dê uma olhada no que teria acontecido se você tivesse usado a notação por colchetes:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
Como você pode notar, a variável ages
também foi modificada nesse exemplo. Está
porque quando você atribui ages = newAges
, o JavaScript não copia a matriz, mas
cria uma referência à outra matriz. Então, qualquer mudança em um também
afetam o outro, já que ambos apontam para a mesma matriz.
Array.prototype.with() e imutabilidade
A imutabilidade é a base de muitas bibliotecas e frameworks de front-end, alguns: React (e redux) e Vue.
Além disso, outras bibliotecas e frameworks não exigem necessariamente imutabilidade, mas incentive-o para melhorar o desempenho: Angular e Lit
Assim, os desenvolvedores frequentemente precisavam usar outros métodos que retornassem cópias de matrizes o que sacrificou a legibilidade do código:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
Confira um exemplo de Codepen de como o .with()
pode ser usado em combinação no React
Use useState para atualizar uma matriz de itens de forma imutável:
Como o método .with()
retorna uma cópia da matriz, é possível encadear vários
chamadas .with()
ou até mesmo outros métodos de matriz. O exemplo a seguir demonstra
incrementando a segunda e a terceira idades a partir da matriz:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Outros métodos imutáveis novos
Três outros métodos se tornaram interoperáveis recentemente:
Array.prototype.toReversed()
que inverte a matriz sem modificar o matriz original.Array.prototype.toSorted()
que classifica a matriz sem mutação da matriz original.Array.prototype.toSpliced()
que funciona como.splice()
, mas sem modificar a matriz original.
De acordo com a MDN, esses três métodos são a cópia da versão parceiros. Esses métodos também podem ser usados quando a imutabilidade é esperada ou de preferência.
Em resumo, atualizações imutáveis podem ser alcançadas mais facilmente em
JavaScript por um dos quatro métodos apresentados neste artigo. Especificamente:
o método .with()
facilita a atualização de um único elemento da matriz
sem mudar a matriz original.