ūüĎ®‚ÄćūüíĽ Alexandro castro's Blog

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 ‚̧