Массивы
Разделы:
| Методы | Аргументы | Возвращает | Описание |
| push | элементы любого типа | количество элементов | добавляет элемент в конец массива |
| unshift | элементы любого типа | количество элементов | добавляет элемент в начало |
| shift | ничего не принимает | удалённый элемент | удаляет элемент в начале |
| pop | ничего не принимает | удалённый элемент | удаляет последний элемент |
| splice | 1) индекс ( n >= 0 || n < 0 ) 2) целое число (количество удаляемых элементов), 0 — не удалять 3) добавляемые к массиву элементы | массив, содержащий удалённые элементы, либо пустой массив | удаляет или добавляет новые элементы по индексу |
| slice | 1) индекс ( n >= 0 || n < 0 ) 2) индекс окончания копирования ( n >= 0 || n < 0 ) | массив скопированных элементов либо пустой массив | копирует элементы в массиве по указанным индексам |
| concat | элементы любого типа, можно перечислять через запятую либо передавать массивы | новый массив с добавленными элементами | создаёт новый массив из текущего и добавленных значений |
| indexOf | 1) искомый элемент 2) индекс с которого его искать ( n >= 0 || n < 0 ) | индекс найденного элемента либо -1 | ищет элемент с указанного индекса |
| lastIndexOf | 1) искомый элемент 2) индекс, с которого его искать ( n >= 0 || n < 0 ) | индекс найденного элемента либо -1 | ищет элемент с указанного индекса, поиск начинает с конца в начало |
| includes | 1) искомый элемент 2) индекс, с которого его искать ( n >= 0 || n < 0 ) | true если элемент найден либо false | ищет элемент с указанного индекса |
| find | callback функция | найденный элемент или undefined | находит элемент по условию |
| findIndex | callback функция | возвращает индекс найденного элемента либо -1 | находит индекс элемента по условию |
| filter | callback функция | отфильтрованный массив | фильтрует элементы в массиве по условию |
| map | callback функция | массив результатов | вызывает функцию для каждого элемента |
| sort | callback функция | отсортированный массив, текущий тоже будет изменён | сортирует массив на месте по условию, заданному в переданной функции |
| reverse | ничего не принимает | перевёрнутый массив, текущий тоже будет изменён | меняет порядок элементов наоборот |
| join | принимает строковый параметр, в котором указан разделитель | сформированную из элементов строку | создаёт строку из элементов |
| reduce | callback функция | одно результирующее значение | выполняет функцию с каждым отдельным элементом, позволяет аккумулировать промежуточное значение |
| reduceRight | callback функция | одно результирующее значение | выполняет функцию с каждым отдельным элементом (справа налево), позволяет аккумулировать промежуточное значение |
| isArray | любой тип | true если массив и false если нет | проверяет что данный тип данных это массив |
| copyWithin | 1) индекс — куда вставить 2) индекс начала 3) индекс конца | изменённый массив, текущий тоже будет изменён | копирует элементы по индексам и вставляет в назначенное место |
| forEach | callback функция | ничего не возвращает | выполняет callback функцию для каждого элемента |
| flat | число — задаёт уровень вложенности массивов | новый массив с объединёнными в него подмассивами | cоздаёт новый массив, в котором уровни вложенности будут подняты на указанный уровень |
| every | callback функция | true если все элементы массива положительно проходят проверку в ином случае false | проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции |
| some | callback функция | true если один из элементов массива положительно проходит проверку в ином случае false | проверяет, удовлетворяет ли хотя бы один элемент массива условию, заданному в передаваемой функции |
| Array.from | 1) массивоподобный или итерируемый объект 2) функция которая выполняется для каждого элемента массива | массив | создаёт новый экземпляр Array из массивоподобного или итерируемого объекта |
| fill | 1) значение заполнения 2) индекс начала 3) индекс конца | изменённый массив, текущий тоже будет изменён | заполняет массив повторяющимся значением |
| at() | число, может принимать отрицательные значения | элемент массива | позволяет получить элемент массива по индексу |
Добавление элемента
♦ push
array.push(...items)
Добавляет элемент в конец, в виде аргумента принимает элемент любого типа. Изменяет текущий массив и количество элементов.
const fruit = ['персик', 'яблоко'];
let length = fruit.push('абрикос');
// return: length = 3
// Array: ["персик", "яблоко", "абрикос"]
const lists = [];
length = lists.push(...['персик', 'яблоко']);
// return: length = 2
// Array: ["персик", "яблоко"]
♦ unshift
array.unshift(...items)
Добавляет элемент в начало, в виде аргумента принимает элемент любого типа. Изменяет текущий массив и количество элементов (из-за добавления в начало массив будет проиндексирован, что сказывается на производительности).
const fruit = ['персик', 'яблоко'];
let length = fruit.unshift('обрикос');
// return: length = 3
// Array: ["обрикос", "персик", "яблоко"]
const lists = [true, false];
length = lists.unshift(...['персик', 'яблоко']);
// return: length = 4
// Array: ["персик", "яблоко", true, false]
Удаление элемента
♦ shift
array.shift()
Удаляет элемент в начале, возвращает удалённый элемент. Изменяет длину массива, поэтому эта операция медленная (не рекомендуется использовать на больших массивах).
const fruit = ['персик', 'яблоко'];
fruit.shift();
// return: "персик"
// Array: ["яблоко"]
♦ pop
array.pop()
Удаляет последний элемент, возвращает удалённый элемент.
const fruit = ['персик', 'яблоко'];
fruit.pop();
// return: "яблоко"
// Array: ["персик"]
Изменение
♦ splice
array.splice(index, deleteCount, ...items)
Начиная с индекса index, удаляет deleteCount элементов и вставляет items. Параметры deleteCount и items являются необязательными. Возвращает массив удалённых элементов, если ничего не было удалено — то пустой массив.
let fruit = ['персик', 'яблоко', 'мандарин', 'груша'];
let elements = fruit.splice(2, 0, 'банан');
// return: []
// Array: ["персик", "яблоко", "банан", "мандарин", "груша"]
fruit = ['персик', 'яблоко', 'мандарин', 'груша'];
elements = fruit.splice(2, 2, 'банан');
// return: ["мандарин", "груша"]
// Array: ["персик", "яблоко", "банан"]
♦ slice
array.slice(start, end)
Cоздаёт новый массив, копируя в него элементы с позиции start до end (не включая end).
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.slice(2);
// return: ['банан', 'мандарин', 'груша']
fruit.slice(1, 5);
// return: ['яблоко', 'банан', 'мандарин', 'груша']
fruit.slice(-2);
// return: ['мандарин', 'груша']
fruit.slice(2, -1);
// return: ['банан', 'мандарин']
♦ concat
array.concat([3, 4])
Cоздаёт новый массив, в который копирует данные из других массивов и дополнительные значения.
const fruit = ['персик', 'яблоко'];
const basket = fruit.concat('банан', ['мандарин', 'груша']);
// return: ["персик", "яблоко", "банан", "мандарин", "груша"]
♦ flat
array.flat(Infinity)
Создаёт новый массив, в котором уровни вложенности будут подняты на указанный уровень. Принимает число, которое задаёт уровень вложенности массивов. Возвращает новый массив с объединёнными в него подмассивами.
[1, 2, [3, 4]].flat();
// return: [1, 2, 3, 4]
[1, 2, [3, 4, [5, 6]]].flat();
// return: [1, 2, 3, 4, [5, 6]]
[1, 2, [3, 4, [5, 6]]].flat(2);
// return: [1, 2, 3, 4, 5, 6]
[1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]].flat(Infinity);
// return: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Поиск среди элементов
♦ indexOf
array.indexOf(item, from)
Ищет item, начиная с индекса from, и возвращает индекс, на котором был найден искомый элемент, в противном случае -1.
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.indexOf('банан', 1);
// return: 2
fruit.indexOf('банан', 3);
// return: -1
♦ lastIndexOf
array.lastIndexOf(item, from)
Ищет item, начиная с индекса from ( поиск происходит с конца в начало ), и возвращает индекс, на котором был найден искомый элемент, в противном случае -1.
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.lastIndexOf('банан', 1);
// return: -1
fruit.lastIndexOf('банан', 3);
// return: 2
♦ includes
array.includes(item, from)
Ищет item, начиная с индекса from, и возвращает true, если поиск успешен.
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.includes('банан', 1);
// return: true
fruit.includes('банан', 3);
// return: false
fruit.includes('банан');
// return: true
fruit.includes('банан', -3);
// return: true
♦ find
array.find(item => item.id == 1)
Находит элемент по условию. В виде аргумента принимает callback функцию, возвращает найденный элемент, если ничего не нашёл — то undefined.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
[1, 2, 3, 4, 5, 6].find((element, index) => {
return element > 4;
});
// return: 5
♦ findIndex
array.findIndex(item => item.id == 1)
Возвращает индекс, на котором был найден по условию элемент и -1, если ничего не найдено.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
[1,2,3,4,5,6].findIndex((element, index) => {
return element > 4;
});
// return: 4
[1,2,3,4,5,6].findIndex((element, index) => {
return element > 8;
});
// return: -1
♦ filter
array.filter(item => item.id < 3)
Возвращает массив, состоящий из отфильтрованных по условию элементов.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.filter(element => element.length > 5);
// return: ["персик", "яблоко", "мандарин"]
Преобразование массива
♦ map
array.map(item => item.length)
Вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
const fruit = ['персик', 'яблоко', 'банан'];
fruit.map((element, index) => {
return `*${ element } ${ index }*`
});
// return: ["*персик 0*", "*яблоко 1*", "*банан 2*"]
♦ sort
array.sort((a, b) => a - b )
Сортирует массив на месте, меняя в нём порядок элементов. Принимает функцию, задающую метод сортировки (a — следующий элемент, b — текущий). Возвращает массив отсортированных элементов.
Функция должна возвращать числовые значения:
- если вернёт 0, то значения не меняют свои позиции относительно друг друга (но эта пара будет отсортирована относительно остальных элементов)
- если вернёт 1, то элементы остаются на своих позициях
- если вернёт -1, то текущий элемент больше следующего и они меняются местами
const fruit = ['персик', 'яблоко', 'банан', 'мандарин', 'груша'];
fruit.sort();
// return: ["банан", "груша", "мандарин", "персик", "яблоко"]
const numbers = [4, 2, 5, 1, 3].sort(function(a, b) {
return a - b;
})
// return: [1, 2, 3, 4, 5]
♦ reverse
array.reverse()
Меняет порядок элементов в массиве на обратный. Параметры не принимает, возвращает перевёрнутый массив.
const fruit = ['персик', 'яблоко', 'банан'];
fruit.reverse();
// return: ["банан", "яблоко", "персик"]
♦ join
array.join('')
Создаёт строку из элементов, вставляя между ними разделитель.
const fruit = ['персик', 'яблоко', 'банан'];
fruit.join(' ');
// return: "персик яблоко банан"
fruit.join('');
// return: "персикяблокобанан"
fruit.join(',');
// return: "персик,яблоко,банан"
♦ reduce
array.reduce((sum, current) => sum + current)
Проходит по массиву и выполняет функцию с каждым отдельным элементом, позволяет аккумулировать промежуточное значение. Принимает callback функцию, возвращает одно результирующее значение.
Callback функция может принимать следующие аргументы:
- accumulator — аккумулятор, аккумулирующий значение
- element — текущий элемент массива
- index — текущий индекс массива
- array — массив, над которым совершаются действия
const fruit = ['персик', 'яблоко', 'банан'];
const text = fruit.reduce(function(accumulator, element, index) {
return accumulator += `${ index ? ', ' : '' }${ element }`;
}, '');
// return: "персик, яблоко, банан"
const number = [5, 5, 5, 5].reduce(function(accumulator, element) {
return accumulator + element;
}, 5);
// return: 25
♦ reduceRight
array.reduceRight((sum, current) => sum + current)
Работает аналогично reduce, но проходит по массиву справа налево.
Callback функция может принимать следующие аргументы:
- accumulator — аккумулятор, аккумулирующий значение
- element — текущий элемент массива
- index — текущий индекс массива
- array — массив над которым совершаются действия
const fruit = ['персик', 'яблоко', 'банан'];
const text = fruit.reduceRight(function(accumulator, element, index) {
return accumulator += `${ element }${ index ? ', ' : '' }`;
}, '');
// return: "банан, яблоко, персик"
Циклы
♦ forEach
array.forEach( (item) => {} )
Выполняет переданную callback функцию для каждого элемента массива. Ничего не возвращает.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
const fruit = ['персик', 'яблоко', 'банан'];
fruit.forEach( (item, index, array) => {
array[index] +=' *';
} )
// return: ["персик *", "яблоко *", "банан *"]
Дополнительно
♦ isArray
Array.isArray( value )
Возвращает true, если value — массив, и false, если нет.
const fruit = ['персик', 'яблоко', 'банан'];
Array.isArray(fruit);
// return: true
Array.isArray([]);
// return: true
Array.isArray('text');
// return: false
♦ fill
array.fill(value, start, end)
Заполняет массив повторяющимися value, начиная с индекса start до end. Возвращает изменённый массив при этом оригинал тоже будет изменён.
let fruit = ['персик', 'яблоко', 'банан'];
fruit.fill();
// return: [undefined, undefined, undefined]
fruit.fill('абрикос');
// return: ["абрикос", "абрикос", "абрикос"]
fruit = ['персик', 'яблоко', 'банан'];
fruit.fill('абрикос', 2, 3);
// return: ["персик", "яблоко", "абрикос"]
♦ copyWithin
array.copyWithin(target, start, end)
Копирует свои элементы, начиная со start и заканчивая end, в собственную позицию target (перезаписывает существующие). Возвращает изменённый массив, при этом оригинал тоже будет изменён.
const fruit = ['персик', 'яблоко', 'банан'];
fruit.copyWithin(0, 2, 3);
// return: ["банан", "яблоко", "банан"]
♦ every
array.every(callback)
Проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции. Возвращает true, если все элементы массива положительно проходят проверку, в ином случае false.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
const fruit = ['персик', 'яблоко', 'банан'];
fruit.every((item) => {
return item.length >= 4;
});
// return: true
fruit.every((item) => {
return item === 'персик';
});
// return: false
fruit.every((item) => {
return item.length >= 6;
});
// return: false
♦ some
array.some(callback)
Проверяет, удовлетворяет ли хотя бы один элемент массива условию, заданному в передаваемой функции. Возвращает true, если один из элементов массива положительно проходит проверку, в ином случае false.
Callback функция может принимать следующие аргументы:
- element — текущий элемент
- index — индекс элемента
- array — текущий массив
- thisArg — this текущего объекта
const fruit = ['персик', 'яблоко', 'банан'];
fruit.some((item) => {
return item.length === 5;
});
// return: true
fruit.some((item) => {
return item === 'апельсин';
});
// return: false
fruit.some((item) => {
return item === 'персик';
});
// return: true
♦ Array.from
Array.from(object)
Создаёт новый экземпляр Array из массивоподобного или итерируемого объекта. Принимает: 1) массивоподобный или итерируемый объект 2) функция которая выполняется для каждого элемента массива. Возвращает массив.
Array.from('text')
// return: ["t", "e", "x", "t"]
Array.from([1, 2, 3], x => x + x)
// return: [2, 4, 6]
const elements = document.querySelectorAll('button');
Array.from(elements)
// return: [HTMLButtonElement, HTMLButtonElement]
♦Array.at()
Array.at(-1)
Позволяет получить элемент массива по индексу, в отличии от квадратных скобок, можно использовать отрицательные значения, что даёт большое преимущество.
const fruit = ['персик', 'яблоко', 'банан'];
fruit.at(-1);
// return: "банан"
fruit.at(1);
// return: "яблоко"
fruit.at();
// return: "персик"
// обычный способ получения последнего элемента
fruit[fruit.length -1];
// return: "банан"