Novedades de ECMA Script 13: Uso de At en Arreglos JavaScript

Clase 33 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

El método at de arrays sirve para acceder a los elementos a partir del índice.

array.at(índice)

Índices positivos y negativos en arrays

Los índices positivos comienzan desde 0 hasta la longitud total menos uno, de izquierda a derecha del array. El índice 0 es la primera posición.

[0,1,2,3, ...., lenght-1]

Los índices negativos comienzan desde -1 hasta el negativo de la longitud total del array, de derecha a izquierda. El índice -1 es la última posición.

[-lenght, ...,  -3, -2, -1]

Cómo utilizar el método `at`

La utilidad más importante de este método es para manejar índices negativos. Algo que no se puede con la notación de corchetes.

const nombres = ["Andres", "Valeria", "Ana", "Ramiro", "Richard"]

nombres.at(-1) // "Richard"
nombres[-1] // undefined
nombres.at(-3) // "Ana"
nombres[nombres.length -1] // "Richard"

Puedes utilizar la notación de corchetes, pero necesitas obtener la longitud del array y restarle una unidad, generando mucho código que puede volverse difícil de leer.

nombres[nombres.length -1] // "Richard"

Contribución creada por Andrés Guano (Platzi Contributor).

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :)

ES13:

const array = ["one", "two", "three", "four", "five", "six"];

console.log(array[array.length - 1]);
console.log(array.at(-1));

Josue Cerron Tuesta

student•

Gracias!

Felix Torres Javier Antonio

student•

gracias por el aporte

Josue Cerron Tuesta

student•

Aquí la fake api de Platzi.

Teo Zavala

student•

gracias por el aporte

David Muñoz Sáez

student•

El índice negativo de .at devuelve el elemento del array contando desde el último elemento hacia al primero. Si bien array_at(-1) devuelve el último elemento, array_at(-2) devuelve el penúltimo. Si la magnitud del índice negativo exede la longitud del array, devolverá Undefined, igual que al solicitar un índice positivo que exceda el final del array.

Kevin Giovanni Cano Blanco

student•

Este está interesante, hace lo mismo pero con código mas limpio y claro.

Jeanpierre Echevarria

student•

El método at() recibe un valor numérico entero y devuelve el elemento en esa posición, permitiendo valores positivos y negativos. Los valores negativos contarán desde el último elemento del array.

Esto no sugiere que haya algo mal con usar la notación de corchetes. Por ejemplo, array[0] devolvería el primer elemento. Sin embargo, en lugar de usar array.length para los últimos elementos; ej. array[array.length-1] para el último elemento, puede llamar array. at(-1).

Esteban Patiño

student•

para los que necesiten actualizar a la version 16 de node esta es una guia

Marco Alan García

student•

¿Por qué no se implementó como "array[-1]" como en python?

Marco Alan García

student•

Encontré la respuesta del TC39

"For many years, programmers have asked for the ability to do "negative indexing" of JS Arrays, like you can do with Python. That is, asking for the ability to write arr[-1] instead of arr[arr.length-1], where negative numbers count backwards from the last element.

Unfortunately, JS's language design makes this impossible. The [] syntax is not specific to Arrays and Strings; it applies to all objects. Referring to a value by index, like arr[1], actually just refers to the property of the object with the key "1", which is something that any object can have. So arr[-1] already "works" in today's code, but it returns the value of the "-1" property of the object, rather than returning an index counting back from the end."

Josue Cerron Tuesta

student•

Me preguntaba lo mismo. Gracias por la info bro! Ahora con el at() podemos hacerlo!

Carlos Andrade

student•

33/35 ES13: at El método at de los arrays en JavaScript permite acceder a los elementos utilizando índices positivos y negativos, siendo útil para manejar los índices negativos.

Ejemplo Acceder al primer y último elemento del array utilizando el método at y los indices positivos y negativos:

const frutas = ['manzana', 'pera', 'naranja', 'plátano'];

// Acceder al primer elemento del array con el índice positivo 0
console.log(frutas.at(0)); // 'manzana'

// Acceder al último elemento del array con el índice negativo -1
console.log(frutas.at(-1)); // 'platano'

Acceder a un elemento en el medio del array utilizando el método at y los índices positivos y negativos:

const numero = [10, 20, 30, 40, 50];

// Acceder al elemento en la posición 2 del array con el índice positivo 2
console.log(numeros.at(2)); // 30

// Acceder al elemento en la posición 3 del array con el índice negativo -2
console.log(numero.at(-2)); // 40

Mostrar la diferencia entre el uso del método at y la notación de corchetes para acceder al último elemento del array:

const colores = ['rojo', 'verde', 'azul'];

// Acceder al último elemento del array con el método at
console.log(colores.at(-1)); // azul

// Acceder al último elemento del array con la notación de corchees
console.log(colores[colores.length -1]); // 'azul'

