JS метод Array.at()

Опис

Метод at() забезпечує доступ до елементів масиву на основі індексу. Якщо у вас є масив із 10 елементами і ви хочете швидко отримати доступ до п'ятого елемента, просто використовуйте array.at(4), оскільки індексація починається з 0. Для позитивних індексів він веде себе аналогічно індексації в квадратних дужках, але також пропонує можливість доступу до елементів масиву з від'ємними індексами.

Для прикладу, array[0] та array.at(0) однаково повертають нам перший елемент масиву. Проте, якщо ви намагаєтеся відрахувати елементи масиву з кінця, ви не зможете використовувати array[-1], як це допустимо у Python або R, оскільки всі значення в квадратних дужках сприймаються буквально як рядкові властивості. Отже, ви отримаєте доступ до array["-1"], що є простою рядковою властивістю, а не індексом масиву.

Якщо вам потрібно отримати останній елемент масиву, не знаючи його індекс, то зазвичай рекомендується використовувати властивість length, обчислюючи індекс за допомогою цього значення. Ось приклад:

$array[array.length - 1]

Але метод at() вирішує цю проблему в більш простий спосіб. Замість того, щоб розраховувати індекс на основі довжини масиву, можна використовувати від'ємне значення:

var arr = ['dog', 'cat', 'monkey'];
var last_el = arr.at(-1); // Звертання до останнього елемента => 'monkey'
var penultimate_el = arr.at(-2); // Поверне передостанній елемент масиву => 'cat'

Метод at() не обмежується лише масивами. Він ефективно працює з об'єктами, що мають властивість length та цілочисельні ключі. Наприклад, метод at() також можна застосовувати до рядків. Це особливо корисно, коли вам потрібно отримати доступ до конкретного символу в рядку. Наприклад, 'Hello'.at(0) поверне 'H', а 'Hello'.at(-1) поверне 'o'.

Нотатка:	Метод `at()` дозволяє отримувати доступ до елементів масиву за допомогою індексу, що може бути від'ємним. Наприклад, `array.at(0)` поверне перший елемент масиву, а `array.at(-1)` поверне останній елемент.
Нотатка:	Використання методу `at()` є безпечнішим та зручнішим способом доступу до елементів масиву, оскільки він автоматично перевіряє коректність переданого індексу. Якщо індекс виходить за межі масиву, метод поверне `undefined`, уникнувши помилки "Index out of range".
Нотатка:	Зверніть увагу, що метод `at()` не змінює сам масив. Він лише повертає значення елементу за вказаним індексом, не змінюючи стану масиву.

Синтаксис

at(index)

Параметри

*index: Індекс елемента масиву, що буде повернуто, враховується, починаючи з нуля і перетворюється в ціле число. Від'ємний індекс відраховується з кінця масиву — якщо index < 0, то використовується значення index + array.length.

Return

element: Елемент масиву, що відповідає заданому індексу.
undefined: Завжди буде повертатися значення undefined, у випадку коли index < -array.length або index >= array.length

Переглядачі

Переглядач
	92	90	15.4	78	92

Переглядач
	92	92	90	15.4

Переглядач
	16.6.0	1.12

Приклади

Даний приклад демонструє використання методу at() для отримання елемента масиву за вказаним індексом.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExOXwaK">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Приклад містить функцію, яка повертає останній елемент зазначеного масиву.

// Наш масив з елементами
const cart = ["apple", "banana", "pear"];

// Функція, яка повертає останній елемент заданого масиву
function returnLast(array) {
  return array.at(-1);
}

// Отримати останній елемент нашого масиву 'cart'
const item1 = returnLast(cart);
console.log(item1); // 'pear'

// Додати елемент до нашого масиву 'cart'
cart.push("orange");
const item2 = returnLast(cart);
console.log(item2); // 'orange'

У цьому прикладі порівнюються різні способи вибрати передостанній елемент масиву. Всі показані методи є правильними, проте цей приклад підкреслює зрозумілість методу at().

// Наш масив з елементами
const colors = ["red", "green", "blue"];

// Використання властивості length
const lengthWay = colors[colors.length - 2];
console.log(lengthWay); // 'green'

// Використання методу slice(). Зверніть увагу, що повертається масив
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // 'green'

// Використання методу at()
const atWay = colors.at(-2);
console.log(atWay); // 'green'

Метод at() зчитує властивість length у this об'єкта й обчислює індекс для доступу.

const arrayLike = {
  length: 2, 
  0: "a",
  1: "b", 
  2: "c", // ігнорується at(), оскільки length дорівнює 2
};

console.log(Array.prototype.at.call(arrayLike, 0)); // "a"
console.log(Array.prototype.at.call(arrayLike, 2)); // undefined

JS довідник

Events

JavaScript

Statements