⚙️ - метод с мутацией текущего массива
⚡️- метод без мутации текущего массива
❗️- метод создает новый массив
🔁 - итеративный метод
✍️ - методы на выборку
🔀 - методы сортировки и изменения порядка элементов
основной источник: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Содержание:
1. Методы создания массивов
1.1. Создание с помощью [] ❗️
1.2. Создание массива с помощью конструктора new Array() ❗️
1.3. Array.from() ❗️⚡️
1.4. Array.keys() в сочетании с оператором расширения (...) ❗️
1.5. Array.concat() ❗️
1.6. Spread (...) ❗️⚡️
1.7. Создание пустого массива фиксированной длины ❗️
1.8. Array.flat() ❗️⚡️
1.9. Array.flatMap() ❗️⚡️ 🔁
1.10. Array.of() ❗
1.11. Array.with() ❗️⚡️
1.12. Array.slice() ❗️⚡️ ✍️
1.13. Array.fromAsync() ❗️⚡️
2. Свойство массивов Array.length
2.1. Прямое назначение - показать длину массива
2.2. Особые свойства length
2.3. Перебор массива с использованием length
2.4. Сокращение массива
2.5. Массив с длиной, недоступной для записи
3. Методы массивов на выборку и перебор элементов в цикле
3.1. Методы поиска и фильтра
3.1.1. Array.filter() 🔁 ✍️
3.1.2. Array.find() 🔁 ✍️
3.1.3. Array.findIndex() 🔁 ✍️
3.1.4. Array.findlast() 🔁 ✍️
3.1.5. Array.findLastIndex() 🔁 ✍️
3.1.6. Array.includes() ✍️
3.1.7. Array.indexOf() ✍️
3.1.8. Array.lastIndexOf() ✍️
3.1.9. Array.some() 🔁 ✍️
3.1.10. Array.at() ✍️ ⚡️
3.2. Методы перебора элементов в цикле
3.2.1. Array.forEach() 🔁 ⚡️
3.2.2. Array.every() 🔁
3.2.3. Array.map()❗️⚡️
4. Методы добавления и удаления элементов
4.1. Array.fill() ⚙️
4.2. Array.splice() ⚙️
4.3. Array.pop() ⚙️
4.4. Array.push() ⚙️
4.5. Array.shift() ⚙️
4.6. Array.unshift() ⚙️
4.7. Array.toSplice() ️❗️⚡️
5. Методы сортировки и изменения порядка элементов
5.1. Array.reverse() ⚙️ 🔀
5.2. Array.sort() ⚙️ 🔀
5.3. Array.copyWithin() ⚙️ 🔀
5.4. Array.toReversed() ⚡️❗️ 🔀
5.5. Array.toSorted() ⚡️❗️ 🔀
6. Итераторы
6.1. Array[Symbol.iterator]() 🔁
6.2. Array.entries() 🔁
6.3. Array.values() 🔁
6.4. Array.keys() 🔁
7. Прочие методы
7.1. Array.isArray()
7.2. Array.join()
7.3. Array.reduce()
7.4. Array.reduceRight()
7.5. Array.toLocaleString()
7.6. Array.toString()
1. Создание массивов
1.1. Создание с помощью []
- Пустой массив:
const myList = []; - Массив с данными (данные могут быть разных типов):
const myList = ['Россия', 'Москва', 144.5, 'Russian ruble', true]; - Массив содержит другие массивы:
const myList = ['Россия', ['Москва', 'Санкт-Петербург', 'Казань', 'Екатеринбург'], [true, true, false, true]]; - Создание и заполнение массива числами с помощью цикла
let numbers = [];
for (let i = 1; i <= 10; i++) {
numbers.push(i);
}
1.2. Создание массива с помощью конструктора:
const arrayEmpty = new Array(2);
// создан массив с двумя элементами
Проверим:
console.log(arrayEmpty.length); // 2
console.log(arrayEmpty[0]); // undefined; actually, it is an empty slot
console.log(0 in arrayEmpty); // false
console.log(1 in arrayEmpty); // false
1.3. Array.from()
Статический метод создает новый экземпляр с мелким копированием Array из итерируемого или массивоподобного объекта.
Синтаксис:
Array.from(arrayLike, mapFn(element, index), thisArg)
arrayLike - Повторяющийся или подобный массиву объект для преобразования в массив.
mapFn - (Необязательно) Функция для вызова каждого элемента массива. Каждое значение, которое должно быть добавлено в массив, сначала передается через эту функцию, а mapFn возвращает значение, добавляемое в массив вместо предыдущего значения.
element - Текущий элемент, обрабатываемый в массиве.
index - Индекс текущего элемента, обрабатываемого в массиве.
thisArg - (Необязательно) Значение, которое будет использоваться как this при выполнении mapFn.
Особенности:
- Array.from() никогда не создает разреженный массив. Если у arrayLike объекта отсутствуют некоторые свойства индекса, они появляются undefined в новом массиве.
- Array.from(obj, mapFn, thisArg) имеет тот же результат, что и Array.from(obj).map(mapFn, thisArg), за исключением того, что не создает промежуточный массив
Примеры:
- Массив из строки:
Array.from("foo"); // [ "f", "o", "o" ] - Массив из набора:
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ] - Массив из map:
const mapper = new Map([ ["1", "a"], ["2", "b"], ]);
Array.from(mapper); // [['1', 'a'], ['2', 'b']]
Array.from(mapper.values()); // ['a', 'b'];
Array.from(mapper.keys()); // ['1', '2']; - Массив с помощью коллбэка:
Array.from({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4] - Генератор последовательностей:
const range = (start, stop, step) =>
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
range(0, 4, 1); // [0, 1, 2, 3, 4]
range(1, 10, 2); // [1, 3, 5, 7, 9]
Этот метод можно использовать для создания нового массива и заполнить сразу числами.
const numbers = Array.from({ length: 10 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
ещё пример:
const numbers = Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]
1.4. Array.keys() в сочетании с оператором расширения (...)
Еще одним способом создания массива чисел от 1 до N является использование оператора расширения (...) в сочетании с методом Array.keys().
const numbers = [...Array(N).keys()].map(i => i + 1);
1.5. Array.concat()
Метод используется для объединения двух или более массивов. Этот метод возвращает новый массив
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]
1.6. Spread (...)
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
// создан новый массив
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// [1, 2, 3, 1, 2, 3]
1.7. Создание пустого массива фиксированной длины
const numbers = [];
numbers.length = 3;
console.log(numbers); // [empty x 3]
1.8. Array.flat()
Метод создает новый массив со всеми элементами подмассива, объединенными в него рекурсивно до указанной глубины.
Синтаксис:
flat()
flat(depth)
Примеры:
- const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4] - const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]
console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]
console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]
1.9. Array.flatMap()
Метод возвращает новый массив, сформированный путем применения заданной функции обратного вызова к каждому элементу массива, а затем выравнивания результата на один уровень. Он идентичен методу map(), за которым следует flat() глубины 1 (arr.map(...args).flat()), но немного эффективнее, чем вызов этих двух методов по отдельности.
const arr1 = [1, 2, 3, 4];
arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]
1.10. Array.of()
Метод создает новый Array экземпляр из переменного числа аргументов, независимо от количества или типа аргументов.
console.log(Array.of('foo', 2, 'bar', true));
// ["foo", 2, "bar", true]
console.log(Array.of());
// []
1.11. Array.with()
Метод возвращает новый массив с элементом с заданным индексом, замененным заданным значением
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
1.12. Array.slice()
Метод возвращает копию части массива в новый массив, выбранный из start в end (end не включен), где start и end представляют индекс элементов в этом массиве. Исходный массив не будет изменен.
Синтаксис:
slice()
slice(start)
slice(start, end)
Примеры:
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// ["duck", "elephant"]
console.log(animals.slice(2, -1));
// ["camel", "duck"]
console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]
1.13. Array.fromAsync()
Метод создает новый экземпляр с мелким копированием Array из асинхронно повторяющегося, итерируемого или массивоподобного объекта.
Синтаксис:
Array.fromAsync(arrayLike)
Array.fromAsync(arrayLike, mapFn)
Array.fromAsync(arrayLike, mapFn, thisArg)
Возвращаемое значение: новый Promise значением выполнения которого является новый Array экземпляр.
Пример1 (Массив из асинхронного итерируемого):
const asyncIterable = (async function* () {
for (let i = 0; i < 5; i++) {
await new Promise((resolve) => setTimeout(resolve, 10 * i));
yield i;
}
})();
Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]
Пример2 (Массив из повторяющего файла синхронизации)
Array.fromAsync(
new Map([
[1, 2],
[3, 4],
]),
).then((array) => console.log(array));
// [[1, 2], [3, 4]]
2. Свойство массивов Array.length
2.1. Прямое назначение - показать длину массива
const arr = [1, 2];
console.log(arr.length);
// 2
2.2. Особые свойства length
Значением length свойства является неотрицательное целое число со значением меньше 2³².
Объект array отслеживает length свойство и автоматически синхронизирует length значение с содержимым массива. Это означает:
- Установка length значения, меньшего текущей длины, приводит к усечению массива — элементы, превышающие новую length, удаляются.
- Установка любого индекса массива (неотрицательного целого числа, меньшего 232) сверх текущего length расширяет массив — length свойство увеличивается, чтобы отразить новый самый высокий индекс.
- Установка length недопустимого значения (например, отрицательного числа или нецелого числа) вызывает RangeError исключение.
Когда length установлено большее значение, чем текущая длина, массив расширяется путем добавления пустых слотов, а не фактических undefined значений. Пустые ячейки имеют некоторые особые взаимодействия с методами массива
const arr = [1, 2];
console.log(arr);
// [ 1, 2 ]
arr.length = 5;
// set array length to 5 while currently 2.
console.log(arr);
// [ 1, 2, <3 empty items> ]
arr.forEach((element) => console.log(element));
// 1
// 2
2.3. Перебор массива с использованием length
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
numbers[i] *= 2;
}
// [2, 4, 6, 8, 10]
2.4. Сокращение массива
const numbers = [1, 2, 3, 4, 5];
if (numbers.length > 3) {
numbers.length = 3;
}
console.log(numbers);
// [1, 2, 3]
console.log(numbers.length);
// 3
console.log(numbers[3]);
// undefined; the extra elements are deleted
2.5. Массив с длиной, недоступной для записи
length Свойство автоматически обновляется массивом при добавлении элементов, превышающих текущую длину. Если length свойство сделать недоступным для записи, массив не сможет его обновить. Это приводит к ошибке в строгом режиме.
"use strict";
const numbers = [1, 2, 3, 4, 5];
Object.defineProperty(numbers, "length", { writable: false });
numbers[5] = 6;
// TypeError: Cannot assign to read only property 'length' of object '[object Array]'
numbers.push(5);
// TypeError: Cannot assign to read only property 'length' of object '[object Array]'
3. Методы массивов на выборку и перебор элементов в цикле
3.1. Методы поиска и фильтра
3.1.1. Array.filter()
Метод создает копию части заданного массива, отфильтрованную только до элементов из заданного массива, которые проходят тест, реализованный предоставленной функцией.
Примеры:
- const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"] - const modifiedWords = words.filter((word, index, arr) => {
arr[index + 1] += " extra";
return word.length < 6;
});
console.log(modifiedWords);
// Начиная со второго элемента каждому элементу добавляется 6 символов, поэтому они не попадают в выборку.
// ["spray"]
3.1.2. Array.find()
Метод возвращает первый элемент в предоставленном массиве, который удовлетворяет предоставленной функции тестирования. Если никакие значения не удовлетворяют функции тестирования, возвращается undefind.
Примеры:
const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);
// 12- // пример с дкструктурированием:
const inventory = [
{ name: "apples", quantity: 2 },
{ name: "bananas", quantity: 0 },
{ name: "cherries", quantity: 5 },
];
const result = inventory.find(({ name }) => name === "cherries");
console.log(result);
// { name: 'cherries', quantity: 5 }
3.1.3. Array.findIndex()
Метод возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной функции тестирования. Если ни один элемент не удовлетворяет функции тестирования, возвращается значение -1.
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3
3.1.4. Array.findLast()
Метод выполняет итерацию массива в обратном порядке и возвращает значение первого элемента, который удовлетворяет предоставленной функции тестирования. Если ни один элемент не удовлетворяет функции тестирования, возвращается undefind.
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);
// Expected output: 130
3.1.5. Array.findLastIndex()
Метод выполняет итерацию массива в обратном порядке и возвращает индекс первого элемента, который удовлетворяет предоставленной функции тестирования. Если ни один элемент не удовлетворяет функции тестирования, возвращается значение -1.
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber));
// 3
// Index of element with value: 130
3.1.6. Array.includes()
Метод определяет, включает ли массив определенное значение среди своих записей, возвращая true или false соответствующим образом.
Синтаксис:
includes(searchElement)
includes(searchElement, fromIndex)
fromIndex - это индекс, с которого нужно начать поиск
Примеры:
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // false
3.1.7. Array.indexOf()
Метод возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
Синтаксис:
indexOf(searchElement)
indexOf(searchElement, fromIndex)
Примеры:
const array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
3.1.8. Array.lastIndexOf()
Метод возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует. Поиск в массиве выполняется в обратном порядке, начиная с fromIndex.
Синтаксис:
lastIndexOf(searchElement)
lastIndexOf(searchElement, fromIndex)
Примеры:
const numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3
3.1.9. Array.some()
Метод проверяет, проходит ли хотя бы один элемент в массиве тест, реализованный предоставленной функцией. Он возвращает true, если в массиве он находит элемент, для которого предоставленная функция возвращает true; в противном случае он возвращает false . Он не изменяет массив.
some() Метод является итеративным методом. Он вызывает предоставленную callbackFn функцию один раз для каждого элемента в массиве, пока callbackFn не вернет истинное значение. Если такой элемент найден, some() немедленно возвращается true и останавливает итерацию по массиву. В противном случае, если callbackFn возвращает ложное значение для всех элементов, some() возвращается false.
Синтаксис:
some(callbackFn)
some(callbackFn, thisArg)
Примеры:
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// true
function isBiggerThan10(element, index, array)
{
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true
3.1.10. Array.at()
Принимает целочисленное значение и возвращает элемент с этим индексом, учитывая положительные и отрицательные целые числа. Отрицательные целые числа отсчитываются от последнего элемента в массиве.
const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(-2));
// 8
console.log(array1.at(-2));
// 130
3.2. Методы перебора элементов в цикле
3.2.1. Array.forEach()
Метод выполняет предоставленную функцию один раз для каждого элемента массива.
Синтаксис
forEach(callbackFn)
forEach(callbackFn, thisArg)
Метод является итеративным методом. Он вызывает предоставленную callbackFn функцию один раз для каждого элемента в массиве в порядке возрастания индекса. В отличие от map(), forEach() всегда возвращает undefined и не является цепным. Типичным вариантом использования является выполнение побочных эффектов в конце цепочки.
callbackFn вызывается только для индексов массива, которым присвоены значения. Он не вызывается для пустых слотов в разреженных массивах.
forEach() не изменяет массив, для которого он вызывается, но функция, предоставляемая по мере callbackFn возможности. Однако обратите внимание, что длина массива сохраняется перед первым вызовом callbackFn.
forEach() ожидает синхронную функцию — она не ожидает обещаний. Убедитесь, что вы осведомлены о последствиях при использовании обещаний (или асинхронных функций) в качестве forEach обратных вызовов.
Пример1:
const items = ["item1", "item2", "item3"];
const copyItems = [];
items.forEach((item) => {
copyItems.push(item);
});
Пример2:
class Counter {
constructor() {
this.sum = 0;
this.count = 0;
}
add(array) {
// Only function expressions will have its own this binding
array.forEach(function countEntry(entry) {
this.sum += entry;
++this.count;
}, this);
} }
const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16
3.2.2. Array.every()
Метод проверяет, проходят ли все элементы в массиве тест, реализованный предоставленной функцией. Он возвращает логическое значение.
Синтаксис:
every(callbackFn)
every(callbackFn, thisArg)
Метод является итеративным методом. Он вызывает предоставленную callbackFn функцию один раз для каждого элемента в массиве, пока callbackFn не вернет ложное значение. Если такой элемент найден, every() немедленно возвращается false и останавливает итерацию по массиву. В противном случае, если callbackFn возвращает истинное значение для всех элементов, every() возвращается true
Пример:
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
3.2.3. Создание массива с помощью map()
Общая формула:
const new_array = arr.map(function callback( currentValue[, index[, array]]) {
// Возвращает элемент для new_array
}[, thisArg])
- Пример 1:
const numbers = [1, 4, 9];
const roots = numbers.map(Math.sqrt);
// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9] - Пример 2:
const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);
// теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9] - Пример 3:
Сглаживание методом простой скользящей средней
const baseArr = [1, 3, 5, 4, 4, 5, 1, 6, 9, 0, 10, 11, 2];
const newArr = baseArr.map((item, index, arr) => {
if (index === 0 || index === arr.length - 1) {
return item;
}
return Math.round((arr[index - 1] + item + arr[index + 1]) / 3);
}
console.log(newArr);
// вернет новый масссив [1, 3, 4, 4, 4, 3, 4, 5, 5, 6, 7, 8, 2]
4. Методы добавления и удаления элементов
4.1. Array.fill()
Метод преобразует все элементы в диапазоне индексов массива в статическое значение. Он возвращает измененный массив.
Синтаксис:
fill(value)
fill(value, start)
fill(value, start, end)
value - значение для заполнения массива
start - индекс начала заполнения
end - индекс окончания заполнения
fill() Метод является мутирующим методом. Он не изменяет длину this, но изменит содержимое this.
fill() Метод также заполняет пустые ячейки в разреженных массивах с помощью value.
Примеры:
console.log(Array(3).fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
4.2. Array.splice()
Метод изменяет содержимое массива путем удаления или замены существующих элементов и / или добавления новых элементов.
Синтаксис:
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item0 [, item1 ... itemN])
Примеры:
- const myFish = ["angel", "clown", "trumpet", "sturgeon"]; const removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
// ["parrot", "anemone", "blue", "trumpet", "sturgeon"] - const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// ["Jan", "Feb", "March", "April", "May"]
4.3. Array.pop()
Метод удаляет последний элемент из массива и возвращает этот элемент. Этот метод изменяет длину массива.
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const popped = myFish.pop();
console.log(myFish); // ['angel', 'clown', 'mandarin' ]
console.log(popped); // 'sturgeon'
4.4. Array.push()
Метод добавляет указанные элементы в конец массива и возвращает новую длину массива.
const sports = ["soccer", "baseball"];
const total = sports.push("football", "swimming");
console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] console.log(total); // 4
4.5. Array.shift()
Метод удаляет первый элемент из массива и возвращает этот удаленный элемент. Этот метод изменяет длину массива.
const myFish = ["angel", "clown", "mandarin", "surgeon"];
const shifted = myFish.shift();
console.log(myFish); // ['clown', 'mandarin', 'surgeon']
console.log(shifted); // 'angel'
4.6. Array.unshift()
Метод добавляет указанные элементы в начало массива и возвращает новую длину массива.
const arr = [1, 2];
arr.unshift(0); // [0, 1, 2]
arr.unshift(-2, -1); // [-2, -1, 0, 1, 2]
arr.unshift([-4, -3]); // [[-4, -3], -2, -1, 0, 1, 2]
arr.unshift([-7, -6], [-5]); // [[-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2]
4.7. Array.toSplaced()
Метод возвращает новый массив с некоторыми элементами, удаленными и / или замененными по заданному индексу.
Он выполняет несколько действий одновременно: удаляет заданное количество элементов из массива, начиная с заданного индекса, а затем вставляет заданные элементы с тем же индексом. Однако он возвращает новый массив вместо изменения исходного массива. Поэтому удаленные элементы не возвращаются из этого метода.
Вы можете использовать toSpliced() для удаления, добавления и замены элементов в массиве и создания нового массива более эффективно, чем с помощью slice() и concat().
Пример:
const months = ["Jan", "Mar", "Apr", "May"];
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
5. Методы сортировки и изменения порядка элементов
5.1. Array.reverse()
Метод переворачивает массив и возвращает ссылку на тот же массив.
const items = [1, 2, 3]; // [1, 2, 3]
const reversed = items.reverse(); // [3, 2, 1]
console.log(items); // [3, 2, 1]
5.2. Array.sort()
Метод сортирует элементы массива и возвращает ссылку на тот же массив, который теперь отсортирован. Порядок сортировки по умолчанию - по возрастанию.
Синтаксис:
sort()
sort(compareFn)
Пример:
numericStringArray = ['80', '9', '700']
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort((a, b) => a - b); // ['9', '80', '700']
5.3. Array.copyWithin()
Общий синтакисис:
copyWithin(target, start)
copyWithin(target, start, end)
Метод является высокопроизводительным методом для сдвига данных. Метод неглубоко копирует часть массива в другое место в том же массиве и возвращает этот массив без изменения его длины.
Метод является мутирующим методом. Он изменяет данные, но не изменяет длину массива. console.log([1, 2, 3, 4, 5].copyWithin(0, 3)); // [4, 5, 3, 4, 5] console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4)); // [4, 2, 3, 4, 5] console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1)); // [1, 2, 3, 3, 4]
5.4. Array.toReversed()
Метод возвращает новый массив (в отличие от reverse()) с элементами в обратном порядке.
Синтаксис: toReversed()
Пример:
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
5.5. Array.toSorted()
Метод возвращает новый массив с элементами, отсортированными в порядке возрастания.
Пример:
const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']
const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b); console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]
6. Итераторы
6.1. Array[Symbol.iterator]()
Метод возвращает объект итератора массива, который выдает значение каждого индекса в массиве.
const arr = ["a", "b", "c", "d", "e"];
const arrIter = arr[Symbol.iterator]();
console.log(arrIter.next().value); // a
console.log(arrIter.next().value); // b
console.log(arrIter.next().value); // c
console.log(arrIter.next().value); // d
console.log(arrIter.next().value); // e
6.2. Array.entries()
Метод возвращает новый объект-итератор массива, который содержит пары ключ / значение для каждого индекса в массиве.
const array = ["a", "b", "c"];
const arrayEntries = array.entries();
for (const element of arrayEntries) {
console.log(element);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
6.3. Array.values()
Метод возвращает новый объект-итератор массива, который повторяет значение каждого элемента в массиве.
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
iterator.next(); // { value: "a", done: false }
iterator.next(); // { value: "b", done: false }
iterator.next(); // { value: "c", done: false }
iterator.next(); // { value: "d", done: false }
iterator.next(); // { value: "e", done: false }
iterator.next(); // { value: undefined, done: true } console.log(iterator.next().value); // undefined
6.4. Array.keys()
Метод возвращает новый объект-итератор массива, который содержит ключи для каждого индекса в массиве.
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2
7. Прочие методы
7.1. Array.isArray()
Метод определяет, является ли переданное значение Array.
console.log(Array.isArray([1, 3, 5])); // true
console.log(Array.isArray('[]')); // false
console.log(Array.isArray(new Array(5))); // true
console.log(Array.isArray(new Int16Array([15, 33]))); // false
7.2. Array.join()
Метод создает и возвращает новую строку путем объединения всех элементов в этом массиве, разделенных запятыми или указанной строкой-разделителем. Если массив содержит только один элемент, то этот элемент будет возвращен без использования разделителя.
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()); // "Fire,Air,Water"
console.log(elements.join('')); // "FireAirWater"
console.log(elements.join('-')); // "Fire-Air-Water"
7.3. Array.reduce()
Метод выполняет предоставленную пользователем функцию обратного вызова "reducer" для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления для предыдущего элемента. Конечным результатом выполнения редуктора для всех элементов массива является единственное значение.
При первом выполнении обратного вызова "возвращаемое значение предыдущего вычисления" отсутствует. Если указано, вместо него может быть использовано начальное значение. В противном случае элемент массива с индексом 0 используется в качестве начального значения, и итерация начинается со следующего элемента (индекс 1 вместо индекса 0).
Синтаксис:
reduce(callbackFn)
reduce(callbackFn, initialValue)
Пример:
const array1 = [1, 2, 3, 4];
const initialValue = 0;
const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);
console.log(sumWithInitial);
// 10
С помощью этого метода можно создать асинхронный конвейер функций
const asyncPipe =
(...functions) =>
(initialValue) =>
functions.reduce(async (acc, fn) => fn(await acc), initialValue);
const p1 = async (a) => a * 5;
const p2 = async (a) => a * 2;
const f3 = (a) => a * 3;
const p4 = async (a) => a * 4;
asyncPipe(p1, p2, f3, p4)(10).then(console.log); // 1200
7.4. Array.reduceRight()
Тоже, что и 6.3. Array.reduce(), только функция обратного вызова запускается для всех элементов массива в порядке убывания индекса.
7.5. Array.toLocaleString()
Метод возвращает строку, представляющую элементы массива. Элементы преобразуются в строки с помощью их toLocaleString методов, и эти строки разделяются строкой, зависящей от локали (например, запятой ",").
Синтаксис:
toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)
Пример:
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString);
// "1,a,12/21/1997, 2:12:00 PM"
7.6. Array.toString()
Метод возвращает строку, представляющую указанный массив и его элементы.
Пример1:
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ];
console.log(matrix.toString()); // 1,2,3,4,5,6,7,8,9
Пример2:
const arr = [];
arr.push(1, [3, arr, 4], 2);
console.log(arr.toString()); // 1,3,,4,2
