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

Получение первого и последнего элементов массива

Это простая, но практическая задача, которая часто встречается в реальном коде. Есть несколько способов её решить, от базовых до элегантных.

1. Классический способ (не зная длины)

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

const first = arr[0];
const last = arr[arr.length - 1];

console.log(first, last); // 1 5

Это работает всегда, даже если массив пуст. При пустом массиве оба будут undefined.

2. Деструктуризация (Современный JavaScript)

Это самый читаемый способ, если ты используешь ES6+:

const arr = [1, 2, 3, 4, 5];
const [first, ...middle, last] = arr;

console.log(first, last); // 1 5
console.log(middle);       // [2, 3, 4]

Плюсы: Очень читаемо, одна строка, можно получить середину. Минусы: Создаёт промежуточный массив, медленнее на больших массивах.

3. Использование .at() (Новый метод)

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

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

const first = arr.at(0);  // 1
const last = arr.at(-1);  // 5

console.log(first, last); // 1 5

Плюсы: Самый элегантный, не создаёт промежуточные массивы, интуитивен. Минусы: Не поддерживается в старых браузерах.

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

const arr = Array.from({ length: 10000 }, (_, i) => i);

// Индексы - быстрый способ
console.time('индексы');
for (let i = 0; i < 100000; i++) {
  const first = arr[0];
  const last = arr[arr.length - 1];
}
console.timeEnd('индексы'); // примерно 2ms

// Деструктуризация - медленнее
console.time('деструктуризация');
for (let i = 0; i < 100000; i++) {
  const [first, ...middle, last] = arr;
}
console.timeEnd('деструктуризация'); // примерно 500ms

// at() - быстрый способ
console.time('at');
for (let i = 0; i < 100000; i++) {
  const first = arr.at(0);
  const last = arr.at(-1);
}
console.timeEnd('at'); // примерно 3ms

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

function formatList(items) {
  if (items.length === 0) return '';
  if (items.length === 1) return items[0];

  const first = items[0];
  const last = items[items.length - 1];
  const middle = items.slice(1, -1);

  return first + ', ' + middle.join(', ') + ', и ' + last;
}

console.log(formatList(['яблоко', 'банан', 'апельсин', 'груша']));
// выведет: яблоко, банан, апельсин, и груша

Рекомендации

Используй .at(), если поддержка старых браузеров не требуется. Используй индексы для максимальной совместимости и производительности. Избегай деструктуризации со spread на больших массивах.

Итог

Простая задача, но есть нюансы. Выбирай подход в зависимости от требований к совместимости и производительности. Для большинства случаев - просто используй индексы, это надёжно и быстро.