Как определить длину массива javascript и еще много функций работы с ними. Работа с массивами в JavaScript

Что такое массив?

Массив — это особая переменная, которая может хранить более одного значения за раз.

Если у вас есть список неких значений (например, список марок автомобилей), то сохранение их в отдельных переменных будет выглядеть следующим образом:

var car1 = «Saab»; var car2 = «Volvo»; var car3 = «BMW»;

Все вроде бы нормально, но что если вам нужно пройтись в цикле по маркам автомобилей и найти какую-то конкретную марку? И при этом у вас есть не 3, а 300 автомобилей?

В этом случае вам поможет массив!

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

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

Самый простой способ создать массив в JavaScript это определить переменную-массив, присвоив ей нужные значения в виде константы-массива:

var имя_массива = [элемент1, элемент2, …];

Пример:

var cars = [«Saab», «Volvo», «BMW»];

Пробелы и перевод строки не имеют значения. Декларация массива может занимать и несколько строк:

var cars = [ «Saab», «Volvo», «BMW» ];

Внимание! Запятая после последнего элемента (например, «BMW»,) в разных браузерах работает по разному. Например, в IE 8 и более ранних версиях это приведет к ошибке.

Использование ключевого слова new

В следующем примере также создается массив и присваиваются значения:

var cars = new Array(«Saab», «Volvo», «BMW»);

Оба примера делают одно и то же. Обычно использовать конструкцию new Array() нет необходимости. Для простоты, читабельности и большей скорости исполнения скрипта лучше использовать первый способ создания массива (при помощи константы-массива).

Доступ к элементам массива

Чтобы получить доступ к элементу массива, необходимо обратиться к нему по его индексу.

В следующем выражении извлекается значение первого элемента массива cars:

var name = cars[0];

В следующем выражении изменяется первый элемент массива cars:

cars[0] = «Opel»;

Пример:

var cars = [«Saab», «Volvo», «BMW»]; document.getElementById(«demo»).innerHTML = cars[0];

Обратите внимание, что первый элемент массива имеет индекс [0], второй [1] и т.д. Индексация массивов всегда начинается с 0.

Кроме этого JavaScript допускает использование всего массива, обратившись к нему по его имени:

var cars = [«Saab», «Volvo», «BMW»]; document.getElementById(«demo»).innerHTML = cars;

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

Массивы — это особый тип объектов. Оператор typeof для массивов возвращает тип «object».

Однако JavaScript массивы лучше описывать как массивы.

Массивы для доступа к «элементам» используют цифровые номера. В следующем примере person[0] возвращает значение «Иван»:

var person = [«Иван», «Петров», 46];

Объекты для доступа к своим «подпеременным» используют их имена. В следующем примере person.firstName возвращает значение «Иван»:

var person = {firstName:»Иван», lastName:»Петров», age:46};

Элементами массива могут быть объекты

Переменные JavaScript могут быть объектами. Массивы — особый вид объектов.

Благодаря этому, массивы могут хранить переменные разных типов.

Помимо примитивных значений в массивах могут храниться объекты, функции и другие массивы:

myArray[0] = Date.now; myArray[1] = myFunction; myArray[2] = myCars;

Свойства и методы массивов

Реальная сила массивов JavaScript заключается в их встроенных свойствах и методах:

var x = cars.length; // Свойство length возвращает кол-во элементов var y = cars.sort(); // Метод sort() сортирует массив

О методах массивов будет рассказано в следующей главе этого учебника.

Добавление элементов и объектов в массив с помощью оператора присваивания в JavaScript

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

var myArray = [‘one’, ‘two’, ‘three’]; myArray[3] = ‘four’; console.log(myArray)

Выход:

[«one», «two», «three», «four»]

В приведенном выше коде мы добавили элемент four в индекс 3 массива myArray. Вы также можете заменить элементы, присутствующие в массиве, используя их индекс. Теперь добавим объект в массив. См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; var myArray2 = [‘four’, ‘five’] myArray[3] = myArray2; console.log(myArray)

