Array.at() — удобный доступ к элементам массива с конца

Есть задача, которую каждый JavaScript-разработчик решает регулярно: получить последний элемент массива. Казалось бы, мелочь. Но стандартного красивого способа долго не было.

Можно писать arr[arr.length - 1] — работает, но громоздко. Можно использовать arr.slice(-1)[0] — ещё хуже. Оба варианта требуют знать длину массива или создавать промежуточный массив ради одного элемента.

В 2022 году в JavaScript появился метод .at(), который решает это элегантно.

Попробуйте сами

Введите индекс и посмотрите, какой элемент вернёт .at(). Попробуйте отрицательные числа:

Как это работает

.at() принимает индекс и возвращает элемент на этой позиции. Положительные индексы работают как обычно — с начала массива. Отрицательные отсчитывают с конца:

const courses = ['HTML', 'CSS', 'JS', 'Git', 'Node', 'React'];

courses.at(0);  // 'HTML'  — первый
courses.at(2);  // 'JS'    — третий
courses.at(-1); // 'React' — последний
courses.at(-2); // 'Node'  — предпоследний

Вот как это выглядит по сравнению со старыми способами:

const last = courses[courses.length - 1]; // было
const last = courses.at(-1);              // стало

Работает не только с массивами

.at() есть не только у массивов, но и у строк, и у типизированных массивов. Принцип тот же:

const str = 'привет';
str.at(0);  // 'п'
str.at(-1); // 'т'

Когда особенно удобно

Метод пригождается в цепочках вызовов, где промежуточного результата нет под рукой:

// было — нужно сохранить в переменную, чтобы узнать длину
const filtered = items.filter(x => x.active);
const last = filtered[filtered.length - 1];

// стало — работаем с цепочкой напрямую
const last = items.filter(x => x.active).at(-1);

Поддержка в браузерах

.at() работает в Chrome 92+, Firefox 90+, Safari 15.4+. Поддержка полная во всех современных браузерах. Актуально на caniuse.com.

Что запомнить

Array.at() — маленький, но приятный метод. Отрицательные индексы избавляют от громоздкого arr[arr.length - 1]. Особенно удобно в цепочках, где нельзя заранее сохранить промежуточный результат в переменную.

Если хотите глубже разобраться с JavaScript — почитайте про типы данных в JavaScript и быстрый гайд по ECMAScript 2022.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.