Foreach js для массивов и коллекций. Как создать ассоциативный массив в JavaScript. Явное использование итератора


Определение и применение

JavaScript метод forEach() позволяет выполнить переданную функцию один раз для каждого элемента в массиве в порядке возрастания индекса.

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

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

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

Поддержка браузерами

Метод
Opera
IExplorer
Edge
forEach() Да Да Да Да 9.0 Да

JavaScript синтаксис:

// только с callback функцией array .forEach(function (currentValue , index , arr )); // с использованием объекта, на который может ссылаться ключевое слово this array .forEach(function (currentValue , index , arr ), thisValue );

Версия JavaScript

ECMAScript 5.1 (Реализовано в JavaScript 1.6)

Значения параметров

Параметр Описание
function Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве. Функция принимает следующие параметры:
  • currentValue - значение текущего элемента
  • index - индекс массива текущего элемента.
  • arr - массив, к которому принадлежит текущий элемент (по которому происходит проход).

Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError . Обязательный параметр.

thisValue Объект, на который может ссылаться ключевое слово this внутри функции обратного вызова. Если параметр thisValue не используется, то в качестве значения this будет использоваться undefined (в конечном счете this будет зависеть от обычных правил контекста выполнения функции). Необязательный параметр.

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

В следующем примере мы рассмотрим как получить сумму всех элементов массива с использованием JavaScript метода forEach() :

var array = ; var sum = 0 ; // инициализируем переменную, содержащую числовое значение array .forEach(// перебираем все элементы массива array function sumNumber(currentValue ) { sum += currentValue ; } ); console .log(sum ); // выводим значение переменной sum равное 50

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

var numbers = ; // инициализируем переменную, содержащую массив числовых значений var squared = ; // инициализируем переменную, содержащую пустой массив var myObject = { // инициализируем переменную, содержащую объект square: function (currentValue ) { // метод объекта, который принимает значение return currentValue * currentValue ; // и возвращает его возведенным в квадрат } } ; numbers .forEach(// перебираем все элементы массива numbers function (currentValue ) { squared .push(this .square(currentValue )); // добавляем в массив squared возвращаемое значение метода square объекта myObject } , myObject // объект, на который мы ссылаемся с использованием ключевого слова this ); console .log(squared ); // выводим значение переменной squared равное ;

Статья, в которой рассмотрим на примерах использование функции и метода библиотеки jQuery each .

В библиотеке jQuery имеются 2 разные сущности с названием each .

Первая (jQuery.each ) - это универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта.

Вторая (each ) - это метод, который применяется к набору элементов для организации цикла по ним.

Цикл each (jQuery.each). Примеры использования

Синтаксис функции each :

// array или object - массив или объект, элементы или свойства которого необходимо перебрать // callback - функция, которая будет выполнена для каждого элемента массива или свойства объекта $.each(array или object,callback);

Работу с функцией each разберём на примерах.

Пример №1. В нём выполним переберор всех элементов массива (array).

// массив, состоящий из 3 строк var arr = ["Автомобиль","Грузовик","Автобус"]; // переберём массив arr $.each(arr,function(index,value){ // действия, которые будут выполняться для каждого элемента массива // index - это текущий индекс элемента массива (число) // value - это значение текущего элемента массива //выведем индекс и значение массива в консоль console.log("Индекс: " + index + "; Значение: " + value); }); /* Результат (в консоли): Индекс: 0; Значение: Автомобиль Индекс: 1; Значение: Грузовик Индекс: 2; Значение: Автобус */

В вышеприведённом коде функция each используется для перебора массива. Функция имеет 2 обязательных параметра . Первый параметр - это сущность (массив или объект), элементы (свойства) которой необходимо перебрать. В данном случае - это массив arr . Второй параметр - это функция обратного вызова, которая будет выполнена для каждого элемента (в данном случае) массива. Она имеет 2 параметра , которые доступны внутри неё посредством соответствующих переменных. Первый параметр - это порядковый номер элемента (отсчёт выполняется с 0). Второй параметр - это значение текущего элемента массива.

