5 Array prototypes explicados

Recentemente venho falado em uma série de posts chamado “Tornando-se um programador melhor”, da importância em se importar com o código que escrevremos, um pouco que muito inspirado no livro de Pete goodlife.

Livro que indico muito a leitura

Para começar, seria bem interessante conhecer o primeiro prototype chamado: from

Sabemos que se referenciarmos uma varíavel à outra, que não seja um tipo primitivo ( por exemplo number e string), e alterar seu conteúdo, a alteração ocorrerá nas duas, pois uma é a variável alocada e outra se torna a referência para a primeira.

const originalArray = [10, 20, 30, 40, 50, 60];
const currentArray = originalArray;
currentArray[0] = 5;

console.log(originalArray); // [5, 20, 30, 40, 50, 60]
console.log(currentArray); // [5, 20, 30, 40, 50, 60]

Para resolver isso, muitos códigos utilizam da seguinte maneira:

const originalArray = [10, 20, 30, 40, 50, 60];
const currentArray = [...originalArray];
currentArray[0] = 5;

console.log(originalArray); // [10, 20, 30, 40, 50, 60]
console.log(currentArray); // [5, 20, 30, 40, 50, 60]

Então pronto, criamos um novo Array, a partir do Array original.

Caso você precise de um mapper, você precisará após clonar, utilizar o prototype map da seguinte maneira:

const originalArray = [10, 20, 30, 40, 50, 60];

function multiplyValues(value: number, multiple = 10) {
  return value * multiple;
}

const currentArray = [...originalArray].map(multiplyValues);

currentArray[0] = 5;

console.log(originalArray); // [10, 20, 30, 40, 50, 60]
console.log(currentArray); // [5,20,60,120,200,300]

Só que existe métodos mais limpos e nativos de fazer isso. Sabe como? Vou mostrar o poder do From:

const originalArray = [10, 20, 30, 40, 50, 60];
function multiplyValues(value: number, multiple = 10) {
  return value * multiple;
}
const currentArray = Array.from(originalArray, multiplyValues);
currentArray[0] = 5;

console.log(originalArray); // [10, 20, 30, 40, 50, 60]
console.log(currentArray); // [5,20,60,120,200,300]

Bem melhor não ? Desestruração é muito bom, mas precisamos usar com moderação.

Array of Este é bem interessante, por que tudo que você envia como argumentos, ele transforma em um array e a posição do que você escreveu, vira a key do array.

const array1 = [1,2]
const array2 = [3,4]
const data = { name: "Alex"}
const array3 = Array.of (arrayl, array2, data)

console.log(array3) // [ [1,2], [3,4], { name: "Alex"}]

console.log(Array.of(1,2,3) // [1,2,3]

Array at Você consegue pegar a posição do elemento do array.

É super importante ver na documentação o motivo de usar e por que foi criado:

Descrição

O at() método é equivalente à notação de colchetes quando index não é negativo. Por exemplo, array[0] e array.at(0) ambos retornam o primeiro item. No entanto, ao contar elementos do final do array, você não pode usar array [-1] como em Python ou R, porque todos os valores dentro dos colchetes são tratados literalmente como propriedades de string, então você acabará lendo array["-1" ], que é apenas uma string normal propriedade em vez de um índice de matriz. A prática usual é acessar length e calcular o índice a partir disso - por exemplo, array[array. length - 1]. O at () método permite indexação relativa para que isso possa ser reduzido para array.at (-1). Mais formalmente, quando index < 0, index + array.length é acessado.

O at() método é genérico. Ele espera apenas que o this valor tenha uma length propriedade e propriedades de chave inteira.

Então, já que não é possível usar posições negativas, acessando diretamente desta forma:

const arrayExample = ["a", "b"];
const data = arrayExample[-1];
console.log(data); // undefined

Podemos simplesmente usar esta:

const arrayExample = Array.of("Banana", "Morango", "Melancia");
arrayExample.at(0);
arrayExample.at(-1);

Array some e Array Every

Estes são bem parecidos, ambos percorrem o array, junto a um Callback, ambos os callback precisam retornar um Boolean. No Some, pelo menos uma das condições precisa ser true, para retornar true. Ao contrário do Every, onde todos precisam ser true.

Por exemplo: Você quer saber se Maria, Ines e João são mais velhos do que a Joana. ( Every )

No segundo exemplo, você verifica se Maria, Ines ou João são mais velho que a Joana. ( Some )

// Array Every
const idadeJoana = 20
const idadeMaria = 10
const idadeInes = 25
const idadeJoao = 25
const isEveryoneOlder = [idadeMaria, idadeInes, idadeJoao] .every (idade => idade
idadeJoana)
console.log(isEveryone0lder) // false

// Array some
const isSome0lder = [idadeMaria, idadeInes, idadeJoao]. some (idade => idade < idadeJoana)

console.log(isSome0lder) // true

Em regras de renderização baseada em roles, se usa essas duas funções.

Gostasse ? Obrigado pela leitura ❤