Массив в JavaScript такой же, как и в любом другом языке программирования. Это наборы данных. В JavaScript они могут быть набором строк, чисел, объектов, массивов и функций. Они также могут быть смесью типов данных.
Как и любая другая структура данных в JavaScript, они имеют набор методов/функций, которые можно вызывать для получения, установки, управления, преобразования и удаления элементов в массиве или даже для слияния двух массивов.
Определение массива
Существует несколько способов определения массива:
Использование конструктора
Конструкторы используются для создания нового экземпляра объекта. Поэтому они используют ключевое слово «новое».
var arr = new Array();
Это создаст пустой массив. Вы можете создать массив с предопределенным набором данных, выполнив следующие действия:
var arr = new Array(1,2,3);
Стенография
Сокращенный метод не требует использования ключевого слова «новое» или вызываемого метода Array. Вы просто определяете массив, используя квадратные скобки:
var arr = [];
Чтобы предварительно заполнить массив данными:
var arr = [1,2,3];
Добавление элементов в массив
Чтобы добавить элемент в конец массива, вы используете метод push:
var arr = [1,2,3]; arr.push(4); // arr is now [1,2,3,4]
Чтобы добавить элемент в начало массива, мы используем unshift
var arr = [1,2,3]; arr.unshift(0); // arr is now [0,1,2,3]
Чтобы добавить элемент в определенную позицию в массиве, вы должны использовать splice, который принимает 3 аргумента. Первый — это индекс, с которого следует начать изменение, второй — количество элементов для удаления (поскольку мы только вставляем, мы передадим 0), а третий — значение для вставки. (splice будет принимать столько аргументов, сколько вы передадите, значения после второго аргумента будут добавлены в массив в указанной позиции)
var arr = [1,2,4]; arr.splice(2,0,3); // arr is now [1,2,3,4]
Удаление элементов из массива
Чтобы удалить элемент с конца массива, используйте метод pop:
var arr = [1,2,3,4]; arr.pop(); // arr is now [1,2,3]
Чтобы удалить элемент из начала массива, используйте метод shift:
var arr = [0,1,2,3]; arr.shift(); // arr is now [1,2,3]
Чтобы удалить элемент из определенной позиции в массиве, используйте splice
var arr = [1,2,3,3,4]; arr.splice(2,1); // arr is now [1,2,3,4];
Объединение массивов
Чтобы объединить массив, мы используем метод concat:
var arr1 = [1,2,3],
arr2 = [4,5,6];
arr = arr1.concat(arr2);
// arr is [1,2,3,4,5,6];
Сортировка массивов
В JavaScript числа и строки сортируются, как и ожидалось, в числовом и алфавитном порядке. Однако следите за массивами числовых строк. Если вы отсортировали ['1','2','3','4','5','6','7','8','9','10'], вы можете ожидать, что ничего не произойдет, потому что они кажутся упорядоченными. Но поскольку это строки, вы на самом деле получите ['1','10','2','3','4','5','6','7','8','9'] Мы рассмотрим, как это преодолеть, но сначала нам нужен простой пример:
Простая сортировка
var arr = [2,1,3,4,6,5]; arr = arr.sort(); // arr is now [1,2,3,4,5,6] arr = ['b','a','d','c','e']; arr = arr.sort(); // arr is now ['a','b','c','d','e']
Комплексная сортировка
var arr = ['2','4','6','8','1','3','5','7','9','10']
arr.sort((a,b)=>{
var returnVal = 0;
a = parseInt(a);
b = parseInt(b);
if (a < b) {
returnVal = -1;
}
if (a > b) {
returnVal = 1;
}
return returnVal;
})
console.log(arr);
Сортировка может принимать пользовательскую функцию, которая будет вызываться для каждого элемента в массиве. Функция будет вызываться с двумя аргументами: текущим значением индекса и следующим значением индекса. Чтобы переместить элемент в более низкий индекс, вы должны вернуть -1, для более высокого индекса вернуть 1, а чтобы сохранить элемент в той же позиции, вернуть 0. В приведенном выше примере мы сначала анализируем числовые строки в целые числа. Затем мы сравниваем их друг с другом и возвращаем соответствующее значение.
Фильтрация массивов
Тут особо объяснять нечего. Фильтр работает так, как вы можете догадаться:
var arr = ['apple','orange','lemon','carrot','potato','celery'];
function isFruit(val) {
return ['apple','orange','lemon'].includes(val);
}
arr = arr.filter(isFruit);
// arr is now ['apple','orange','lemon']
Примечание: в предыдущем примере мы используем метод массива
includes, который на момент написания статьи не поддерживается IE, но поддерживается Edge. Если вам нужно поддерживать IE, вы должны сделать что-то вроде этого:['apple','orange','lemon'].indexOf(val) !== -1;
Вспомогательные методы
Есть несколько служебных методов массивов, которые очень полезны:
arr.length() — дает общее количество элементов в массиве
arr.indexOf(item) — возвращает индекс переданного элемента в массиве. Если элемент не найден, он возвращает -1
arr.includes(item) — возвращает логическое значение (true или false) в зависимости от того, найден ли переданный элемент в массиве. Это не поддерживается ни в одной версии IE, но есть в Edge.
arr.some(item => item > 10) — возвращает логическое значение в зависимости от того, возвращает ли заданное условие значение true для некоторых элементов массива. Это принимает функцию, я показываю ее, используя функцию стрелки для простоты.
arr.reverse() — переворачивает элементы массива внутри массива. Если бы в массиве было 10 элементов, элемент, изначально находившийся в индексе 0, был бы перемещен в индекс 9 и так далее.
Редукторы
Редуктор используется для накопления значений и возврата их в виде меньшего массива или единственного числа. Этот пример взят из MDN.
var total = [0,1,2,3].reduce(function(accumulatedValue, currentItemValue){
return accumulatedValue + currentItemValue;
}, 0) // 0 is the initial value of the accumulated value.
Метод сокращения выполняет итерацию по массиву и для каждого элемента в массиве вызывает метод, который принимает функцию обратного вызова и начальное значение аккумулятора. Метод обратного вызова вызывается с двумя параметрами: текущим накопленным значением и текущим значением элемента. Поскольку в этом примере запрашивается общее количество элементов в массиве, мы просто добавляем накопленное значение к значению элемента и возвращаем его.
Для каждого
Метод forEach — это простой способ выполнить действие для каждого элемента массива. Метод ничего не возвращает и не изменяет исходный массив. Вот пример того, как вы можете его использовать:
var arr = [1,2,3,4],
doubled = [];
arr.forEach(val => doubled.push(val*2));
// doubled is now [2,4,6,8]
карта
map во многом похож на forEach, за исключением того, что он возвращает новый массив на основе действий, выполненных с каждым элементом:
var arr = [1,2,3,4],
doubled = arr.map(val => val*2);
// doubled is [2,4,6,8]
Итераторы
Я использовал слово «итератор» в этой статье для обозначения того, как метод делает что-то для каждого элемента в массиве. Существуют также специальные итераторы для массивов. Для этих итераторов метод next() вызывается каждый раз, когда вы готовы к следующему значению в массиве. Есть 2 метода массива, которые возвращают итераторы:
keys — перебирает все ключи в массиве или объекте (не поддерживается IE)
values — перебирает все значения в массиве или объекте (не поддерживается Chrome или IE)
Вот пример того, как вы можете использовать итератор:
var arr = ['a','b','c'],
iterator = arr.keys(),
str = '';
function consStr(iter) {
var next = iter.next();
if (!next.done) {
str = str + arr[next.value];
consStr(iter);
}
}
consStr(iterator);
// str = "abc"
Преимущество итераторов в том, что вам не нужно выполнять все действия над массивом одновременно. Следующий метод итератора можно вызвать в любое время после определения итератора.
Существует множество методов и способов работы с массивами. Для полной документации перейдите на MDN, там вы можете увидеть примеры кода, пояснения и совместимость браузера для всех методов массива. Далее я расскажу о некоторых разногласиях и о некоторых вещах, которые полезно знать, а также о некоторых вещах, которые возникают в вопросах на собеседовании.