Выход:

 [«one», «two», «three», Array(2)]

В приведенном выше коде мы добавили объект массива myArray2 в массив myArray с индексом 3. Вы можете добавлять объекты любого типа данных в массив с помощью оператора присваивания.

Добавление элементов и объектов в массив с помощью функции push() в JavaScript

Чтобы добавить элементы и объекты в массив, вы можете использовать функцию push() в JavaScript. Функция push() добавляет элемент или объект в конец массива. Например, создадим массив с тремя значениями и добавим элемент в конец массива с помощью функции push(). См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; myArray.push(‘four’); console.log(myArray)

Выход:

[«one», «two», «three», «four»]

В приведенном выше коде мы добавили элемент four в конец myArray. Теперь добавим объект в массив с помощью функции push(). См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; var myArray2 = [‘four’, ‘five’] myArray.push(myArray2); console.log(myArray)

Выход:

 [«one», «two», «three», Array(2)]

В приведенном выше коде мы добавили объект массива myArray2 в массив myArray в конце. Вы можете добавлять в массив объекты любого типа данных с помощью функции push(). Вы также можете добавить несколько значений в массив, добавив их в функцию push() через запятую. Чтобы добавить элементы или объекты в начало массива, мы можем использовать функцию unshift(). Например, добавим элемент four в начало массива myArray. См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; myArray.unshift(‘four’); console.log(myArray)

Выход:

[«four», «one», «two», «three»]

Как видно из вывода, в начало массива добавляется пункт four. Вместо добавления объекта массива вы можете добавить все его элементы с помощью функции push.apply(). Например, давайте добавим элементы, представленные в одном массиве, к другому массиву. См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; var myArray2 = [‘four’, ‘five’] myArray.push.apply(myArray, myArray2); console.log(myArray)

Выход:

[«one», «two», «three», «four», «five»]

Как вы можете видеть в выводе, два элемента, присутствующие в myArray2, были добавлены в myArray. Вы также можете объединить два массива в другой, используя функцию concat(). Например, давайте создадим массив, объединив два существующих массива с помощью функции concat(). См. Код ниже.

var myArray = [‘one’, ‘two’, ‘three’]; var myArray2 = [‘four’, ‘five’] var myArray3 = myArray.concat(myArray2); console.log(myArray3)

Выход:

[«four», «five», «one», «two», «three»]

Вы можете изменить порядок элементов, присутствующих в myArray3, изменив порядок объединения.

Как удалить элемент массива

Удаление элемента (ов) из массива осуществляется одним из следующих методов:

• .pop() — предназначен для удаления последнего элемента массива.
• .shift() — предназначен для удаление первого элемента массива.
• .splice() — может использоваться для удаления одного или нескольких элементов из массива, начиная с указанного.

Например:

var myArray = [«Газета», «Журнал», «Книга»]; myArray.pop(); // [«Газета», «Журнал»] myArray.shift(); // [«Журнал»] var display = [«19 inch», «21 inch», «22 inch», «27 inch»]; display.splice(2,1); //удалить один элемент начиная с элемента, имеющего индекс равный 2. // -> [«19 inch», «21 inch», «27 inch»] display.splice(0,2); //удалить два элемента начиная с элемента, имеющего индекс, равный 0. // -> [«27 inch»]

Демонстрация удаления конкретного элемента с использованием метода splice

В этой демо-версии создается массив чисел. Первоначально в массив добавляются пять элементов. После этого используется метод splice для удаления третьего элемента. Таким же образом в JavaScript можно удалить первый элемент массива.

Элементы числового массива отображаются до и после использования метода JavaScript splice следующим образом:

Посмотреть онлайн демо-версию и код

Код JavaScript с методом splice:

Удаление повторяющихся объектов из массива JavaScript

Вы заметили, что я использовал для JavaScript удаления элемента массива два параметра. Первый указывает индекс элемента, который нужно удалить. Второй – сколько элементов нужно удалить после указанного ключа.

