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'.

автор: Bond

Нотатка

Метод at() дозволяє отримувати доступ до елементів масиву за допомогою індексу, що може бути від'ємним. Наприклад, array.at(0) поверне перший елемент масиву, а array.at(-1) поверне останній елемент.

автор: Bond
Нотатка

Використання методу at() є безпечнішим та зручнішим способом доступу до елементів масиву, оскільки він автоматично перевіряє коректність переданого індексу. Якщо індекс виходить за межі масиву, метод поверне undefined, уникнувши помилки "Index out of range".

автор: Bond
Нотатка

Зверніть увагу, що метод at() не змінює сам масив. Він лише повертає значення елементу за вказаним індексом, не змінюючи стану масиву.

автор: Bond

Синтаксис

at(index)

Параметри

index

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

автор: Bond

Повернення

element

Елемент масиву, що відповідає заданому індексу.

автор: Bond

undefined

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
92 90 15.4 78 92
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
92 92 90 15.4
Підтримка: серверні переглядачі
Переглядач Node.js Deno
16.6.0 1.12

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі порівнюються різні способи вибрати передостанній елемент масиву. Всі показані методи є правильними, проте цей приклад підкреслює зрозумілість методу 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'
автор: Bond

Метод 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
автор: Bond

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

автор: Bond

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

// Наш масив з елементами
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'
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід