Получение элементов массива в TypeScript

Этот урок показывает, как получить один элемент из массива: по его позиции, по условию или случайным образом. Он также показывает, как проверить, существует ли элемент вообще.

В TypeScript есть два значения, означающие «нет значения»: null и undefined. Когда поиск может не удаться, ответом будет undefined. Рядом со значением нет второго флага: отсутствующий элемент и есть undefined.

Чтение позиции, которой не существует, например words[5] в массиве из 5 элементов, не останавливает программу. Вы получаете undefined. Тип string | undefined нужен именно для того, чтобы напоминать вам об этом случае.

Чтобы превратить этот undefined в собственное значение, используйте оператор ??. Он берёт правую часть, только когда левая равна null или undefined.

Массивы несут большинство этих инструментов в виде методов: at(), find(), findLast(), includes() и every(). Для остального вы один раз пишете небольшую вспомогательную функцию.

У каждого элемента массива есть позиция, которая называется индексом. Первый индекс — 0, поэтому последний равен words.length - 1.

Чтобы прочитать элемент по позиции, напишите индекс в квадратных скобках: words[3]. Для последнего элемента есть также words.at(-1), который отсчитывает от конца.

Несуществующий индекс даёт undefined, а не ошибку. Поэтому честный тип для words[i] — это string | undefined: может быть, там строка, а может быть, ничего.

Методов elementAtOrNull() и elementAtOrElse() нет. Они и не нужны: отсутствующий элемент уже равен undefined, а ?? подставляет вместо него ваше собственное значение.

words[3] читает элемент по индексу 3. Поскольку отсчёт начинается с 0, это четвёртое слово, поэтому программа выводит four.

Первый элемент — это words[0]. Последний — words.at(-1): at() принимает отрицательный индекс и отсчитывает от конца, поэтому -1 — это последний элемент. Программа выводит one, а затем five.

elementAt() просто читает items[i] и говорит об этом в своём возвращаемом типе: T | undefined. Индекс 1 находится в пределах массива, поэтому первый вызов выводит two. Индекс 5 выходит за пределы, поэтому второй вызов выводит undefined — без падения и без второго true или false рядом со значением.

words[5] равно undefined, поэтому ?? берёт правую часть и вызывает fallback(5). Функция получает индекс, поэтому может построить сообщение Значение для индекса 5 равно undefined.

Часто вы не знаете позицию. Зато вы знаете условие: первое слово длиннее 3 букв, последнее слово, начинающееся с "f". Условие — это функция, которая принимает один элемент и возвращает true или false.

Для первого совпадения у массивов есть find(). Он идёт от начала и возвращает первый элемент, прошедший проверку, или undefined, если не проходит ни один.

findLast() делает тот же обход в другую сторону, от последнего индекса к 0. Первый встреченный элемент — это последнее совпадение в массиве.

Оба метода останавливаются, как только находят совпадение, поэтому остаток массива никогда не проверяется. А поскольку «ничего не совпало» — это просто undefined, вы проверяете результат через !== undefined или задаёте значение по умолчанию через ??.

find() возвращает первое слово, для которого s.length > 3. "one" и "two" слишком короткие, поэтому программа выводит three.

findLast() начинает с последнего индекса и движется вниз. Первое встреченное слово, начинающееся с "f", — это "five", поэтому он останавливается там и программа выводит five.

Ни одно слово не длиннее 6 букв, поэтому find() возвращает undefined, а ?? "не найдено" заставляет программу вывести не найдено. В массиве чисел первое чётное число — 2; проверка !== undefined — это то, как программа узнаёт, что что-то найдено.

findLast() проходит числа в обратном порядке, поэтому первое встреченное чётное число — это последнее в массиве: 4, по индексу 3. Оно находится сразу же.

Иногда в массиве есть дыры: несколько элементов равны null или undefined, а вам нужно первое настоящее значение.

Обход снова выполняет find(). Условие — v !== null && v !== undefined.

Если записать его прямо в стрелочную функцию, результат всё равно имел бы тип number | string | null | undefined: проверка выполняется во время выполнения, но тип от этого не меняется. Перенесите проверку в именованную функцию, возвращаемый тип которой — v is number | string (такая функция называется стражем типа), и тип результата сам потеряет null и undefined.

Массив в примере одновременно содержит число, строку и null, поэтому его тип — объединение всех этих типов.

Первый элемент равен null, поэтому он пропускается. Следующий — 0, который не равен ни null, ни undefined, поэтому find() возвращает его и останавливается — "true" так и не проверяется. Обратите внимание, что 0 сохраняется: проверка спрашивает про null и undefined, а не про истинность или ложность.

Чтобы выбрать случайный элемент, выберите случайный индекс. Допустимый индекс — это целое число от 0 до numbers.length - 1.

У массивов нет метода random(), поэтому индекс, как обычно, попадает в квадратные скобки.

Math.random() даёт другое число при каждом запуске. Именно это и нужно в настоящей программе, но тогда этот урок каждый раз выводил бы что-то другое. Поэтому пример инициализирует собственный крошечный генератор фиксированным числом 42. Одно и то же зерно всегда даёт один и тот же индекс, что делает результат воспроизводимым. Используйте Math.random(), когда вам действительно нужен разный элемент при каждом запуске.

С зерном 42 генератор выбирает индекс 1, поэтому программа выводит 2. Измените зерно — и может получиться другое число.

Чтобы проверить, есть ли значение в массиве, используйте includes(). Он возвращает true или false.

Метода containsAll() нет, но every() даёт вам его в одну строку: wanted.every(v => words.includes(v)) равно true, только когда найдено каждое искомое значение. every() останавливается на первом отсутствующем значении.

Метода isEmpty() тоже нет. Сравнивайте длину: words.length === 0 означает «пусто», а words.length > 0 — «не пусто».

"four" есть в массиве, поэтому первая проверка выводит true. "zero" в массиве нет, поэтому вторая выводит false.

И "four", и "one" есть в массиве, поэтому containsAll() возвращает true. "zero" отсутствует, поэтому второй вызов возвращает false.

У empty длина 0, поэтому empty.length === 0 равно true. В words 5 элементов, поэтому words.length > 0 тоже равно true.