Работа с массивами в JavaScript

Массивы — чрезвычайно полезны для структурированного хранения и передачи большого количества данных. Однако для удобной работы с такой громоздкой конструкцией требуются специальные методы. Рассмотрим некоторые из них.

Создание массива

const a = []
const a = [1, 2, 3]
const a = Array.of(1, 2, 3)
const a = Array(6).fill(1) // массив из шести единиц

Размер массива

arr.length

Проверка на наличие элемента

array.includes(element)

Метод Array.prototype.includes ищет в массиве array элемент element и возвращает true или false.

Поиск регистрозависимый, ищет точное соответствие, а не вхождение подстроки.

Можно указать начальную точку для поиска (передается вторым аргументом).

array.includes(element, 2)

Также может быть применен к строкам.

Поиск элемента

Поиск с начала массива

array.indexOf(element)

Метод Array.prototype.indexOf возвращает позицию (индекс) элемента в массиве. Если в данном массиве такого элемента нет, вернет -1. Если в массиве несколько элементов с таким значением, вернет индекс первого найденного.

Можно указать начальную точку для поиска, как в предыдущем методе.

array.indexOf(element, 2)

Поиск с конца массива

array.lastIndexOf(element)

Метод Array.prototype.lastIndexOf делает то же самое, но поиск начинает с конца массива. Таким образом, если в массиве несколько одинаковых элементов, будет возвращен последний из них.

Array.prototype.find и Array.prototype.findIndex

arr.find((element, index, array) => { // return true or false })
arr.findIndex((element, index, array) => { // return true or false })

Метод Array.prototype.find возвращает первый соответствующий элемент или undefined.

Метод Array.prototype.findIndex возвращает индекс первого соответствующего элемента или -1.

Добавить и удалить элементы

В конце массива

array.pop()

Метод Array.prototype.pop удаляет последний элемент и возвращает его.

array.push(element)

Метод Array.prototype.push добавляет новый элемент в конец, возвращает измененный массив.

Аналогичный код:

array[array.length] = element

В начале массива

array.shift()

Метод Array.prototype.shift удаляет первый элемент и возвращает его.

array.unshift(element)

Метод Array.prototype.unshift добавляет новый элемент в начало массива, возвращает измененный массив.

Обнуление длины

arr.length = 0;

Удаляет все элементы массива.

Удаление одного элемента

delete arr[index]

Удаляет элемент по указанному индексу, при этом оставляет «дырку» — пустой элемент.

Array.prototype.splice

arr.splice(index[, deleteCount, elem1, ..., elemN])

Метод Array.prototype.splice yдаляет deleteCount элементов, начиная с номера index, а затем вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.

Array.prototype.concat

arr.concat(value1, value2, … valueN)
arr.concat(arr2)

Метод Array.prototype.concat создает новый массив, равный arr и добавляет указанные в скобках элементы.

Перебор

Циклы

В массивах перебор элементов осуществляется обычным циклом for или циклом for-of:

for (let i=0; i<arr.length; i++) {
  // ...
}

for (let v of arr) { 
  // ... 
}

forEach

Можно также вызвать функцию для каждого элемента массива с помощью метода Array.prototype.forEach:

arr.forEach(callback(item, i, arr)[, this])

В функцию передаются — элемент массива, его номер и сам массив.

Вторым аргументом forEach может принимать контекст вызова функции callback.

Соответствие условию

arr.every(callback(item, i, arr)[, this])

Метод Array.prototype.every возвращает true, если вызов callback вернёт true для каждого элемента arr.

arr.some(callback(item, i, arr)[, this])

Метод Array.prototype.some возвращает true, если вызов callback вернёт true хотя бы для одного элемента arr.

Из массива в строку и обратно

split

let string = 'some interesting text';
let arr = string.split(' ');

Первый аргумент метода String.prototype.split — разделитель (если пустая строка, разобьет по буквам). Второй аргумент — ограничение на количество элементов в массиве.

join

let arr = ['some', 'interesting', 'text'];
let string = arr.join(' ');

new Array(4).join("ля") // повторит разделитель ля 4 раза, массив будет пустым

Метод Array.prototype.join соединяет элементы массива в строку через указанный разделитель.

Копирование

slice

arr.slice(begin, end)

Копирует участок массива от begin до end (не включая). Исходный массив при этом не меняется.

• если не указан end — копирует до конца массива
• если start отрицательный — считает с конца
• без аргументов — скопирует весь массив

Метод slice() одинаков для массивов (Array.prototype.slice) и строк (String.prototype.slice).

Spread-оператор

arr1 = [...arr2]
const b = Array.of(...a)

Spread-синтаксис — способ копировать массив без копирования ссылки на него.

Array.from

const b = Array.from(a)
const b = Array.from(a, x => x % 2 == 0)

Метод Array.from также копирует массив без копирования ссылки на него. Может принимать функцию фильтрации.

Array.prototype.copyWithin

arr.copyWithin(target, start[, end = this.length])

Метод Array.prototype.copyWithin копирует часть массива внутри него в указанную позицию target.

const a = [1, 2, 3, 4]
a.copyWithin(0, 2) // [3, 4, 3, 4]
const b = [1, 2, 3, 4, 5]
b.copyWithin(0, 2) // [3, 4, 5, 4, 5]
const c = [1, 2, 3, 4, 5]
c.copyWithin(0, 2, 4) // [3, 4, 3, 4, 5]

Объединение массивов

let arr1 = [...arr2, ...arr3]

Spread-синтаксис может объединить элементы массивов arr2 и arr3 в массиве arr1.

Сортировка, фильтрация, изменение

Array.prototype.sort

arr.sort(function)

Метод Array.prototype.sort принимает функцию для сортировки. Функция попарно сравнивает между собой элементы массива и возвращает значение, на основании которого массив сортируется:

• Положительное, если a > b,
• Отрицательное, если a < b,
• Если a = b, можно вернуть 0, но в целом это не важно.

Array.prototype.reverse

arr.reverse()

Метод Array.prototype.reverse переворачивает массив.

Array.prototype.filter

arr.filter(callback(item, i, arr)[, this]);

// пример фильтрующей функции
function(number, index, arr) {
  return number > 0;  //возвращает только элементы с положительным значением
}

Метод Array.prototype.filter фильтрует массив с помощью функции фильтрации.

Array.prototype.map

arr.map(callback(item, i, arr)[, this])

// пример трансформирующей функции
function(item, index, arr) {
  return item.length; // вместо строк выводит их длины
}

Метод Array.prototype.map трансформирует каждый элемент массива.

Array.prototype.reduce

arr.reduce(callback(previousValue, currentItem, index, arr)[, this])
arr.reduceRight(callback(previousValue, currentItem, index, arr)[, this])

Метод Array.prototype.reduce последовательно обрабатывает каждый элемент массива функцией callback с сохранением промежуточного результата.

Массивы и объекты

Есть коллекция строк, необходимо проверить, есть ли в ней указанный элемент.
Свойство массива indexOf работает медленно, поэтому оно не подходит. Чтобы сделать это быстро, нужно превратить все элементы в ключи объекта, доступ к которым осуществляется гораздо быстрее.

var obj = {};
var arr = ["elem1", "elem2", "elem3"];
for (var i = 0; i < arr.length; i++) {
  var key = arr[i]; // для каждого элемента создаём свойство
  obj[key] = true; // значение здесь не важно
}

Обратная задача — все свойства объекта собрать в массив:

var obj = {
  prop1: value1,
  prop2: value2,
  prop3: value3,
  prop4: value4
}
var keys = Object.keys(obj); //keys - массив, содержащий свойства объекта obj