Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о JavaScript-е, то тут есть куда капнуть.
В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.
1. Добавление пользовательских свойств к массивам
Если вы воспользуетесь поиском для того чтобы найти определение массива в рамках языка JavaScript, то в большинстве источников будет утверждаться что данный тип значения переменной представляется в виде объекта.
Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.
2. Доступ к элементам массива в рамках цикла
Поскольку индексы массивов могут принимать только положительные значения, начало отсчёта начинается с нуля. Впоследствии мы можем использовать данный индекс для доступа к элементу массива на данной итерации цикла.
В ECMAScript6 был представлен способ прокрутки массива без использования индексов, а через новый цикл for…of .
Цикл for...of предназначен для прохода по элементам массива, не затрагивая при этом индекс элемента.
Var ary = ["orange","apple","lychee"]; for (let item of ary){ console.log(item); } // "orange", "apple", "lychee" Для сравнения: вывод индексов элементов в цикле for. var ary = ["orange","apple","lychee"]; for (var item = 0; item < ary.length; item++){ console.log(item); } // 0, 1, 2
3. Количество элементов — не размерность массива
Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство length рассчитывается в зависимости от максимального индекса элемента.
Свойство length очень неоднозначно. Чтобы в этом убедиться достаточно взглянуть на следующие манипуляции:
Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6
В последнем примере было достаточно поставить элемент на пятую позицию, в результате чего длина массива стала равна 6. Если вы думаете, что индексы от 0 до 4 создадутся автоматически, то будете неправы. Это можно проверить, используя оператор in .
Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false
В данном случае будет справедливо назвать массив ary "разрежённым".
Так же мы можем манипулировать свойством length для того чтобы обрезать массивы. В примере, представленном ниже, демонстрируется “потеря” элемента под индексом 5, путём уменьшения значения свойства length массива ary .
Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined
- Перевод
- I. Перебор настоящих массивов
- Метод forEach и родственные методы
- Цикл for
- Правильное использование цикла for...in
- Цикл for...of (неявное использование итератора)
- Явное использование итератора
- Использование способов перебора настоящих массивов
- Преобразование в настоящий массив
- Замечание по объектам среды исполнения
I. Перебор настоящих массивов
На данный момент есть три способа перебора элементов настоящего массива:- метод Array.prototype.forEach ;
- классический цикл for ;
- «правильно» построенный цикл for...in .
- цикл for...of (неявное использование итератора);
- явное использование итератора.
1. Метод forEach и родственные методы
Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach .Пример использования:
var a = ["a", "b", "c"];
a.forEach(function(entry) {
console.log(entry);
});
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.
К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.
Если вас беспокоят возможные затраты на вызов колбека для каждого элемента, не волнуйтесь и прочитайте это .
ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:
- every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
- some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
- filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
- map - создает новый массив, состоящий из значений возращаемых колбеком.
- reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
- reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.
2. Цикл for
Старый добрый for рулит :Var a = ["a", "b", "c"];
var index;
for (index = 0; index < a.length; ++index) {
console.log(a);
}
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:
Var a = ["a", "b", "c"];
var index, len;
for (index = 0, len = a.length; index < len; ++index) {
console.log(a);
}
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.
Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:
Var a = ["a", "b", "c"];
var index;
for (index = a.length - 1; index >= 0; --index) {
console.log(a);
}
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.
3. Правильное использование цикла for...in
Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл for...in перебирает не индексы массива, а перечислимые свойства объекта.Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:
// a - разреженный массив
var a = ;
a = "a";
a = "b";
a = "c";
for (var key in a) {
if (a.hasOwnProperty(key) &&
/^0$|^\d*$/.test(key) &&
key <= 4294967294) {
console.log(a);
}
}
В данном примере на каждой итерации цикла выполняется две проверки:
- то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
- то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .
Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции:
Function arrayHasOwnIndex(array, key) {
return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294;
}
Тогда тело цикла из примера значительно сократится:
For (key in a) {
if (arrayHasOwnIndex(a, key)) {
console.log(a);
}
}
Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:
For (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a); } }
4. Цикл for...of (неявное использование итератора)
ES6, пока все еще пребывающий в статусе черновика , должен ввести в JavaScript итераторы.Итератор
- это реализуемый объектом протокол, который определяет стандартный способ получения последовательности значений (конечной или бесконечной).
Итератор - это объект, в котором определен метод next() - функция без аргументов, возвращающая объект с двумя свойствами:
- done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
- value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .
Пример использования for...of:
Var val;
var a = ["a", "b", "c"];
for (val of a) {
console.log(val);
}
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива.
5. Явное использование итератора
Итераторы можно также использовать и явно, правда, в этом случае код становится значительно сложнее, по сравнению с циклом for...of . Выглядит это примерно так:Var a = ["a", "b", "c"];
var it = a.entries();
var entry;
while (!(entry = it.next()).done) {
console.log(entry.value);
}
В данном примере метод Array.prototype.entries возвращает итератор, который используется для вывода значений массива. На каждой итерации entry.value содержит массив вида [ключ, значение] .
II. Перебор массивоподобных объектов
Кроме настоящих массивов, в JavaScript встречаются также массивоподобные объекты . С настоящими массивами их роднит то, что они имеют свойство length и свойства с именами в виде чисел, соответствующие элементам массива. В качестве примеров можно назвать DOM коллекции NodeList и псевдомассив arguments , доступный внутри любой функции/метода.1. Использование способов перебора настоящих массивов
Как минимум большинство, если не все, способы перебора настоящих массивов могут быть применены для перебора массивоподобных объектов.Конструкции for и for...in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.
ForEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply .
Например, если вы хотите применить forEach к свойству childNodes объекта Node , то это делается так:
Array.prototype.forEach.call(node.childNodes, function(child) {
// делаем что-нибудь с объектом child
});
Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:
// (Предполагается, что весь код ниже находится в одной области видимости)
var forEach = Array.prototype.forEach;
// ...
forEach.call(node.childNodes, function(child) {
// делаем что-нибудь с объектом child
});
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.
2. Преобразование в настоящий массив
Есть также еще один, очень простой, способ перебора массивоподобного объекта: преобразовать его в настоящий массив и использовать любой из рассмотренных выше способов перебора настоящих массивов. Для преобразования можно использовать универсальный метод Array.prototype.slice , который может быть применен к любому массивоподобному объекту. Делается это очень просто, как показано в примере ниже:Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:
Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update
: Как было отмечено в комментариях
Учимся индексировать массивы в js , удалять и добавлять их элементы.
Массив в JavaScript - это глобальный объект, предназначенный для хранения списка значений.
Он похож на другие переменные тем, что может хранить данные любого типа. Но у массива есть одно важное отличие от переменной: в нём может одновременно храниться больше одного элемента.
Массив - это упорядоченный набор значений. Каждое значение называется элементом и имеет свой номер, который называется индекс.
Элемент внутри массива может быть любого типа. Причём элементы одного массива могут быть разных типов: числа, строки, логические элементы и даже объекты или другие массивы.
Порядок элементов массива отсчитывается с 0 . Получается, что в массиве всегда будет смещение индекса на единицу: у первого элемента будет индекс 0 , у второго 1 , и т.д.
Вот пример массива с элементами различных типов:
Создание (объявление) массива
Массивы очень удобны, потому что в них можно хранить столько данных, сколько нужно. Максимально возможный размер js -массива — 2 32 элемента.
Нужно сказать JavaScript , что мы хотим создать именно массив. Для этого есть два варианта: значение в квадратных скобках или ключевое слово new .
Короткая запись: при помощи квадратных скобок
Заключённый в квадратные скобки список значений, разделённых запятыми.
var myArray = [ "Джек", "Сойер", "Джон", "Дезмонд" ];
Содержимое массива определяется тем, что находится между квадратными скобками. При этом каждое значение отделяется запятой.
Значения задаются так же, как и простые переменные, то есть строки нужно объявлять заключёнными в кавычки и т.д.
Чтобы объявить пустой массив, оставьте скобки пустыми:
var myArray = ;
Длинная запись: при помощи конструктора Array()
var lostArray = new Array("Джек", "Сойер", "Джон", "Дезмонд"); var twinPeaksArray = new Array("Лора", 2, ["Боб", "Лиланд", "Дейл"]);
Ключевое слово new говорит JavaScript создать новый массив, значения которого передаются как параметры.
Если вы заранее знаете, сколько элементов будет в вашем массиве, можно сразу передать это значение в конструкторе.
var myArray = new Array(80);
Выражение, приведенное выше, создаст пустой массив, состоящий из 80 слотов со значениями undefined .
Объявление пустого массива:
var myArray = new Array();
Доступ к элементам массива
С помощью индекса каждого элемента можно работать с любыми данными в массиве, обращаясь к ним при помощи оператора :
var myArray = ["Джек", "Сойер", "Джон", "Дезмонд"]; console.log(myArray); // Выводит “Джек” console.log(myArray); // Выводит “Дезмонд”
В массиве может быть несколько уровней, то есть каждый элемент может сам быть массивом. В итоге получится двумерный js -массив . Как же обратиться к этим массивам, которые располагаются внутри других - «многомерным массивам »?
Для примера давайте рассмотрим массив, представляющий семью. Дети из этой семьи записаны отдельным массивом внутри главного:
var familyArray = ["Мардж", "Гомер", ["Барт", "Лиза", "Мэгги"]];
Можно представить его следующим образом:
Для обращения к значению «Лиза »:
var lisa = familyArray; console.log(lisa); // выводит «Лиза»
Так можно продолжать практически бесконечно, что позволяет хранить в массивах вложенные друг в друга наборы данных и обращаться к ним при помощи индексов.
Добавление элементов в массив
Мы разобрались, как обращаться к элементам массива при помощи соответствующих им индексов. Похожим образом можно добавлять (или изменять) элементы, объявляя, например:
var myArray = [ "Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray); // Выводит "Кейт, Сун, Джулиет"
Что произойдёт, если я объявлю элемент с индексом, перед которым нет других элементов? Массив сам создаст все недостающие элементы и присвоит им значение undefined :
var myArray = ["Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray.length); // Выводит «6» console.log(myArray); // Prints ["Кейт", "Сун", undefined, undefined, undefined, "Джулиет"]
Узнать какова длина js -массива можно, воспользовавшись свойством length . В примере, приведенном выше, в массиве шесть элементов, и для трёх из них не было задано значение - они обозначены как undefined .
Метод push()
С помощью метода push() можно добавить в js -массив один или несколько элементов. Push() принимает неограниченное количество параметров, все они будут добавлены в конец массива.
var myArray = [ "Кейт", "Сут"]; myArray.push("Джулиет"); // Добавляет в конец массива элемент "Джулиет" myArray.push("Либби", "Шеннон");// Добавляет в конец массива элементы "Либби" и "Шеннон" console.log(myaArray); // Prints ["Кейт", "Сун", " Джулиет ", "Либби", "Шеннон"]
Метод unshift()
Метод unshift() работает также как и push() , только добавляет элементы в начало массива.
var myArray = [ "Кейт", "Сун"]; myArray.unshift("Джулиет"); // Добавляет в начало массива элемент "Джулиет" myArray.unshift("Либби", "Шеннон"); // Добавляет в начало массива элементы "Либби" и "Шеннон" console.log(myArray); // Выводит ["Либби", "Шеннон", "Джулиет", "Кейт", "Сун"]
Удаление элементов массива
Методы pop() и shift()
Методы pop() и shift() удаляют последний и первый элемент массива, соответственно:
var myArray = ["Джек", "Сойер", "Джон", "Дезмонд", "Кейт"]; myArray.pop(); // Удаляет элемент "Кейт" myArray.shift(); // Удаляет элемент "Джек" console.log(myArray); // Выводит ["Сойер", "Джон", "Дезмонд"]
Метод splice()
С помощью метода splice() можно удалять или добавлять элементы в массив, при этом точно указывая индекс элементов.
В следующем примере метод splice() добавляет два элемента, начиная с индекса 2 (то есть с третьего элемента ):
var fruitArray = ["яблоко", "персик", "апельсин", "лимон", "лайм", "вишня"]; fruitArray.splice(2, 0, "дыня", "банан"); console.log(fruitArray); // Выводит ["яблоко", "персик", "дыня", "банан", "апельсин", "лимон", "лайм", "вишня"]
Первый параметр метода splice() - индекс. Он указывает, на какой позиции нужно добавить/удалить элементы. В нашем примере мы выбрали индекс 2 (со значением «апельсин» ).
Второй параметр - количество элементов, которые требуется удалить. Мы указали значение 0, поэтому ничего не удалится.
Следующие параметры - необязательные. Они добавляют в массив новые значения. В нашем случае нужно добавить «дыню» и «банан», начиная с индекса 2.
