Juntamente com o objeto simples, o array é uma estrutura de dados amplamente usada em JavaScript. E uma operação amplamente utilizada em arrays é acessar elementos por índice.
Neste post, vou apresentar o método .at(index).
O principal benefício do método .at(), é acessar elementos do final do array usando um índice negativo, o que não é possível usando a sintaxe regular de colchetes array[index].
A limitação da sintaxe dos colchetes
A maneira usual de acessar um elemento de array por índice é o uso de colchetes array[index]:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits[1];
item; // => 'maçã'
A expressão array[index] é avaliada como o item do array localizado em index e é denominada de acessador de propriedade. Como você já deve saber, a indexação de arrays em JavaScript começa em 0.
Na maioria dos casos, a sintaxe dos colchetes é uma boa maneira de acessar itens por um índice positivo ( >= 0). Tem uma sintaxe simples e legível.
Mas às vezes você gostaria de acessar os elementos do final, e não do início. Por exemplo, vamos acessar o último elemento do array:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits[fruits.length - 1];
lastItem; // => 'uva'
fruits[fruits.length - 1] é como você pode acessar o último elemento do array, onde fruits.length - 1 é o índice do último elemento.
A dificuldade é que o acessador de colchetes não permite uma maneira direta de acessar itens do final do array e também não aceita um índice negativo.
Felizmente, uma nova proposta (no estágio 3 a partir de janeiro de 2021) traz o método .at() para arrays (bem como para arrays e strings digitados) e resolve muitas limitações do acessador de colchetes.
O método array.at()
Em palavras simples, array.at(index) acessa o elemento no argumento index.
Se o argumento do índice for um número inteiro positivo >= 0, o método retornará o item nesse índice:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(1);
lastItem; // => 'maçã'
Se o argumento do índice for maior ou igual ao comprimento do array, então, como o acessador regular, o método retornará undefined:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits.at(999);
item; // => undefined
A verdadeira mágica acontece quando você usa um índice negativo com o método array.at() — então o elemento é acessado a partir do final do array. Por exemplo, vamos usar o índice -1 para acessar o último elemento do array:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(-1);
lastItem; // => 'uva'
Aqui está um exemplo mais detalhado de como o método array.at()acessa os elementos:
const vegetables = ['batata', 'tomate', 'cebola'];
vegetables.at(0); // => 'batata'
vegetables.at(1); // => 'tomate'
vegetables.at(2); // => 'cebola'
vegetables.at(3); // => undefined
vegetables.at(-1); // => 'cebola'
vegetables.at(-2); // => 'tomate'
vegetables.at(-3); // => 'batata'
vegetables.at(-4); // => undefined
Se negIndex for um índice negativo < 0, array.at(negIndex) acessa o elemento no índice array.length + negIndex. Aqui está um exemplo:
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const negIndex = -2;
fruits.at(negIndex); // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana'
Resumo
A sintaxe dos colchetes em JavaScript é a maneira usual e boa de acessar itens por índice. Basta colocar a expressão do índice entre colchetes array[index] e obter o item do array nesse índice.
No entanto, acessar itens do final usando o acessador regular não é conveniente, pois não aceita índices negativos. Então, por exemplo, para acessar o último elemento do array, você deve usar uma expressão alternativa:
const lastItem = array[array.length - 1];
Felizmente, o novo método array.at(index) permite acessar os elementos do array por índice como um acessador regular. Além disso, array.at(index) aceita índices negativos, caso em que o método pega elementos do final:
const lastItem = array.at(-1);
Obrigado por ler! Espero que tenha gostado do artigo, até a próxima.
Top comments (1)
Boa, Ivan!