Понимание flatMap() и других массивов TypeScript

Массивы являются неотъемлемой частью TypeScript, позволяя разработчикам хранить и манипулировать коллекциями данных. Объект Array поставляется с различными методами, облегчающими работу с массивами. Одним из таких методов является метод flatMap().

В этой статье мы рассмотрим, что такое flatMap() и как он работает. Мы также объясним, как объявить массив в TypeScript, и приведём список других полезных методов работы с массивами, доступных в TypeScript, таких, как concat(), copyWithin(), every(), fill(), filter(), flat(), forEach(), shift(), includes() и reduce(). Давайте приступим!

Что такое flatMap()

Метод flatMap() доступен для объекта Array в TypeScript. Он работает аналогично методу map(), но с одним ключевым отличием. Метод flatMap() не только отображает каждый элемент массива в новое значение, но и сглаживает этот массив и добавляет его элемент в результирующий массив.

Зачем использовать flatMap()

Функция flatMap() берет многомерный массив и сжимает его в одноуровневый список значений, сочетая в себе способность map() изменять содержимое массива.

Чтобы полностью понять, что делает flatMap(), нужно иметь представление, что делает flat(). При сглаживании массива удаляются все вложенные массивы, остаётся только одноуровневый массив, содержащий все элементы исходного массива. По сути, метод flat() эквивалентен использованию myArray.map.flat().

Как объявить массив в TypeScript

Для объявления массива в TypeScript можно использовать либо нотацию квадратных скобок, либо ключевое слово Array.

Использование нотации квадратных скобок

С помощью обозначения в квадратных скобках имя массива обозначается arrayName. elementType — тип данных элементов, которые будут храниться в массиве, принимается number, string или boolean. Квадратная скобка [] используется для указания того, что переменная является массивом:

const arrayName:elementType[]=[element1,element2,...];

В примере ниже myArray — переменная типа number[], и она инициализируется массивом чисел:

const myArray:number[]=[1,2,3,4,5]

Использование ключевого слова Array

В примере ниже myArray является переменной типа Array<string>, представляющая собой массив строки:

const myArray:Array<string>=['goat','sheep','ram']

Использование flatMap() в TypeScript

Давайте используем flatMap() для сжатия кода в один список, где каждая запись в массиве — название одного фильма:

const Movies: (string | string[])[] = [
    'Dog Soldiers',
    ['In Bruges', 'From Paris with Love'],
    'The Big Lebowski',
    'The Platform',
    'Fight Club',
    'Hotel Rwanda',
    'Moon',
    'Hulu Originals',
    'Lady Bird',
    'Platoon',
    'Wall-E',
  ];
    // объявляет новый массив строк под названием movieTitles
    // использует метод flatMap для массива Movies
 const movieTitles: string[] = Movies.flatMap((movie) =>
  // если элемент является массивом, сплющите его, иначе оберните его в массив
Array.isArray(movie) ? movie : [movie]
  );

  console.log(movieTitles);
// Вывод: ["Dog Soldiers", "In Bruges", "From Paris with Love", "The Big Lebowski", "The Platform", "Fight Club", "Hotel Rwanda", "Moon", "Hulu Originals", "Lady Bird", "Platoon", "Wall-E"]

В приведённом выше примере создаётся массив movieTitles, содержащий все названия фильмов из массива Movies. Массив Movies может содержать вложенные массивы строк, представляющие фильмы с несколькими названиями. Чтобы гарантировать, что каждое название фильма будет представлено как одна строка, мы используем метод flatMap() для сглаживания вложенных массивов в массиве Movies.

Метод flatMap() принимает в качестве аргумента функцию обратного вызова, проверяющая, является ли текущий элемент массива массивом, используя метод Array.isArray(). Если текущий элемент является массивом, то flatMap() сплющивает его в одномерный массив строк.

Если текущий элемент уже является строкой, функция обратного вызова возвращает его как массив из одного элемента. Полученный массив массивов затем сплющивается в один массив строк с помощью flatMap().

После выполнения приведённого выше кода вы увидите следующую ошибку:

Error: Property flatMap does not exist on the type (string|string [])[].

Чтобы исправить эту ошибку, нужно добавить строку "es2019" в массив "lib" в файле tsconfig.json. Параметр "lib" определяет библиотеки, доступны коду TypeScript во время компиляции. По умолчанию TypeScript ориентируется на версию JavaScript "ES5", не включающая метод flatMap().