В следующей демо-версии показан случай, когда мы используем второй параметр.

Что делать, если второй параметр не указан в JavaScript-методе splice?

Использование того же кода, но без второго параметра в методе splice:

Arr_Numbers.splice(2);

Код и результат:

Перебор массива JS

Посмотреть онлайн демо-версию и код

Как видите, здесь были удалены и все элементы перед указанным номером индекса. Кроме этого метод splice возвращает массив удаленных элементов.

Код JavaScript:

Вставка, удаление и замена элементов с помощью Array.splice()

Использование функции delete для удаления элемента массива

Также, чтобы в JavaScript удалить элемент массива, можно использовать функцию delete. Но она сохраняет пустое место, и если вы вернете этот массив после использования функции, то удаленный элемент будет отображен как undefined.

Рассмотрим демо-версию, в которой используется функция delete:

Посмотреть онлайн демо-версию и код

Код JavaScript:

Вы видите, что для третьего элемента отображается undefined после его удаления с помощью функции delete.

Примечание. Вы должны указать номер индекса в квадратных скобках.

Чтобы в JavaScript удалить элемент массива, рекомендуется использовать splice. Метод delete может привести к возникновению сложностей по мере того, как количество undefined элементов будет увеличиваться.

Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!

Данная публикация является переводом статьи «How to remove a specific JavaScript array element Splice, delete functions» , подготовленная редакцией проекта.

Как удалить массив

Для того чтобы удалить массив, хранящейся в некоторой переменной, достаточно присвоить ей другое значение.

Например:

var myList = [«Газета», «Журнал», «Книга»]; // присвоим переменной myList значение null myList = null;

Как добавить элемент в массив

Для добавления элемента в массив можно воспользоваться одним из следующих методов:

• .push() — предназначен для добавления элемента в конец массива.
• .unshift() — предназначен для добавления элемента в начало массива.
• .splice() — может использоваться для добавления одного или нескольких элементов в массив, начиная с указанного.

var display = [«19 inch», «21 inch», «22 inch», «27 inch»]; display.push(«30 inch»); // [«19 inch», «21 inch», «22 inch», «27 inch», «30 inch»] display.unshift(«17 inch»); // [«17 inch», «19 inch», «21 inch», «22 inch», «27 inch», «30 inch»] display.splice(3, 0, «24 inch», «26 inch»); // добавляет элементы «24 inch» и «26 inch» в массив после элемента, имеющего индекс 3.

Как вывести массив

Для того чтобы вывести массив в некоторый элемент на веб-странице его предварительно необходимо преобразовать в строку.

Например, вывести содержимое некоторого массива в элемент с id=»array»:

Как создать пустой массив

Создание пустого массива осуществляется следующими конструкциями:

// 1 способ var имя_массива = new Array(); // 2 способ var имя_массива = [];

Как очистить массив

Для того чтобы удалить все элементы из некоторого массива можно воспользоваться одним из следующих способов:

var display = [«19 inch», «21 inch»]; // 1 способ display = []; // 2 способ display.length = 0; // 3 способ display.splice(0,display.length); // 4 способ while(display.length > 0) { display.pop(); }

Как объединить массивы

Для того чтобы объединить 2 или больше массивов можно воспользоваться методом concat(). Этот метод не изменяет существующие массивы, он создаёт новый массив, содержащий элементы объединяемых массивов.

var namesRussia = [«Иван», «Сергей»]; var namesEnglish = [«John», «Leo», «Bob»]; var names = namesRussia.concat(namesEnglish);

Нарезка массива

Метод slice() нарезает из куска массива в новый массив.

В этом примере вырезается часть массива, начиная с элемента массива 1 («Оранжевый»):

Пример

var fruits = [«Banana», «Orange», «Lemon», «Apple», «Mango»];
var citrus = fruits.slice(1); Попробуйте сами »