Eduardo Oswaldo Luna Silva

student•

Por si a alguno no le funciona el comando at, verificar que tengan instalado una version adecuada de Node, usen los siguientes comandos para manejar versiones de node, (Primero instalen NVM), pueden usar otra version que no sea la ultima, para esto en vez de “latest” indicar la que desean y en 18.10.0 indiquen la que les indique el comando nvm list.

nvm install latest
nvm list 
nvm use 18.10.0

Leidy Melissa Trejos Pamplona

student•

Muchas gracias

Ricardo Alfonso Chavez Vilcapoma

student•

Mi resumen:

Rolando Osorio

student•

Para la primera pregunta de "como encontrarias el ultimo valor del array sin saber cuantos valores hay" encontre esta solución medio deficiente:

const array = ["one", "two", "three", "four", "five", "six"];

let element
for (let i = 0; i < array.length; i++) {
    element = array[i];
    
}
console.log(element)

Cesar Torres

student•

También es posible usar atributos privados en las clases de la misma forma en que se definen los metodos privados 😃.

class Person {
  #name; // Private attribute

  constructor(name) {
    this.#name = name; // Initialize the private attribute in the constructor
  }

  getName() {
    return this.#name;
  }

  changeName(newName) {
    this.#name = newName;
  }
}

Luis Alfredo Suarez

student•

ES13: .at()

El método ".at()" es una función introducida en ECMAScript 2022 (ES13) para acceder a los elementos de una matriz o cadena en un índice específico. Está disponible en instancias de objetos Array y String.
A continuación se muestra un ejemplo de uso del método ".at()" con un array:

const miArray = ['apple', 'banana', 'orange'];
console.log(myArray.at(1)); // Salida: 'banana'

En este ejemplo, la llamada al método ".at(1)" recupera el elemento en el índice 1 (indexación basada en cero) de la matriz myArray, que es 'banana'.
El método ".at()" también se puede utilizar con cadenas:

const myString = 'Hello, World!';
console.log(myString.at(7)); // Salida: 'W'

En este caso, la llamada al método ".at(7)" recupera el carácter en el índice 7 de la cadena myString, que es 'W'.
Es importante tener en cuenta que el método ".at()" no está muy extendido en todos los entornos JavaScript ni en las versiones antiguas de ECMAScript. Siempre es una buena práctica comprobar la compatibilidad antes de utilizar esta función.

Espero sea de utilidad. 👨‍💻

Iván Camilo Jaramillo García

student•

Genial!!!

Miguel Angel Castillo Enriquez

student•

Una cosa importante que se puede aclarar que at() recorre el array (Índice) de adelante, desde numero positivos, o hacia atrás, desde numero negativos, es decir si colocas at(0) = index 1 at(1) = index 2 at(n) = index n at(-1) = ultimo índice at(-2) = penúltimo índice at(-n) = recorre el índice n veces de atrás hacia adelante

Jonathan Garcia

student•

Jonathan Garcia

student•

excelente 👏

Kyb3r Cipher

student•

Buena classe y buen aporte de at()

Emmanuel Josue Hernandez Velazco

student•

Un breve resumen

Este método se ha creado con el fin de poder acceder a un elemento especifico de un array utilizando su posición, el método acepta dos tipos de valores, positivos y negativos, si ingresamos valores positivos el método buscara el número empezando por la posición 0 luego 1 y así sucesivamente, si ingresamos valores negativos el método empezara a buscar por el ultimo valor del elemento, por ejemplo el valor -1 para el método es la ultima posición, el valor -2 es la penultima posición y así sucesivamente.

Aparte del video también leí https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/at

Andrés Soret Chacin

student•

El método propuesto at() debería ayudarte a acceder a los elementos de un arreglo usando un número de índice negativo. A partir de ahora, esto no es posible. tu puede acceder elemento solo desde el inicio del arreglo usando un número de índice positivo.

Acceder elementos de la parte de atrás del arreglo es posible usando el valor length. Con la inclusión del método at(), tú podrás acceder a los elementos usando ambos índices positivo y negativo con un solo método.

const junkFoodILove = ['?', '?', '?', '?', '?', '?', '?', '?'];

junkFoodILove.at(0); // ?
junkFoodILove.at(3); // ?
junkFoodILove.at(-1); // ?
junkFoodILove.at(-5); // ?
junkFoodILove.at(-8); // ?
junkFoodILove.at(10); // undefined

Aquí hay una demostracion rapida de ello:

Puedes usar este polyfill para lograr la funcionalidad del método at() hasta que este método sea añadido al lenguaje JavaScript. Por favor checa este repositorio de GitHub para los ejemplos del método at(): https://github.com/atapas/js-array-at-method.

Novedades de ECMA Script 13: Uso de At en Arreglos JavaScript

Índices positivos y negativos en arrays

Cómo utilizar el método at

Cómo utilizar el método `at`