Поэтому вам нужно указать более позднюю версию JavaScript, включающую этот метод. Вы можете сделать это, добавив строку "es2019" в массив "lib" в файле tsconfig.json. Это сделает метод flatMap() доступным для вашего TypeScript-кода во время компиляции, и ошибка будет устранена.

В примере ниже показано, как будет выглядеть массив "lib" в файле tsconfig.json после добавления "es2019":

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2019", "dom"]
  }
}

Также можно протестировать код с помощью TypeScript playground.

Различные типы массивов в TypeScript

Помимо flatMap(), TypeScript предоставляет множество других полезных методов работы с массивами, включая concat(), copyWithin(), every(), fill(), filter(), flat(), forEach(), shift(), includes() и reduce().

concat()

В TypeScript метод concat() используется для объединения двух или более массивов и возврата нового массива, содержащего все элементы исходных массивов:

 const array1:string[]=['monkey','ape','gorilla']
  const array2:string[]=['goat','sheep','ram']
  const newArray: string[]=array1.concat(array2)
  console.log(newArray);
//Вывод: ['monkey','ape','gorilla','goat','sheep','ram']

В приведённом выше коде примера у нас есть два массива, array1 и array2. Мы используем метод concat() для array1 и передаём array2 в качестве аргумента. Метод concat() возвращает новый массив, содержащий все элементы array1 и array2. Затем мы присваиваем новый массив переменной newArray и выводим его в консоль.

copyWithin()

copyWithin() — встроенный метод, используемый для копирования одинаковых элементов массива внутри одного и того же массива. Метод copyWithin() изменяет исходный массив и возвращает ссылку на изменённый массив:

const array:number[]=[1,2,3,4,5];
array.copyWithin(0,3,5);
console.log(array)
//Вывод: [4,5,3,4,5,]

copyWithin() копирует элемент с индекса 3 по индекс 5 массива в позицию, начинающуюся с индекса 0. Таким образом, элементы с индексами 3 и 4 копируются в позиции, начинающиеся с индекса 0. Приведённый выше код показывает результирующий массив.

every()

Метод every() из TypeScript используется для проверки того, все ли элементы массива проходят тест. Он возвращает булево значение, true или false:

const array:number[]=[1,2,3,4,5,6,7,8,9,10,11]
const allEven=array.every((num)=>num%2 === 0);
console.log(allEven)
//Вывод: false

В нашем примере выше метод every() проверяет, все ли элементы массива являются чётными числами. Функция обратного вызова (num)=>num % 2===0 проверяет, является ли остаток от каждого элемента, делённый на 2, равным 0, то есть чётным. Поскольку в массиве есть нечётные числа, каждый метод возвращает значение false и присваивает его переменной allEven.

fill()

Метод fill() используется для заполнения всех элементов массива от начального до конечного индекса статическим значением:

const arr:string[]=['python','java','golang','ruby','reactjs']
// заполняет массив для индекса 1 и индекса 2 значением 'css'
arr.fill('css', 1,3); // не включает индекс 3 при заполнении
console.log(arr);
//Вывод: ['python','css','css','ruby','reactjs'].

Мы объявляем массив arr типа string[], то есть он может содержать только строки. Затем мы используем метод fill(), чтобы заполнить массив для индекса 1 и индекса 2 значением css. Наконец, мы выводим обновлённый массив в консоль.

filter()

Метод filter() используется для создания нового массива, содержащего все элементы существующего массива, прошедшие определённый тест или удовлетворяющие определённому условию. Метод filter() не изменяет исходный массив, а возвращает новый массив с отфильтрованными элементами:

const arr: string[] = ['band', 'shoe', 'skirt', 'bag'];

// Фильтруем массив, чтобы включить в него только те строки, которые начинаются с 'b'
const filteredArr = arr.filter((str) => str.startsWith('b'));

console.log(filteredArr); // Вывод: ['band','bag']

Мы объявляем массив arr типа string[] с элементами из пяти строк. Затем мы используем метод filter() для создания нового массива filteredArr, включающего только те строки из arr, которые начинаются с буквы b.