Метод slice() создает новый массив. Он не удаляет какие-либо элементы из исходного массива.

В этом примере вырезается часть массива, начиная с элемента массива 3 («Apple»):

Пример

var fruits = [«Banana», «Orange», «Lemon», «Apple», «Mango»];
var citrus = fruits.slice(3); Попробуйте сами »

Метод slice() может принимать два аргумента , как slice(1, 3).

Затем метод выбирает элементы из начального аргумента и до конечного аргумента (но не включая его).

Пример

var fruits = [«Banana», «Orange», «Lemon», «Apple», «Mango»];
var citrus = fruits.slice(1, 3); Попробуйте сами »

Если конечный аргумент опущен, как в первых примерах, slice() метод вырезает остальную часть массива.

Пример

var fruits = [«Banana», «Orange», «Lemon», «Apple», «Mango»];
var citrus = fruits.slice(2);

Автоматический toString()

JavaScript автоматически преобразует массив в строку, разделенную запятыми, когда ожидается примитивное значение.

Это всегда так, когда вы пытаетесь вывести массив.

Эти два примера дадут одинаковый результат:

Пример

var fruits = [«Banana», «Orange», «Apple», «Mango»];
document.getElementById(«demo»).innerHTML = fruits.toString();

Пример

var fruits = [«Banana», «Orange», «Apple», «Mango»];
document.getElementById(«demo»).innerHTML = fruits;

Все объекты JavaScript имеют метод toString().

Нахождение максимальных и минимальных значений в массиве

Нет встроенных функций для поиска самого высокого или самого низкого значения в массиве JavaScript.

А. Перебор настоящих массивов

Для этого используются: 1. Известный метод Array.prototype.forEach. 2. Классический цикл for. 3. «Правильно» построенный цикл for…in.

Что же, давайте рассмотрим эти методы подробнее.

1. Метод forEach

Пример использования:

vara=[«a»,»b»,»c»];a.forEach(function(entry){console.log(entry);});

Достоинства forEach заключаются в том, что вам не надо объявлять локальные переменные, чтобы хранить индекс и значения текущего элемента массива, так как они автоматически передаются в функцию обратного вызова (так называемый колбэк) в качестве аргументов.

С помощью forEach вы не только сможете выполнить перебор всех элементов массива, но и получите возможность выполнения некоторых действий с массивами: 1) some — возвращает true, когда хотя бы для одного элемента массива колбэк возвращает значение, приводимое к true; 2) every — возвращает true, когда для каждого элемента массива колбэк возвращает значение, приводимое к true; 3) filter — обеспечивает создание нового массива, включающего те элементы исходного, для коих колбэк возвращает true; 4) reduce — сводит массив к единственному значению, т. е. колбэк применяется по очереди к каждому элементу массива, начиная с 1-го (полезно при вычислении суммы элементов массива и прочих итоговых функций); 5) map — обеспечивает создание нового массива, состоящего из значений, которые возвращаются колбэком; 6) reduceRight — работает так же, как и reduce с той лишь разницей, что перебирает элементы в обратном порядке.

2. Цикл for

Что тут скажешь — старый добрый for…

