Как взять последний элемент из массива?

Как взять последний элемент из массива?

Взятие последнего элемента массива — это одна из самых частых операций в программировании. Существует несколько способов, каждый с собственными преимуществами и недостатками.

Способ 1: Индексация с отрицательным индексом (не работает в JS!)

const arr = [1, 2, 3, 4, 5];

// В Python это работает:
// last = arr[-1]  # Результат: 5

// В JavaScript это НЕ работает:
const last = arr[-1];  // undefined!
const last = arr[-1];  // undefined, потому что это property, не индекс

Способ 2: Через length (Классический способ)

const arr = [1, 2, 3, 4, 5];

// Самый распространённый способ
const last = arr[arr.length - 1];  // 5
const secondLast = arr[arr.length - 2];  // 4

// Проверка на пустой массив
if (arr.length > 0) {
  const last = arr[arr.length - 1];
}

Плюсы:

• Самый быстрый способ (O(1))
• Работает всегда
• Понятный и явный

Минусы:

• Нужно проверять, не пустой ли массив
• Многословно

Способ 3: at() метод (Современный способ)

const arr = [1, 2, 3, 4, 5];

// Новый метод (ES2022)
const last = arr.at(-1);  // 5
const secondLast = arr.at(-2);  // 4
const first = arr.at(0);  // 1

// Возвращает undefined для пустого массива
const emptyLast = [].at(-1);  // undefined

Плюсы:

• Очень элегантный и читаемый
• Поддерживает отрицательные индексы
• Если массив пустой, возвращает undefined (не ошибка)

Минусы:

• Работает только в современных браузерах (ES2022)
• Может быть медленнее чем arr[arr.length - 1]

Способ 4: Деструктуризация

const arr = [1, 2, 3, 4, 5];

// Получить последний элемент через rest параметр
const [, , , , last] = arr;  // 5, но нужно знать длину!

// Лучше с rest:
const [first, ...rest] = arr;
const last = rest[rest.length - 1];  // Многословно

// Для получения последнего и остальных:
const [...init, last] = arr;
console.log(last);  // 5
console.log(init);  // [1, 2, 3, 4]

Плюсы:

• Одновременно получаем остальные элементы
• Современный синтаксис

Минусы:

• Создаёт новый массив (медленнее)
• O(n) операция!
• Менее читаемо

Способ 5: pop() метод (Деструктивный)

const arr = [1, 2, 3, 4, 5];

// pop() удаляет И возвращает последний элемент
const last = arr.pop();  // 5
console.log(arr);  // [1, 2, 3, 4] - МАССИВ ИЗМЕНИЛСЯ!

// Для пустого массива:
const emptyLast = [].pop();  // undefined

Плюсы:

• Одновременно удаляет элемент
• Полезно для работы со стеком

Минусы:

• МУТИРУЕТ исходный массив!
• Если нужен элемент без удаления - использовать нельзя
• В React и других фреймворках ОПАСНО (может вызвать баги)

Способ 6: Методы высшего порядка

const arr = [1, 2, 3, 4, 5];

// Array.slice() - возвращает копию
const last = arr.slice(-1)[0];  // 5
const lastTwo = arr.slice(-2);  // [4, 5]

// Array.splice() - мутирует массив
const last = arr.splice(-1)[0];  // 5, arr изменился!

// Через reduce (для очень больших операций)
const last = arr.reduce((_, item) => item);  // 5, но O(n)!

Плюсы:

• slice() не мутирует
• Можно получить несколько последних элементов

Минусы:

• slice() медленнее (создаёт новый массив)
• splice() опасен (мутирует)
• O(n) операции

Сравнение производительности

const arr = new Array(1000000).fill(0).map((_, i) => i);

// Тест 1: arr[arr.length - 1]
console.time('index');
for (let i = 0; i < 1000000; i++) {
  const _ = arr[arr.length - 1];
}
console.timeEnd('index');  // ~1ms

// Тест 2: arr.at(-1)
console.time('at');
for (let i = 0; i < 1000000; i++) {
  const _ = arr.at(-1);
}
console.timeEnd('at');  // ~2ms

// Тест 3: arr.slice(-1)[0]
console.time('slice');
for (let i = 0; i < 1000000; i++) {
  const _ = arr.slice(-1)[0];
}
console.timeEnd('slice');  // ~50ms

// Вывод: arr[arr.length - 1] самый быстрый!

Best Practices

1. Для большинства случаев - используй at()

// Читаемо, безопасно, современно
const arr = [1, 2, 3, 4, 5];
const last = arr.at(-1);  // 5
const first = arr.at(0);  // 1

2. Если нужна максимальная производительность - используй arr[arr.length - 1]

// В критичных местах (в цикле миллион раз)
const last = arr[arr.length - 1];

3. НИКОГДА не используй pop() если не нужно удалять

// ПЛОХО
const last = arr.pop();  // Массив изменился!

// ХОРОШО
const last = arr.at(-1);  // Массив не изменился

4. Для получения нескольких последних элементов - используй slice()

const arr = [1, 2, 3, 4, 5];

// Последние 3 элемента
const lastThree = arr.slice(-3);  // [3, 4, 5]

5. В TypeScript добавь проверку типа

function getLastElement<T>(arr: T[]): T | undefined {
  return arr.at(-1);
}

const last = getLastElement([1, 2, 3]);  // 3
const empty = getLastElement([]);  // undefined

Практический пример в React

interface Message {
  id: string;
  content: string;
  timestamp: Date;
}

function Chat({ messages }: { messages: Message[] }) {
  const lastMessage = messages.at(-1);
  const previousMessage = messages.at(-2);

  return (
    <div>
      {lastMessage && (
        <div className="last-message">
          <p>{lastMessage.content}</p>
          <time>{lastMessage.timestamp.toLocaleString()}</time>
        </div>
      )}
    </div>
  );
}

Выводы

Итоговая рекомендация: используй arr.at(-1) — это современный, безопасный и читаемый способ получить последний элемент массива.