Перейти к основному содержимому

Массивы (Array)

Объявление массива​

const arr = new Array(); // Создание пустого массива
const arr = new Array(3); // Создание массива из трёх элементов со значением "empty"
const arr = Array(); // Создание пустого массива. Под "капотом" вызывает new Array()
const arr = []; //  Создание пустого массива

const arr = new Array('яблоко', 'банан', 'персик'); // Массив строк
const arr = ['яблоко', 'банан', 'персик']; // Массив строк
const arr = ['яблоко', 3, { a: 2 }, [1, 2]]; // Массив с элементами любого типа

// Массив объектов
const objectsList = [
    {
        name: 'Andrew',
        lastName: 'Gulin',
    },
    {
        name: 'Boris',
        lastName: 'Ivanov',
    },
    {
        name: 'Alexey',
        lastName: 'Petrov',
    },
];

Получение массива из строки (str.split)​

Метод строк split - разбивает строку на массив по заданному разделителю

const names = 'Вася, Петя, Маша';
console.log(names.split(', ')); // ['Вася', 'Петя', 'Маша']

Вызов split с аргументом '' разбивает строку на массив букв

const name = 'Вася';
console.log(name.split('')); // ['В', 'а', 'с', 'я']

Доступ по индексу​

const arr = ['яблоко', 'банан', 'персик'];

// Получить второй элемент (индексы с 0)
console.log(arr[1]); // банан

// Последний элемент (индекс - длина массива - 1)
console.log(arr[arr.length - 1]); // персик
к сведению

Индекс в квадратных скобках понимается буквально. Если задать отрицательный индекс, то мы получим undefined.

Многомерные массивы​

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];

alert(matrix[1][1]); // 5, центральный элемент

Как проверить что это массив Array.isArray(arr)​

Массивы не образуют отдельный тип данных. Они основаны на объектах.

Поэтому typeof не может отличить простой объект от массива:

alert(typeof {}); // object
alert(typeof []); // тоже object

Метод Array.isArray(value) возвращает true, если value массив, и false, если нет.

alert(Array.isArray({})); // false
alert(Array.isArray([])); // true

Методы массивов​

at(index) - возвращает значение элемента массива по указанному индексу​

Ноль и положительные индексы применяются с начала массива.

Отрицательные индексы применяются с конца массива.

const arr = ['яблоко', 'банан', 'персик'];

// Получить второй элемент (индексы с 0)
console.log(arr.at(1)); // банан

// Последний элемент (индекс - длина массива - 1)
console.log(arr.at(-1)); // персик
warning

Требуется настройка tsconfig.json и полифилов для сборщика

{
    "compilerOptions": {
        "lib": ["ES2023"]
    }
}

push(...items) - добавить в конец массива​

pop() - удалить с конца массива​

unshift(...items) - добавить один или более элементов в начало массива​

shift() - удалить элемент с начала массива​

concat(...items) - создаёт новый массив, в который копирует данные из других массивов и дополнительные значения​

const arr = [1, 2];

// создать массив из: arr и [3,4]
console.log(arr.concat([3, 4])); // 1,2,3,4