Для определения условий фильтрации массива в качестве аргумента метода filter() мы используем функцию arrow. Затем мы выводим в консоль filteredArr, который в данном случае будет содержать только строки band и bag.

flat()

В TypeScript метод flat() доступен для массивов и может быть использован для создания нового одномерного сплющенного массива. Метод flat() может принимать необязательный аргумент, задающий глубину сплющивания. Если аргумент не указан, flat() сплющит массив до глубины 1:

const arr = ["Hello", ["World", "!"]];
const flattened = arr.flat();
console.log(flattened);
// Вывод: ["Hello", "World", "!"]

У нас есть массив arr, содержащий вложенный массив строк. Мы вызываем метод flat() для массива arr, сплющивающий массив до глубины 1, в результате чего получается новый массив с теми же элементами, но сплющенный до одномерного массива строк. Метод flat() работает аналогичным образом с массивом любого типа, а не только с массивом строк.

forEach()

Метод TypeScript forEach() можно использовать в массиве строк для перебора каждой строки в массиве и выполнения заданного действия над этой строкой:

const arr:string[]=['goat','sheep','ram'];
arr.forEach((items:string)=>{
    console.log(items)
});
//Вывод: goat
//       sheep
//       ram

Приведённый выше код объявляет постоянный массив строк с именем arr с тремя элементами: goat, heep и ram. Затем для массива arr вызывается метод forEach, итерирующий каждый элемент массива и выполняет предоставленную функцию один раз для каждого элемента.

shift()

В TypeScript функция shift() используется для удаления первого значения из массива и последующего возврата оставшихся значений:

let arr: number[] = [1, 2, 3, 4, 5];
let firstElement: number | undefined = arr.shift();

console.log(firstElement); // Вывод: 1
console.log(arr); // Вывод: [2, 3, 4, 5]

Мы определяем переменную arr как массив чисел, используя синтаксис number[]. Мы также определили переменную первого элемента как тип объединения number | undefined, потому что shift() может вернуть undefined, если массив пуст. При вызове shift() нам не нужно указывать никаких аргументов. Она просто удаляет первый элемент из массива.

includes()

includes() используется для проверки, содержит ли массив определённое значение среди своих элементов, и возвращает true или false, где это уместно:

let arr: string[] = ['goat','sheep','ram'];
console.log(arr.includes('goat')); // Вывод: true
console.log(arr.includes('cow')); // Вывод: false

В приведённом выше коде мы определили переменную arr как массив строк. Затем мы используем метод includes(), чтобы проверить, содержит ли массив строку goat или строку cow. Метод возвращает true для первого и false для второго.

reduce()

reduce() — встроенный метод объекта Array. Он используется для сокращения массива до одного значения путём применения функции к каждому элементу массива:

let arr: number[] = [1, 2, 3, 4, 5];
let sum: number = arr.reduce((accumulator: number, currentValue: number) => {
  return accumulator + currentValue;
});
console.log(sum); // Вывод: 15

В коде мы определили переменную arr как массив чисел. Затем мы используем метод reduce() для вычисления суммы всех чисел в массиве.

Метод reduce() принимает два аргумента: функцию обратного вызова и необязательное начальное значение. В данном случае мы указали только функцию обратного вызова. Функция обратного вызова принимает два аргумента. Первый — аккумулятор, хранящий текущее состояние редукции, а второй — текущее значение обрабатываемого массива. Функция возвращает обновлённое значение аккумулятора.

В примере мы начинаем с начального значения 0 для аккумулятора. На каждой итерации метода reduce() функция обратного вызова добавляет текущий элемент к аккумулятору, хранящему сумму всех элементов массива. Конечное значение аккумулятора возвращается в качестве конечного результата метода reduce(), хранящегося в переменной sum и выводится на консоль.

Заключение

В этой статье мы изучили метод TypeScript flatMap(), узнав, как он упрощает код, связанный с отображением и сглаживанием массивов. Поняв, как эффективно использовать flatMap(), вы сможете улучшить свой код и сделать его более эффективным.

Мы также кратко обсудили массивы в TypeScript, приведя примеры различных типов массивов. Понимание того, как объявлять массивы и работать с ними, является фундаментальным навыком в программировании на TypeScript, и он необходим для создания сложных приложений. Надеюсь, вам понравилась эта статья. Счастливого кодинга!