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

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

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

1. Индексация — самый простой способ

В JavaScript массивы начинаются с индекса 0:

const array = [1, 2, 3, 4, 5];
const first = array[0];  // 1

const words = ['hello', 'world'];
const firstWord = words[0];  // 'hello'

const mixed = [true, 42, 'text', null];
const firstElem = mixed[0];  // true

Проблема: если массив пуст, вернёт undefined:

const empty = [];
const first = empty[0];  // undefined (не ошибка, просто undefined)

console.log(first);  // undefined
console.log(first + 10);  // NaN (undefined + 10 = NaN)

2. Метод at() — современный способ

Введён в ES2022, работает с отрицательными индексами:

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

const first = array.at(0);   // 1
const last = array.at(-1);   // 5 (первый с конца)
const second = array.at(-2);  // 4 (второй с конца)

// Пустой массив
const empty = [];
const first = empty.at(0);  // undefined

Плюсы:

• Поддерживает отрицательные индексы
• Синтаксис понятнее
• Более безопасен (не вызывает ошибок)

// Полезные примеры с at()
const items = ['a', 'b', 'c', 'd'];

console.log(items.at(0));   // 'a' (первый)
console.log(items.at(1));   // 'b' (второй)
console.log(items.at(-1));  // 'd' (последний)
console.log(items.at(-2));  // 'c' (предпоследний)

3. Деструктуризация — для современного кода

Простая деструктуризация:

const array = [1, 2, 3, 4, 5];
const [first] = array;  // 1

const words = ['hello', 'world', 'JavaScript'];
const [firstWord] = words;  // 'hello'

console.log(first);      // 1
console.log(firstWord);  // 'hello'

С пропусками:

const array = [10, 20, 30, 40, 50];

// Взять первый и третий элемент
const [first, , third] = array;
console.log(first, third);  // 10, 30

// Взять первый и остаток
const [head, ...tail] = array;
console.log(head);   // 10
console.log(tail);   // [20, 30, 40, 50]

С дефолтным значением:

const empty = [];
const [first = 'default'] = empty;
console.log(first);  // 'default'

const array = [null];
const [first = 'default'] = array;
console.log(first);  // null (не 'default', потому что null есть)

4. Метод values() и next() — для итератора

Менее используется, но работает:

const array = [1, 2, 3, 4, 5];
const iterator = array.values();
const first = iterator.next().value;  // 1

const words = ['a', 'b', 'c'];
const [firstWord] = words.values();  // 'a'

5. Функции для получения первого элемента

Простая функция:

function getFirst(array) {
  return array[0];
}

getFirst([1, 2, 3]);  // 1
getFirst([]);          // undefined

С обработкой пусто массива:

function getFirst(array, defaultValue = null) {
  return array.length > 0 ? array[0] : defaultValue;
}

getFirst([1, 2, 3]);        // 1
getFirst([], 'empty');      // 'empty'
getFirst([null, 2, 3]);     // null

С типизацией (TypeScript):

function getFirst<T>(array: T[], defaultValue?: T): T | undefined {
  return array.length > 0 ? array[0] : defaultValue;
}

const first: number = getFirst([1, 2, 3]);  // 1
const firstWord: string = getFirst(['a', 'b']);  // 'a'

6. Чистая функция (functional approach)

const getFirst = (arr) => arr[0];
const getFirstSafe = (arr, def = null) => arr?.[0] ?? def;

// Использование
console.log(getFirst([1, 2, 3]));         // 1
console.log(getFirstSafe(null, 'empty')); // 'empty' (безопасно)
console.log(getFirstSafe([]));            // null

7. Optional chaining (?.) для безопасности

const array = [1, 2, 3];
const empty = null;

console.log(array?.[0]);   // 1 (безопасно)
console.log(empty?.[0]);   // undefined (не ошибка)

// С дефолтом
const first = array?.[0] ?? 'default';
console.log(first);  // 1

const firstEmpty = empty?.[0] ?? 'default';
console.log(firstEmpty);  // 'default'

Сравнение способов

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

1. Безопасное получение первого элемента:

// В React компоненте
function CommentList({ comments = [] }) {
  const [first] = comments;  // Деструктуризация
  
  return (
    <div>
      {first ? (
        <div>Latest: {first.text}</div>
      ) : (
        <p>No comments yet</p>
      )}
    </div>
  );
}

2. Логирование данных:

const items = fetchItems();
const firstItem = items?.[0];

if (firstItem) {
  console.log('First item:', firstItem);
} else {
  console.warn('No items found');
}

3. Обработка API ответов:

async function getFirstUser() {
  const response = await fetch('/api/users');
  const users = await response.json();
  
  // Безопасное получение первого
  const [first] = users;
  
  return first ?? null;
}

4. Работа с опциональными данными:

const data = {
  items: [1, 2, 3]
};

const first = data?.items?.[0];  // 1
console.log(first);  // 1

const noData = null;
const firstAgain = noData?.items?.[0];  // undefined
console.log(firstAgain);  // undefined

Выводы

Выбор способа зависит от задачи:

1. Простой случай → array[0]
2. С дефолтом → array[0] ?? 'default'
3. Отрицательные индексы → array.at(-1) для последнего
4. Деструктуризация → const [first] = array (красиво в React)
5. Null-safe → array?.[0]
6. Функция-хелпер → создать утилиту для переиспользования

Лучшая практика для современного кода:

// Для простого случая
const first = array?.[0];

// Для более сложного случая с дефолтом
const first = array?.[0] ?? defaultValue;

// В деструктуризации
const [first = defaultValue] = array;