// создать массив из: arr и [3,4] и [5,6]
console.log(arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6

// создать массив из: arr и [3,4], потом добавить значения 5 и 6
console.log(arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

slice(start, end) - вернуть часть массива (не меняет массив, возвращает копию)​

Он возвращает новый массив, в который копирует все элементы с индекса start до end (не включая end). start и end могут быть отрицательными, в этом случае отсчёт позиции будет вестись с конца массива.

const arr = ['t', 'e', 's', 't'];

const arrCopy = arr.slice(); // полная копия

// Частичная копия. Параметры:
// 1 - индекс начального элемента (включительно)
// 3 - индекс конечного элемента (не включительно)
const arrPart = arr.slice(1, 3); // e,s (копирует с 1 до 3)

const arrPart = arr.slice(-2); // s,t (копирует с -2 до конца)

splice(pos, deleteCount, ...items) - удалить часть массива, вставить в массив новые элементы или заменить удаляемые элементы на другие (меняет массив)​

Удаление части массива​

// Параметры
// 2 - индекс, с которого начинать
// 1 - количество удаляемых элементов
arr.splice(2, 1);

Добавление новых элементов​

const arr = ['яблоко', 'банан', 'персик'];

// с индекса 2
// удалить 0 элементов
// вставить "Давай", "танцевать"
arr.splice(2, 0, 'Давай', 'танцевать');

console.log(arr); // ['яблоко', 'банан', 'Давай', 'танцевать', 'персик']

Замена удаляемых элементов на другие​

Он изменяет arr начиная с индекса start: удаляет deleteCount элементов и затем вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.

const arr = ['яблоко', 'банан', 'персик'];
arr.splice(0, 2, 'Давай', 'танцевать');
console.log(arr); // ['Давай', 'танцевать', 'персик']
к сведению

push и pop - "быстрые" методы - изменяют текущий массив

unshift и shift - "медленные" методы - создают новый массив

toString() - возвращает строку со списком элементов, разделённых запятыми​

const arr = [1, 2, 3];

console.log(arr); // 1,2,3
console.log(String(arr) === '1,2,3'); // true

Пустой массив преобразуется в пустую строку.

console.log([] + 1); // "1"
console.log([1] + 1); // "11"
console.log([1, 2] + 1); // "1,21"

forEach(func) - запускает функцию для каждого элемента массива​

Callback-функция принимает три аргумента:

  • item - очередной элемент списка
  • index - индекс элемента списка
  • array - это ссылка на сам массив, по которому бежим
arr.forEach((item, index, array) => {
    // код
});
к сведению

forEach нельзя прервать.

filter(func) - фильтрация массива​

  • Принимает функцию с заданными условиями (функция должна возвращать тип boolean)
  • Возвращает новый массив, удовлетворяющий условиям.
const filteredArray = arr.filter((item, index, array) => {
    // Функция выполняется для каждого элемента
    // В filteredArray попадут те элементы, где функция вернула true.
    return item[2] === 'а'; // третья буква а
});

// Короткая запись
const filteredArrayShort = arr.filter((item) => item[2] === 'a');

indexOf(item, pos) - найти индекс элемента массива​

arr.indexOf(item, from) ищет item начиная с индекса from и возвращает номер индекса, на котором был найден искомый элемент, в противном случае -1.

lastIndexOf(item, pos) - найти индекс элемента массива​

Работает так же как indexOf, но ищет справа налево.

includes(value) - проверить наличие элемента в массиве​

  • Принимает элемент для сравнения со значениями массива
  • Возвращает boolean

arr.includes(item, from) ищет item начиная с индекса from и возвращает true, если поиск успешен.

к сведению

Метод includes правильно обрабатывает NaN

const arr = [NaN];
alert(arr.indexOf(NaN)); // -1 (неверно, должен быть 0)
alert(arr.includes(NaN)); // true (верно)

findIndex(func) - найти индекс элемента​

const index = arr.findIndex((item) => {
    // Если длина элемента равна 4.
    // Ищем первый такой и возвращаем его index
    return item.length === 4;
});

Callback-функция принимает три аргумента:

  • item - очередной элемент списка
  • index - индекс элемента списка
  • array - это ссылка на сам массив, по которому бежим

Если функция возвращает true, поиск прерывается и возвращается индекс элемента. Если ничего не найдено, возвращается -1.

find(func) - найти элемент в массиве​

const findElement = arr.find((item, index, array) => {
    // Начинается с буквы Б
    return item[0] === 'Б';
});

Callback-функция принимает три аргумента:

  • item - очередной элемент списка
  • index - индекс элемента списка
  • array - это ссылка на сам массив, по которому бежим

Если функция возвращает true, поиск прерывается и возвращается item. Если ничего не найдено, возвращается undefined.

findLastIndex(func) - найти элемент в массиве​

Работает так же как findIndex, но ищет справа налево.

map(func) - вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.​

  • Принимает функцию с аргументами item, index, array
  • Возвращает новый массив

Callback-функция принимает три аргумента:

  • item - очередной элемент списка
  • index - индекс элемента списка
  • array - это ссылка на сам массив, по которому бежим

reduce(func, initial) - обработка каждого элемента с сохранением результата​

Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.

const value = arr.reduce(
    function (accumulator, item, index, array) {
        // ...
    },
    [initial],
);

Аргументы:

accumulator – результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial) item – очередной элемент массива index – его позиция array – сам массив

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

const result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); // 15

