Array.at() в JavaScript — елемент з кінця масиву

Опис

Метод 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) поверне останній елемент.

автор: 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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

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

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

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

<header>
  <h2 class="title">Метод at() для масивів JavaScript</h2>
  <p class="description">Метод at() повертає елемент масиву за вказаним індексом.</p>
</header>
<main>
  <code>const array1 = [5, 12, 8, 130, 44];</code>
  <div id="output1"></div>
  <div id="output2"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

code {
  display: block;
  margin-bottom: 12px;
}

#output1,
#output2 {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
}

const array1 = [5, 12, 8, 130, 44];

let index = 2;
document.getElementById("output1").innerText = `З використанням індексу ${index} отримуємо елемент - ${array1.at(index)}`;

index = -2;
document.getElementById("output2").innerText = `З використанням індексу ${index} отримуємо елемент - ${array1.at(index)}`;
//# sourceURL=pen.js

const week = ['пн', 'вт', 'ср', 'чт', 'пт'];

console.log(week.at(-1), week.at(-2));    // пт чт
console.log(week[-1]);                    // undefined — дужки так не вміють
console.log(week[week.length - 1]);       // пт — класична форма

// за межами масиву — undefined, а не помилка
console.log(week.at(99), [].at(-1));      // undefined undefined

// slice(-1) повертає МАСИВ, at(-1) — елемент
console.log(week.slice(-1), week.at(-1)); // ["пт"] пт

// дробовий індекс відкидається до цілого
console.log(week.at(1.9));                // вт

// у рядків at() рахує кодові одиниці, а не символи
console.log('ой🙂'.at(-1) === '🙂');       // false
console.log([...'ой🙂'].at(-1) === '🙂');  // true

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