Introdução
Após o lançamento do ES6, vi muitos desenvolvedores ainda não cientes da funcionalidade recentemente adicionada do objeto Array. Portanto, decidi criar este artigo para divulgar e esperar que muitas pessoas se beneficiem com isso.
Histórico
Este artigo não é uma introdução aos arrays JavaScript, mas sim sobre como explorar a funcionalidade recém-adicionada do objeto Array. Se você é iniciante, recomendo que faça uma pesquisa no Google. E, na minha opinião, esses extras têm um propósito. E, uma delas é facilitar nossa vida e sermos produtivos na hora de lidar com aquele objeto Array. Por fim, se você tiver um bom entendimento de arrays, poderá ler facilmente este artigo.
ECMAScript 6 Enhanced Arrays
Conforme mencionado anteriormente, o ECMAScript 6 (ES6) adicionou novos métodos ao objeto Array global. Portanto, discutiremos os seguintes métodos:
Array.from()
Array.of()
copyWithin()
fill()
find()
findIndex()
entries()
keys()
values()
Então vamos começar. Espero que você esteja animado.
Método Array.from()
Este é um método que retorna uma nova instância de Array estaticamente de um objeto iterável. No entanto, você também pode passar "objetos tipo array" no primeiro parâmetro. Se você ainda não sabe sobre isso, será discutido nesta seção.
Sintaxe
ocultar código de cópia
//sintaxe
//Array.from(arrayLike[, mapFn[, thisArg]]);
O parâmetro
arrayLike – é uma referência a um objeto iterável.
mapFn – é opcional e atua como um callback chamado map-function.
thisArg – também é opcional e é o valor dentro da função thismap.
Exemplo
de ocultar código de cópia
let result =
Array.from('JavaScript', (val, indx) => `[${
indx}]` + "=>" + val.toUpperCase());
console.log(result);
Saída
Como você pode ver, o exemplo acima é fácil de entender.
função
Este é o segundo parâmetro, se fornecido, que, quando invocado, atuará como um retorno de chamada do mapa. E transforma cada valor da origem no destino retornado.
Isso é semelhante ao método Array.prototype.map().
Agora, por que não olhar para outro exemplo, o que você acha? Além disso, por que não colocar Array.from() dentro de Object. Assim, podemos ver esse comportamento da função de retorno de chamada de mapeamento e o terceiro parâmetro.
const manager = {
isBadManager: true,
doBadStuff: function (items) {
return Array.from(items, function (val, indx) {
if (this.isBadManager) {
console.log(`${
indx + 1}. ${
val[0].toUpperCase()}${
val.substr(1)}`);
}
}, this);
}
}
/**
* Output:
* 1. That's my idea
* 2. Micromanage
*/
manager.doBadStuff(['essa é minha ideia', 'micromanage']);
Novamente, um exemplo fácil de seguir. Agora, vamos subir um pouco. E, vamos prestar mais atenção ao primeiro parâmetro de Array.map() que é um objeto tipo array (arrayLike).
O que são objetos tipo array?
Freqüentemente, você encontrará objetos em JavaScript que se parecem com arrays, muitas vezes chamados de "objetos semelhantes a arrays". Intrigado? Sem ele, a propriedade length do objeto é um número inteiro não negativo e possui algumas propriedades de índice.
Vejamos o seguinte exemplo:
let arrLike1 = {
length: 3,
0: "Jin",
1: "Vincent",
2: "Necesario"
};
Isso é tudo? sim!
Agora, vamos ver como converter a variável arrLike1 em um número real usando ArrayArray. from()
let resultArray2 = Array.from(arrLike1);
console.log(resultArray2);
//output: ["Jin", "Vincent", "Necesario"]
A lista de nós
ANodeList é outro exemplo de um objeto do tipo array. Até eu luto com o NodeList. Pensei que fosse um array, mas não é.
NodeList e Arrays são coisas completamente diferentes.
OK, então o que é esse NodeList? Um objeto NodeList é uma coleção de nós DOM que são extraídos do HTML ao usar APIs do navegador, como querySelector() e/ou querySelectorAll().
Agora que temos uma ideia do que é um NodeList, vamos tentar converter o NodeList para um Array com o uso de Array.from().
<!-- this is the html file -->
<body>
<div>
<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>
</div>
</body>
/**
* Start of NodeList
* In this code sample we will see what a NodeList is.
* Here are some facts about NodeList.
*
* 1. NodeList aren't arrays.
* 2. NodeList does have a length property
* 3. NodeList does have indexed property
* 4. Therefore, we can conclude that a NodeList does look like
* an Array-like object.
* 5. We can convert NodeList into an array with the use of Array.from()
*/
window.addEventListener("DOMContentLoaded", function (event) {
let elements = document.querySelectorAll("div p");
console.log(elements); //output: NodeList(3) [p, p, p]
//this proves that NodeList does have a length property
console.log(elements.length) //output: 3
console.log(typeof (elements)); //output: object
//this proves that the return of querySelectorAll method is a NodeList
console.log(elements instanceof NodeList); //output: true
//this proves that NodeList aren't arrays
console.log(elements instanceof Array); //output: false
let arrayParagraphs = Array.from(elements);
console.log(arrayParagraphs); //output: Array(3)
});
/**
* End of NodeList
*/
Agora que estamos familiarizados com objetos do tipo array e vimos como convertê-los em arrays reais.
O próximo conceito que precisamos entender é como evitar slots vazios.
Evite slots vazios
Slots vazios? quem são esses?
Basicamente, quando você cria um array com um determinado comprimento sem especificar um valor para cada índice, você tem um índice vazio, também conhecido como slot vazio.
Vejamos o seguinte exemplo:
const arrWithEmptySlots = [];
arrWithEmptySlots.length = 5;
arrWithEmptySlots[0] = "Jin";
//output ["Jin", empty × 4]
console.log(arrWithEmptySlots);
Como verificar slots vazios?
Podemos usar o operador in para verificar se um array tem uma chave. Além disso, ele retorna um valor booleano, falso para slots vazios, mas verdadeiro para slots com valores, incluindo valores indefinidos.
Vejamos o seguinte exemplo:
const arrWithEmptySlots = [];
arrWithEmptySlots.length = 3;
arrWithEmptySlots[0] = undefined;
arrWithEmptySlots[1] = "Jin";
console.log(0 in arrWithEmptySlots);//true
console.log(1 in arrWithEmptySlots);//true
console.log(2 in arrWithEmptySlots);//false
console.log(3 in arrWithEmptySlots);//false
/**
* output:
* 0
* 1
*/
for (let slot in arrWithEmptySlots) {
console.log(slot);
}
O que esse espaço vazio tem a ver com o método Array.from()?
Se você deseja produzir um array inicializado em um determinado comprimento sem slots vazios, Array.from() resolve esse problema.
const arrayWithEmptySlots_2 = [];
arrayWithEmptySlots_2.length = 5;
const results = Array.from(arrayWithEmptySlots_2);
//output: [undefined, undefined, undefined, undefined, undefined]
console.log(results);
Antes de irmos para a próxima parte.
Podemos então concluir que Array.from() não apenas cria novas instâncias de Array a partir de objetos iteráveis. Ele também aceita um "objeto semelhante a uma matriz" que é convertido em uma matriz real e nos ajuda a evitar slots vazios.
Método Array.of()
Geralmente, todo mundo sabe que o construtor Array é usado para criar objetos Array. Além disso, o método Array.of() é uma alternativa ao construtor Array, e esta seção explica por quê.
Sintaxe
hide copy code
//sintaxe
//Array.of([]);
Parâmetros
[] – elementos usados para criar o array
Vejamos alguns exemplos abaixo:
Crie um novo construtor Array e passe vários parâmetros.
let cars = new Array("Toyota", "Mitsubishi", "Nissan", "Honda");
//output: 4
console.log(cars.length);
//output: Toyota Mitsubishi Nissan Honda
console.log(...cars);
let customers = new Array({
name: "Jin" }, {
name: "Vincent" }, {
name: "Necesario" });
//output: 3
console.log(customers.length);
//output: {name: "Jin"} {name: "Vincent"} {name: "Necesario"}
console.log(...customers);
let luckyNumbers = new Array(23, 29, 32);
//output: 3
console.log(luckyNumbers.length);
//output: 23 29 32
console.log(...luckyNumbers);
创建一个新的Array构造函数并传递一个参数。并且，让我们看到故障。
隐藏 复制代码
let car = new Array("Toyota");
//still works.
console.log(car);
let customer = new Array({
name: "Jin"})
//still works.
console.log(customer);
let luckyNumber = new Array(23);
//glitch
//output: 23
//23 in length????
console.log(luckyNumber.length);
//another glitch
//output: [empty × 23]
console.log(luckyNumber);
Você notou a diferença? Tomemos como exemplo a variável luckyNumber, comparando com as variáveis carro e cliente, o resultado é diferente.
Lembre-se quando passar um parâmetro com um valor numérico. Está criando uma matriz vazia com uma propriedade de comprimento igual a esse número e gerando slots vazios com base na propriedade de comprimento.
Isso é uma falha? Talvez sim ou não. Para evitar esse problema podemos usar o método Array.of().
Vejamos o seguinte exemplo:
let superLuckyNumber = Array.of(23);
console.log(superLuckyNumber); //output: [23]
Então Array.of() foi introduzido como uma solução para esse problema.
Deixe-me saber seus pensamentos na seção de comentários. Desde já, obrigado.
Método copyWithin()
O método copyWithin() é usado para copiar uma sequência de valores de um array para outro local no array.
sintaxe
//syntax
//[].copyWithin(target, start, end);
target – o índice para copiar o elemento para
iniciar – opcional, esta é a posição do índice para começar a copiar a partir
do final – opcional, este é o índice no qual realmente termina a cópia do elemento
Se o índice inicial for negativo, ele será tratado como o comprimento da matriz mais o índice inicial superior ([].comprimento + início). Igual ao índice final ([].comprimento + fim).
let presidents1 = ["Donald Trump", "Barack Obama", "George Bush", "Bill Clinton"];
let presidents2 = ["George H. W. Bush", "Ronald Reagan", "Jimmy Carter", "General Ford"];
//let's copy to index 0 from index 1
//let's replace Donald Trump with Barack Obama
//output: ["Barack Obama", "George Bush", "Bill Clinton", "Bill Clinton"]
console.log(presidents1.copyWithin(0, 1));
//let's copy to index 1 from index 2
//, let's replace Ronald Reagan with Jimmy Carter up to 3rd index.
//Up to 2nd index only excluding 3rd index.
//output: ["George H. W. Bush", "Jimmy Carter", "Jimmy Carter", "General Ford"]
console.log(presidents2.copyWithin(1, 2, 3));
fácil de seguir não é? Vamos para a próxima parte.
método fill()
O método fill realmente preenche (no todo ou em parte) todos os elementos do Array do índice inicial ao índice final com o valor fornecido. Além disso, os índices de início e fim são opcionais; portanto, se não forem fornecidos, todo o array será preenchido com os valores que você passar.
Sintaxe
hide copy code
//sintaxe
//[].fill(value, start, end);
parâmetro
value – o valor para preencher o array
start – opcional, é o índice inicial
end – opcional, é o índice final
se você já viu Problema do Construtor de Array. Da mesma forma, podemos usar esse método para definir um valor para todos os espaços vazios de um array.
Você pode fazer isso desde que o objetivo seja inicializar uma matriz com um comprimento definido e sem slots vazios.
Vejamos o seguinte exemplo:
let arryLenOf5 = new Array(5).fill(undefined);
//output: (5)[undefined, undefined, undefined, undefined, undefined]
console.log(arryLenOf5);
let arryLenOf3 = new Array(3).fill(0);
//output: (3) [0, 0, 0]
console.log(arryLenOf3);
//fills the entire array
console.log([29, 23, 5, 26, 16, 21].fill(29));
//output: [29, 29, 29, 29, 29, 29]
//fills the entire array starting at index 1
console.log([29, 23, 5, 26, 16, 21].fill(30, 1));
//output: [29, 30, 30, 30, 30, 30]
//fills the entire array starting at index 1 and ends at 5th position.
console.log([29, 23, 5, 26, 16, 21].fill(31, 2, 5));
//output: [29, 23, 31, 31, 31, 21]
Se o índice inicial for negativo, ele será tratado como o comprimento do array mais o índice inicial ([].length + start). Igual ao índice final ([].comprimento + fim).
//fills the entire array starting at index ([].length -2) = 4th index.
console.log([29, 23, 5, 26, 16, 21].fill(31, -2));
//output: [29, 23, 5, 26, 31, 31]
//fills the entire array starting at [1] index ends to ([].length -2) = 4th position.
console.log([29, 23, 5, 26, 16, 21].fill(31, 1, -2));
//output: [29, 31, 31, 31, 16, 21]
fácil de seguir não é? Vamos para a próxima parte.
O método find()
Antes de mergulhar no método find(), vamos dar um passo atrás. E responda: "O que realmente resolve?"
sintaxe
//syntax
//[].find(callback(element,index,array), thisArg);
callback – a função callback executada para cada valor no array
thisArg – é opcional, dentro do callback Object usa o
método this indexOf
Normalmente, a primeira coisa que vem à mente quando se busca um valor no Array é o uso do indexOf() método.
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(nums.indexOf(9)); //output: 0;
console.log((nums.indexOf(7) !== -1)); //output: true
console.log((nums.indexOf("9") == 0)); //output: false
console.log((nums.indexOf("Jin Vincent Necesario") !== -1)); //output: false
No entanto, às vezes os programadores esquecem que esse método requer comparações rígidas. Eu acho que é por isso que eles (programadores) usam esse método some ().
Método some()
Este método funciona chamando retornos de chamada de função para cada elemento até que um retorne um true ou um Truthyvalue e, finalmente, pare.
A vantagem é que você pode controlar a comparação dos valores, ao contrário do método indexOf().
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(nums.some((num) => num == "9")); //output: true
console.log(nums.some((num) => num === "9")); //output: false
Agora, a desvantagem do método some() é que você só pode obter o valor booleano true ou false se um valor apropriado correspondente for encontrado, mas não o valor real que corresponde ao conteúdo.
Qual método find () pode resolver?
O método find() resolve esse problema. Ele funciona da mesma forma que o método some(), exceto que Array retorna o valor real assim que a função callback retorna seu valor.
Portanto, o método find() retorna um elemento de array. A expressão é passada para a função de retorno de chamada somente se a condição fornecida for atendida. Caso contrário, retorna indefinido.
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(nums.find((num) => num == "9")); //output: 9
console.log(nums.find((num) => num === "9"));//output: undefined
Por que não há outro exemplo com parâmetros completos?
let num = 5;
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
let result = nums.find(function (value, index, array) {
//just shows the values to the console window.
console.log(`The num[${
index}] is equal to ${
value} ${
this}`);
return value === parseInt(this);
}, num);
console.log(result); //output: 5
Método findIndex()
Isso é quase semelhante ao método find(). No entanto, ele retorna o índice do elemento do array, não o próprio elemento.
sintaxe
//syntax
//[].findIndex(callback(element,index,array), thisArg);
Retorno de chamada de parâmetros
– Uma função de retorno de chamada que é executada para cada valor na matriz até que a função retorne true. Caso contrário, indefinido significa que o elemento não foi encontrado.
thisArg – é opcional
Voltando ao método indexOf(), vimos que não temos controle sobre sua lógica de correspondência. Assim, findIndex() salva o dia.
let num = 5;
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
let result = nums.findIndex(function (value, index, array) {
//just shows the values to the console window.
console.log(`The num[${
index}] is equal to ${
value} ${
this}`);
return value === parseInt(this);
}, num);
console.log(result); //output: 4
Agora temos um bom entendimento do método find() e como find() e findIndex() são semelhantes.
Vamos dar outro exemplo, uma pesquisa personalizada.
const houses = [
{
length: 22, width: 288, measurement: 'ft' },
{
length: 182, width: 532, measurement: 'ft' },
{
length: 12, width: 152, measurement: 'ft' },
{
length: 20, width: 30, measurement: 'ft' },
{
length: 12, width: 152, measurement: 'ft' }];
let indexResult = houses.findIndex((house) => (house.length * house.width) === 600);
console.log(indexResult); //output: 3
Quando usar os métodos find() e findIndex()?
Não trate o método indexOf() como findIndex(method) porque temos o método some() que retorna o valor booleano que precisamos.
Não use o método findIndex() para obter valores correspondentes, porque é para isso que serve o método find().
Use o método indexOf() se a correspondência estrita for necessária.
Use findIndex() se precisar de um índice mais personalizado da correspondência.
método entry()
Este método retorna um objeto iterável. Além disso, o objeto real retornado é um Array Iterator contendo pares chave/valor para cada índice do array.
sintaxe
//syntax
//[].entries();
let fruits = ['mango', 'apple', 'dragon fruit'];
//output: returns Array Iterator {}
console.log(fruits.entries());
/*
Let us show the [key, value] pair
*/
let fruitEntries = fruits.entries();
/*
Output:
[0, "mango"]
[1, "apple"]
[2, "dragon fruit"]
*/
for (let current of fruitEntries){
console.log(current);
}
/*let us show the index and element of the fruits array
Output:
0 "mango"
1 "apple"
2 "dragon fruit"
*/
for(let [index, element] of fruits.entries()){
console.log(index, element);
}
Método keys()
Este método é semelhante ao método entrys(). No entanto, o objeto retornado contém uma chave para cada índice na matriz.
sintaxe
//syntax
//[].keys();
let fruits = ['mango', 'apple', 'dragon fruit'];
//output: Array Iterator {}
console.log(fruits.keys());
let fruitKeys = fruits.keys();
//output: 0 1 2
console.log(...fruitKeys);
Método values()
Este método se comporta como [].keys() e [].entries(). Porém, a diferença é que esse método retorna o valor de cada chave do array.
sintaxe
//syntax
[].values();
let fruits = ['mango', 'apple', 'dragon fruit'];
//output: Array Iterator {}
console.log(fruits.values());
let fruitKeys = fruits.values();
//output: "mango" "apple" "dragon fruit"
console.log(...fruitKeys);