reduceRight(func, initial) - обработка каждого элемента с сохранением результата​

Работает аналогично reduce, но проходит по массиву справа налево

sort(func) - сортирует массив, меняя в нём порядок элементов (изменяет сам массив)​

  • Также возвращает отсортированный массив
  • По умолчанию элементы сортируются как строки
const arr = [1, 2, 15];

// метод сортирует содержимое arr
console.log(arr.sort()); // [1, 15, 2]

От функции сравнения требуется любое положительное число, чтобы сказать «больше», и отрицательное число, чтобы сказать «меньше».

arr.sort((a, b) => {
    if (a > b) return 1; // если первое значение больше второго
    if (a == b) return 0; // если равны
    if (a < b) return -1; // если первое значение меньше второго
});

arr.sort((a, b) => a - b);
к сведению

По умолчанию sort сравнивает буквы по их кодам, поэтому используйте localeCompare для строк

const countries = ['Österreich', 'Andorra', 'Vietnam'];

alert(countries.sort((a, b) => (a > b ? 1 : -1))); // Andorra, Vietnam, Österreich (неправильно)

alert(countries.sort((a, b) => a.localeCompare(b))); // Andorra,Österreich,Vietnam (правильно!)

reverse() - меняет порядок элементов в массиве на обратный (меняет массив)​

const arr = [1, 2, 3, 4, 5];
console.log(arr.reverse()); // 5,4,3,2,1

join(glue) - создаёт строку из элементов массива, вставляя переданный аргумент между ними​

const arr = ['Вася', 'Петя', 'Маша'];
console.log(arr.join(';')); // 'Вася;Петя;Маша'

fill(value, start, end) - заполняет массив повторяющимися value, начиная с индекса start до end​

some(func) - проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции​

  • Принимает функцию с заданными условиями
  • Ищет первое совпадение
  • Возвращает boolean
  • Работает до первого совпадения или до конца массива, если совпадений нет
const arr = ['a', 'b', 'c', 'd', 'e'];
arr.some((item) => item === 'd'); // true

every(func) - проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции​

  • Принимает функцию с заданными условиями
  • Проверяет удовлетворяют ли все элементы массива условию
  • Вернет значение true, если каждый элемент совпадет с проверяемой функцией, и значение false — если нет
const arr = ['a', 'b', 'c', 'd', 'e'];
arr.some((item) => item === 'd'); // false

const arr2 = ['a', 'a', 'a', 'a', 'a'];
arr2.some((item) => item === 'a'); // true

copyWithin(target, start, end) - копирует свои элементы, начиная с позиции start и заканчивая end, в себя, на позицию target (перезаписывая существующие)​

flat(depth) - создаёт новый плоский массив из многомерного массива​

depth указывает, на сколько уровней вложенности уменьшается мерность исходного массива. По умолчанию 1.

const arr = [[1, 2], [3, 4], 5];
arr.flat(); // [1, 2, 3, 4, 5]

flatMap() - применяет функцию к каждому элементу массива, а затем сглаживает результат в новый массив​

Объединяет метод flat() и метод map() в одну функцию

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

arr.flatMap((arr) => arr * 10); // [10, 20, 30, 40, 50]

// то же что и .flat() вместе с .map()
arr.flat().map((arr) => arr * 10); // [10, 20, 30, 40, 50]

Полезные ссылки​