Пример №2. В этом примере осуществим перебор всех свойств объекта.


// объект smartphone, имеющий 5 свойств var smartphone = { "name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440", "os" : "Android 6.0 (Marshmallow)" }; // переберём объект smartphone $.each(smartphone, function(key, value) { // действия, которые будут выполняться для каждого свойства объекта // key - текущее имя свойства массива // value - значение текущего свойства объекта // выведем имя свойства и его значение в консоль console.log("Свойство: " +key + "; Значение: " + value); }); /* Результат (в консоли): Свойство: name; Значение: LG G5 se Свойство: year; Значение: 2016 Свойство: screen-size; Значение: 5.3 Свойство: screen-resolution; Значение: 2560 x 1440 Свойство: os; Значение: Android 6.0 (Marshmallow) */

Функция each может использоваться для перебора JavaScript объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.

Пример №3. В нём осуществим перебор более сложной структуры (рассмотрим, как использовать вложенные each ).

// объект, состоящий из 2 свойств. Каждое свойство этого объект имеет в качестве значения массив, элементами которого являются тоже объекты var articles = { "Bootstrap": [ {"id":"1", "title":"Введение"}, {"id":"2", "title":"Как установить"}, {"id":"3", "title":"Сетка"} ], "JavaScript": [ {"id":"4", "title":"Основы"}, {"id":"5", "title":"Выборка элементов"} ] }; $.each(articles,function(key,data) { console.log("Раздел: " + key); $.each(data, function(index,value) { console.log("Статья: id = " + value["id"] + "; Название = "+ value["title"]); }); }); /* Результат: Раздел: Bootstrap Статья: id = 1; Название = Введение Статья: id = 2; Название = Как установить Статья: id = 3; Название = Сетка Раздел: JavaScript Статья: id = 4; Название = Основы Статья: id = 5; Название = Выборка элементов */

Как прервать each (выйти из цикла)?

Прерывание (break) цикла each осуществляется с помощью оператора return , который должен возвращать значение false .

Например, прервём выполнение цикла each после того как найдём в массиве arr число 7:

// массив, состоящий из 5 чисел var arr = ; // число, которое необходимо найти var find = 7; // переберём массив arr $.each(arr, function (index, value) { // если необходимое число найдено, то.. if (value === find) { // вывести его в консоль console.log("Ура! Число " + find + " найдено! Данное число имеет индекс: " + index); // прервать выполнение цикла return false; } else { // иначе вывести в консоль текущее число console.log("Текущее число: " + value); } }); /* Результат (в консоли): Текущее число: 5 Текущее число: 4 Ура! Число 7 найдено! Данное число имеет индекс: 2 */

Как перейти к следующей итерации (each continue)?

В each прерывание выполнения текущей итерации и переход к следующей осуществляется с помощью оператора return , который должен иметь значение отличное от false .

// массив, состоящий из чисел var arr = ; // массив, который должен содержать все элементы массива arr, кроме чётных чисел var newarr = ; // переберём массив arr $.each(arr, function (index, value) { // если элемент чётный, то пропустим его if (value % 2 === 0) { // прервём выполнение текущей итерации и перейдём к следующей return; } // добавить в массив newarr значение value newarr.push(value); }); console.log("Исходный массив (arr): " + arr.join()); console.log("Результирующий массив (newarr): " + newarr.join()); /* Результат (в консоли): Исходный массив (arr): 3,5,4,9,17,19,30,35,40 Результирующий массив (newarr): 3,5,9,17,19,35 */

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):


.each(function); // function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод.each на следующем примере (переберём элементы div):

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора $("div")). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента div). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) - DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово this , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута href для всех элементов а на странице:

$("a").each(function() { console.log($(this).attr("href")); });

$("a").each(function() { var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (link.indexOf("https://") == 0)) { console.log("href ссылки = " + link); } }); // Если на странице расположены следующие ссылки: // Яндекс // Как работает JavaScript? // Bootstrap // То в консоли увидим следующий результат: // https://www.yandex.ru/ // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс name (переберём все элементы одного класса).

Raspberry pi
single-board compute
Intel Galileo Gen2
19$
Pine A64 Plus

Например, разберём, как перебрать все элементы на странице.

Например, выведем значение всех элементов input на странице.

$("input").each(function() { console.log($(this).val()); });

Например, переберём все дочерние элементы, расположенные в ul с id="myList" (each children).

  • HTML
  • JavaScript

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each .

// выбираем элементы var myList = $("ul li"); // определяем количество элементом в выборке var total = myList.length; // осуществляем перебор выбранных элементов myList.each(function(index) { if (index === total - 1) { // это последний элемент в выборке } });

Не так давно мне потребовалось на JavaScript создать ассоциативный массив . Удивительным образом, он мне раньше никогда не был нужен в JavaScript . Я полез искать в Интернет, как его сделать. И был очень удивлён, что огромное количество людей пишут, что это невозможно, в JavaScript его нет. Благо мой многолетний опыт подсказывал мне, что они несут бред. Поэтому, в конце концов, я узнал, как создать ассоциативный массив в JavaScript , о чём и поведаю в данной статье.

Ниже написан код, в котором создаётся ассоциативный массив , добавляется потом ещё один элемент и, наконец, массив перебирается через цикл:

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

The forEach() method executes a provided function once for each array element.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

arr .forEach(callback(currentValue [, index [, array]]) [, thisArg ])

Parameters

callback Function to execute on each element. It accepts between one and three arguments: currentValue The current element being processed in the array. index Optional The index currentValue in the array. array Optional The array forEach() was called upon. thisArg Optional Value to use as this when executing callback .

Return value

Description

forEach() calls a provided callback function once for each element in an array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized. (For sparse arrays, .)

callback is invoked with three arguments:

  1. the value of the element
  2. the index of the element
  3. the Array object being traversed

If a thisArg parameter is provided to forEach() , it will be used as callback"s this value. The thisArg value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function .

The range of elements processed by forEach() is set before the first invocation of callback . Elements which are appended to the array after the call to forEach() begins will not be visited by callback . If existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time forEach() visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using shift()) during the iteration, later elements will be skipped. (See this example, below .)

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.

forEach() does not mutate the array on which it is called. (However, callback may do so)

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

Early termination may be accomplished with:

Array methods: every() , some() , find() , and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required.

Examples

No operation for uninitialized values (sparse arrays)

const arraySparse = let numCallbackRuns = 0 arraySparse.forEach(function(element){ console.log(element) numCallbackRuns++ }) console.log("numCallbackRuns: ", numCallbackRuns) // 1 // 3 // 7 // numCallbackRuns: 3 // comment: as you can see the missing value between 3 and 7 didn"t invoke callback function.

Converting a for loop to forEach

const items = ["item1", "item2", "item3"] const copy = // before for (let i = 0; i < items.length; i++) { copy.push(items[i]) } // after items.forEach(function(item){ copy.push(item) })

Printing the contents of an array

Note: In order to display the content of an array in the console, you can use console.table() , which prints a formatted version of the array.

The following example illustrates an alternative approach, using forEach() .

The following code logs a line for each element in an array:

Function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element) } // Notice that index 2 is skipped, since there is no item at // that position in the array... .forEach(logArrayElements) // logs: // a = 2 // a = 5 // a = 9

Using thisArg

The following (contrived) example updates an object"s properties from each entry in the array:

Function Counter() { this.sum = 0 this.count = 0 } Counter.prototype.add = function(array) { array.forEach(function(entry) { this.sum += entry ++this.count }, this) // ^---- Note } const obj = new Counter() obj.add() obj.count // 3 obj.sum // 16

Since the thisArg parameter (this) is provided to forEach() , it is passed to callback each time it"s invoked. The callback uses it as its this value.

An object copy function

The following code creates a copy of a given object.

There are different ways to create a copy of an object. The following is just one way and is presented to explain how Array.prototype.forEach() works by using ECMAScript 5 Object.* meta property functions.

Function copy(obj) { const copy = Object.create(Object.getPrototypeOf(obj)) const propNames = Object.getOwnPropertyNames(obj) propNames.forEach(function(name) { const desc = Object.getOwnPropertyDescriptor(obj, name) Object.defineProperty(copy, name, desc) }) return copy } const obj1 = { a: 1, b: 2 } const obj2 = copy(obj1) // obj2 looks like obj1 now

If the array is modified during iteration, other elements might be skipped.

The following example logs "one" , "two" , "four" .

When the entry containing the value "two" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.

forEach() does not make a copy of the array before iterating.

Let words = ["one", "two", "three", "four"] words.forEach(function(word) { console.log(word) if (word === "two") { words.shift() } }) // one // two // four

Flatten an array

The following example is only here for learning purpose. If you want to flatten an array using built-in methods you can use Array.prototype.flat() (which is expected to be part of ES2019, and is already implemented in some browsers).

/** * Flattens passed array in one dimensional array * * @params {array} arr * @returns {array} */ function flatten(arr) { const result = arr.forEach((i) => { if (Array.isArray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // Usage const problem = , 8, 9]] flatten(problem) //

Note on using Promises or async functions

let ratings = let sum = 0 let sumFunction = async function (a, b) { return a + b } ratings.forEach(async function(rating) { sum = await sumFunction(sum, rating) }) console.log(sum) // Expected output: 14 // Actual output: 0

Specifications

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
 Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of "Array.prototype.forEach" in that specification. 		Standard
ECMAScript 5.1 (ECMA-262)
The definition of "Array.prototype.forEach" in that specification. 		Standard Initial definition. Implemented in JavaScript 1.6.

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
forEach Chrome Full support 1 Edge Full support 12 Firefox Full support 1.5 IE Full support 9 Opera Full support Yes Safari Full support 3 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support 1 Samsung Internet Android Full support 1.0 nodejs Full support Yes
  • I. Перебор настоящих массивов
    1. Метод forEach и родственные методы
    2. Цикл for
    3. Правильное использование цикла for...in
    4. Цикл for...of (неявное использование итератора)
    5. Явное использование итератора
    1. Использование способов перебора настоящих массивов
    2. Преобразование в настоящий массив
    3. Замечание по объектам среды исполнения

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

На данный момент есть три способа перебора элементов настоящего массива:
  1. метод Array.prototype.forEach ;
  2. классический цикл for ;
  3. «правильно» построенный цикл for...in .
Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:
  1. цикл for...of (неявное использование итератора);
  2. явное использование итератора.

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); } }
В данном примере на каждой итерации цикла выполняется две проверки:

  1. то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
  2. то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .
Конечно, такие проверки отнимут лишнее время при выполнении цикла. Но в случае разреженного массива этот способ более эффективен, чем цикл for , поскольку в этом случае перебираются только те элементы, которые явно определены в массиве. Так, в примере выше будет выполнено всего 3 итерации (для индексов 0, 10 и 10000) - против 10001 в цикле for .

Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции:

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() - функция без аргументов, возвращающая объект с двумя свойствами:

  1. done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
  2. value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .
Многие встроенные объекты, в т.ч. настоящие массивы, имеют итераторы по умолчанию. Простейший способ применения итератора в настоящих массивах - использовать новую конструкцию for...of .

Пример использования 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 : Как было отмечено в комментариях rock и torbasow , в ES6 вместо Array.prototype.slice можно использовать более наглядный метод Array.from .

3. Замечание по объектам среды исполнения

Если вы применяете методы Array.prototype к объектам среды исполнения (таких как DOM коллекции), то вы должны иметь в виду, что правильная работа этих методов не гарантирована во всех средах исполнения (в т.ч. в браузерах). Это зависит от поведения конкретного объекта в конкретной среде исполнения, если точнее, от того, как в этом объекте реализована абстрактная операция HasProperty . Проблема в том, что сам стандарт ES5 допускает возможность неправильного поведения объекта по отношению к этой операции (см. §8.6.2).

Поэтому важно тестировать работу методов Array.prototype в каждой среде исполнения (браузере), в которой планируется использование вашего приложения.

Выбор редакции

@ 2022 mirovoyinstrument.ru - Обзор на самые популярные браузеры