vara=[«a»,»b»,»c»];varindex;for(index=0;index<>

Кстати, когда длина массива неизменна в течение цикла, а цикл принадлежит критическому с точки зрения производительности участку кода (что маловероятно), подходит «более оптимальная» версия for с хранением длины массива:

vara=[«a»,»b»,»c»];varindex,len;for(index=0,len=a.length;index<>

По идее, данный код должен выполняться немного быстрее предыдущего.

Если же порядок перебора элементов не особо важен, можно выполнить очередную оптимизацию, избавившись от переменной хранения длины массива и изменив прямой порядок перебора на обратный:

vara=[«a»,»b»,»c»];varindex;for(index=a.length-1;index>=0;—index){console.log(a[index]);}

Однако справедливости ради стоит отметить, что в современных движках JavaScript вышеописанные игры с оптимизацией мало что значат.

3. Правильное использование цикла for…in

Вообще, цикл for…in не предназначен для перебора массивов. Он перебирает не индексы нашего массива, а перечисляемые свойства объекта.

Однако, если нам нужен перебор разреженных массивов, цикл for…in может быть весьма полезным, если, разумеется, соблюдать меры предосторожности:

// a — разреженный массивvara=[];a[0]=»a»;a[10]=»b»;a[10000]=»c»;for(varkeyina){if(a.hasOwnProperty(key)&&/^0$|^[1-9]d*$/.test(key)&&key<=4294967294){console.log(a[key]);}}

В вышеописанном примере на каждой циклической итерации осуществляются 2 проверки: 1) то, что массив имеет своё свойство с именем key (ненаследованное из его прототипа); 2) то, что key — это строка, содержащая десятичную запись целого числа, значение которого менее 4294967294.

Да, такие проверки могут отнять много времени, но если мы имеем дело с разреженным массивом, данный способ эффективнее обычного цикла for, т. к. в последнем случае перебираются лишь элементы, которые определены в массиве явно. Например в коде выше произойдёт всего 3 итерации (для индексов 0, 10 и 10000), в то время как при использовании классического for — 10001 итерация.

Кстати, код проверок можете оформить в виде отдельной функции:

functionarrayHasOwnIndex(array,key){returnarray.hasOwnProperty(key)&&/^0$|^[1-9]d*$/.test(key)&&key<=4294967294;}

В таком случае тело цикла существенно сократится:

for(keyina){if(arrayHasOwnIndex(a,key)){console.log(a[key]);}}

Вышеописанный код универсален, но вы можете использовать версию и короче. Формально она не совсем правильна, зато подходит практически для любых случаев:

for(keyina){if(a.hasOwnProperty(key)&&String(parseInt(key,10))===key){console.log(a[key]);}}

Б. Перебор массивоподобных объектов

В JavaScript есть не только настоящие массивы, но и массивоподобные объекты. У них есть свойство length и свойства с именами в виде чисел, которые соответствуют элементам массива. Это DOM-коллекции NodeList либо псевдомассив arguments, доступный внутри любого метода/функции.

1. Применяем способы перебора настоящих массивов

Практически все способы перебора настоящих массивов можно применять для перебора массивоподобных объектов. Например, при использовании конструкций for и for…in всё делается тем же путём.

Что касается forEach и прочих методов Array.prototype, то тут надо использовать вызов Function.apply.или Function.call.

Допустим, вы желаете применить forEach к свойству childNodes объекта Node:

Array.prototype.forEach.call(node.childNodes,function(child){// делаем что-либо с объектом child});

Чтобы было удобнее повторно использовать этот приём, объявите ссылку на метод Array.prototype.forEach в отдельной переменной и используйте её как сокращение:

// (Считаем, что весь код ниже находится в одной области видимости)varforEach=Array.prototype.forEach;// …forEach.call(node.childNodes,function(child){// делаем что-либо с объектом child});

Когда в массивоподобном объекте есть итератор, его можно задействовать явно либо неявно для перебора объекта тем же способом, как и в случае с настоящими массивами.

2. Преобразование массивоподобного объекта в настоящий массив

Простой способ перебора — преобразовать массивоподобный объект в настоящий массив. Для этого подходит, универсальный метод Array.prototype.slice:

vartrueArray=Array.prototype.slice.call(arrayLikeObject,0);

Если же желаете преобразовать коллекцию NodeList в настоящий массив, то лучше действовать несколько иначе:

vardivs=Array.prototype.slice.call(document.querySelectorAll(«div»),0);

Кроме того, вместо Array.prototype.slice можно использовать и Array.from.

Итого

Мы рассмотрели методы:

• forEach – для перебора массива.
• filter – для фильтрации массива.
• every/some – для проверки массива.
• map – для трансформации массива в массив.
• reduce/reduceRight – для прохода по массиву с вычислением значения.

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