JavaScript - Массивы. JavaScript-массив и его создание. Все о массивах JavaScript
Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о 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
Учимся индексировать массивы в 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.
Я описал лишь часть методов для работы с массивами.
Здесь мы поговорим о добавлении, удалении элементов массива. О переворачивании и сортировке массива, а так же о нарезке, замене и комбинировании массивов.
Добавление элементов в массив.
Вы можете использовать свойство length для добавления новых элементов в массив:
Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]
Это сработает, т.к. элементы массива нумеруются с нуля, а length на единицу больше. Length всегда эквивалентно index + 1 , поэтому очень легко добавить новый элемент в конец массива. Странно, но вы можете добавить элемент на позицию, которая намного больше, чем длина самого массива:
Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100
Как показано в комментариях, будет добавлено 95 пустых слотов и элемент «Lindsey Buckingham» в конец массива. После этого мы получим длину 100. Еще один способ добавить новый элемент в массив — использовать метод push():
Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]
Метод push() всегда возвращает новую длину массива (в нашем случае 5). Добавить элемент можно с помощью splice():
Var myArray = ["acorn", "beech", "mongongo", "macadamia"]; myArray.splice(2, 0, "cashew"); // adds "cashew" into index 2 console.log(myArray); // ["acorn", "beech", "cashew", "mongongo", "macadamia"]
Когда второй аргумент 0, то это означает, что ни один элемент не будет удален, а поэтому любые последующие аргументы будут добавлены в массив в позицию, указанную в первом аргументе.
Удаление элементов из массива
Удалить элемент немножко сложнее, чем его добавить. Чтобы удалить элемент из конца массива, можно использовать pop():
Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console.log(myArray); // ["7-up", "Sprite", "Ginger Ale"]
Метод pop() всегда удаляет последний элемент в массиве и возвращает его.
Вы так же можете использовать splice() метод:
Var myArray = ["cassava", "nutmeg", "lupin", "rhubarb"]; myArray.splice(2, 1); // удалить элемент с индексом 2 console.log(myArray); // ["cassava", "nutmeg", "rhubarb"]
В отличии от метода splice(), который используется для добавления элементов, здесь вторым аргументом идет 1, которая говорит, что мы хотим удалить элемент с индексом 2 (или 3-ий по счету). В данном случае удалился элемент «lupin».
Вы можете удалить элемент массива используя оператор delete:
Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 delete myArray; // удалить Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", undefined × 1, "Jeefo", "Michelangelo"]
Первое важное замечание: delete() не изменяет длину массива после удаления элемента (даже, если это был последний элемент в массиве). Второе: delete() изменяет значение удаляемого элемента на undefined, поэтому при обращении myArray = undefined .
Хороший способ удалить элемент из массива — использовать John Resig’s Array.remove . Ниже пример использования, взятый с его страницы:
// Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);
Возможно вы захотите посмотреть решение by Viral Patel , одну из функций в Underscore.js , или jQuery’s grep() .
Дополнительно, в JavaScript есть метод shift(), который удаляет первый элемент в массиве и возвращает его значение. Посмотрим код:
Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer console.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]
С помощью метода shift() мы удалили элемент, но сохранили его значение в нашей переменной firstItem. Длина массива изменилась с 4 на 3.
Этот метод может быть полезен вместе с методом push(). Используя их вместе мы можем эффективно выстраивать очередь элементов в массиве. Мы сохраняем длину массива удаляя элемент с начала и добавляя новый в конец.
Наоборот, мы можем использовать метод unshift() для добавления элемент в начало массива:
Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]
Используя метод unshift() с методом pop(), вы можете создавать очереди в обратную сторону, добавляя элементы в начало и удаляя с конца массива.
Переворачивание и сортировка элементов массива.
Чтобы перевернуть элементы в массиве, мы можем использовать reverse():
Var myArray = ["countdown", "final", "the"]; console.log(myArray); // ["countdown", "final", "the"] myArray = myArray.reverse(); console.log(myArray); // ["the", "final", "countdown"]
Сортировать элементы массива в алфавитном порядке возможно с помощью метода sort():
Var myArray = ["xylophones", "zebras", "juggernauts", "avocados"]; console.log(myArray); // ["xylophones", "zebras", "juggernauts", "avocados"] myArray = myArray.sort(); console.log(myArray); // ["avocados", "juggernauts", "xylophones", "zebras"]
Но это не будет работать с числами.
Var myArray = ; console.log(myArray); // myArray = myArray.sort(); console.log(myArray); //
Если нужно отсортировать числа, то можно использовать следующий код:
Function compareNumbers(a, b) { return a - b; } var myArray = ; console.log(myArray); // myArray = myArray.sort(compareNumbers); console.log(myArray); //
Как показано выше, с помощью простой функции, вставленной в sort(), массив, содержащий числа, будет отсортирован правильно.
Объединение массивов.
Мы можете объединить 2 или больше массивов и получить 1 массив, который содержит элементы соединенных массивов. Для этого используем метод concat():
Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(myArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]
Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]
Разделение массива.
Мы можете создать новый массив, содержащий 1 или более элементов из существующего массива, используя функцию slice():
Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Apples", "Oranges"]
Метод slice() принимает 1 или 2 аргумента. Если передан 1 аргумент (индекс), то новый массив создается из всех элементов старого, начиная с данного индекса. Если передано 2 аргумента, то новый массив создается из элементов, начиная с первого аргумента и до элемента с индексом, переданным во втором параметре, не включая последний. Чтобы было понятней, посмотрим код ниже:
Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["Vocals", "Bass", "Guitar", "Drums"]
Замена элементов в массиве.
Мы используем splice() для удаления элементов из массива, но мы так же можем заменить элемент в массиве на новые элементы:
Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // заменить 1 элемент с индексом 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]
Метод splice() всегда возвращает массив, содержащий элементы, которые были удалены. В строчке 2 будет возвращен 1 элемент «Brian Bell».
Заключение
В данных статьях были описаны методы работы с массивами в JavaScript. Некоторые дополнительные элементы можно посмотреть на MDN , которые я не включил в данный пост. Они работают только в IE9+, поэтому могут оказаться бесполезными.
Есть что добавить? Или знаете какую-нибудь интересную библиотеку, которая поможет управлять массивами? Комментируйте, пожалуйста!
- Перевод
- 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
: Как было отмечено в комментариях
- Перевод
В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях - это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for , который выглядит примерно так: for (var i=0; i < value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.
Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for ?
На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of , и о методах includes() , some() , every() , filter() , map() и reduce() . Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.
Надо отметить, что обзоры современных подходов к разработке на JS обычно включают в себя примеры, подготовленные с использованием стрелочных функций. Возможно, вы не особенно часто пользуетесь ими - может быть из-за того, что вам они не нравятся, может быть потому, что не хотите тратить слишком много времени на изучение чего-то нового, а, возможно, они просто вам не подходят. Поэтому здесь, в большинстве ситуаций, будут показаны два варианта выполнения одних и тех же действий: с использованием обычных функций (ES5) и с применением стрелочных функций (ES6). Для тех, у кого нет опыта работа со стрелочными функциями, отметим, что стрелочные функции не являются эквивалентами объявлений функций и функциональных выражений. Не стоит заменять одно на другое. В частности, это связано с тем, что в обычных и стрелочных функциях ключевое слово this ведёт себя по-разному.
1. Оператор расширения
Оператор расширения (spread operator) позволяет «раскрывать» массивы, подставляя в то место, где использован этот оператор, вместо массивов, их элементы. Похожий подход предложен и для литералов объектов.▍Сильные стороны оператора расширения
- Это - простой и быстрый способ «вытащить» из массива его отдельные элементы.
- Этот оператор подходит для работы с литералами массивов и объектов.
- Это - быстрый и интуитивно понятный метод работы с аргументами функций.
- Оператор расширения не занимает много места в коде - он выглядит как три точки (…).
▍Пример
Предположим, перед вами стоит задача вывести список ваших любимых угощений, не используя при этом цикл. С помощью оператора расширения это делается так:
2. Цикл for…of
Оператор for…of предназначен для обхода итерируемых объектов. Он даёт доступ к отдельным элементам таких объектов (в частности - к элементам массивов), что, например, позволяет их модифицировать. Его можно считать заменой обычному циклу for .▍Сильные стороны цикла for…of
- Это - простой способ для добавления или обновления элементов коллекций.
- Цикл for…of позволяет выполнять различные вычисления с использованием элементов (суммирование, умножение, и так далее).
- Им удобно пользоваться при необходимости выполнения проверки каких-либо условий.
- Его использование ведёт к написанию более чистого и читабельного кода.
▍Пример
Предположим, у вас имеется структура данных, описывающая содержимое ящика с инструментами и вам надо показать эти инструменты. Вот как это сделать с помощью цикла for...of:
3. Метод includes()
Метод includes() используется для проверки наличия в коллекции некоего элемента, в частности, например, определённой строки в массиве, содержащем строки. Этот метод возвращает true или false в зависимости от результатов проверки. Пользуясь им, стоит учитывать, что он чувствителен к регистру символов. Если, например, в коллекции есть строковой элемент SCHOOL , а проверка на его наличие с помощью includes() выполняется по строке school , метод вернёт false .▍Сильные стороны метода includes()
- Метод includes() полезен в деле создания простых механизмов поиска данных.
- Он даёт разработчику интуитивно понятный способ определения наличия неких данных в массиве.
- Его удобно использовать в условных выражениях для модификации, фильтрации элементов, и для выполнения других операций.
- Его применение ведёт к улучшению читабельности кода.
▍Пример
Предположим, у вас имеется гараж, представленный массивом со списком автомобилей, и вы не знаете, есть в этом гараже некий автомобиль, или нет. Для того чтобы решить эту проблему, надо написать код, который позволяет проверять наличие автомобиля в гараже. Воспользуемся методом includes() :
4. Метод some()
Метод some() позволяет проверить, существуют ли некоторые из искомых элементов в массиве. Он, по результатам проверки, возвращает true или false . Он похож на вышерассмотренный метод includes() , за исключением того, что его аргументом является функция, а не, например, обычная строка.▍Сильные стороны метода some()
- Метод some() позволяет проверить, имеется ли в массиве хотя бы один из интересующих нас элементов.
- Он выполняет проверку условия с использованием переданной ему функции.
- Этим методом удобно пользоваться.
▍Пример
Предположим, вы - владелец клуба, и в общем-то, вас не интересует - кто именно в ваш клуб приходит. Однако, некоторым посетителям вход в клуб закрыт, так как они склонны к излишнему потреблению спиртных напитков, по крайней мере, в том случае, если они оказываются в вашем заведении сами, и с ними нет никого, кто может за ними присмотреть. В данном случае группе посетителей можно войти в клуб только при условии, что хотя бы одному из них не меньше 18-ти лет. Для того чтобы автоматизировать проверку подобного рода, воспользуемся методом some() . Ниже его применение продемонстрировано в двух вариантах.ES5
ES6
5. Метод every()
Метод every() обходит массив и проверяет каждый его элемент на соответствие некоему условию, возвращая true в том случае, если все элементы массива соответствуют условию, и false в противном случае. Можно заметить, что он похож на метод some() .▍Сильные стороны метода every()
- Метод every() позволяет проверить соответствие условию всех элементов массива.
- Условия можно задавать с использованием функций.
- Он способствует применению декларативного подхода при программировании.
▍Пример
Вернёмся к предыдущему примеру. Там вы пропускали в клуб посетителей, не достигших 18 лет, но кто-то написал заявление в полицию, после чего вы попали в неприятную ситуацию. После того, как всё удалось уладить, вы решили, что вам всё это ни к чему и ужесточили правила посещения клуба. Теперь группа посетителей может пройти в клуб только в том случае, если возраст каждого члена группы не меньше 18 лет. Как и в прошлый раз, рассмотрим решение задачи в двух вариантах, но на этот раз будем пользоваться методом every() .ES5
ES6
6. Метод filter()
Метод filter() позволяет создать, на основе некоего массива, новый массив, содержащий только те элементы исходного массива, которые удовлетворяют заданному условию.▍Сильные стороны метода filter()
- Метод filter() позволяет избежать модификации исходного массива.
- Он позволяет избавиться от ненужных элементов.
- Он улучшает читабельность кода.
▍Пример
Предположим, вам надо отобрать из списка цен только те, которые больше или равны 30. Воспользуемся для решения этой задачи методом filter() .ES5
ES6
7. Метод map()
Метод map() похож на метод filter() тем, что он тоже возвращает новый массив. Однако он применяется для модификации элементов исходного массива.▍Сильные стороны метода map()
- Метод map() позволяет избежать необходимости изменения элементов исходного массива.
- С его помощью удобно модифицировать элементы массивов.
- Он улучшает читаемость кода.
▍Пример
Предположим, у вас имеется список товаров с ценами. Вашему менеджеру нужен новый список товаров, цены которых снижены на 25%. Воспользуемся для решения этой задачи методом map() .ES5
ES6
8. Метод reduce()
Метод reduce() , в его простейшем виде, позволяет суммировать элементы числовых массивов. Другими словами, он сводит массив к единственному значению. Это позволяет использовать его для выполнения различных вычислений.▍Сильные стороны метода reduce()
- С помощью метода reduce() можно посчитать сумму или среднее значение элементов массива.
- Этот метод ускоряет и упрощает проведение вычислений.
▍Пример
Предположим, вам надо посчитать ваши расходы за неделю, которые хранятся в массиве. Решим эту задачу с помощью метода reduce() .ES5
ES6
