Всі способи перебору масиву в JavaScript. JQuery - Перебір масиву, об'єкта і елементів Видалення елемента за індексом. splice ()

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

Parameters

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)

Converting a for loop to forEach

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 "(! LANG: 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

Specifications

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

Визначення та застосування

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

Звертаю Вашу увагу, що функція зворотного виклику, передана в якості параметра методу forEach ()НЕ буде викликана для віддалених, або пропущених елементів масиву.

Діапазон елементів, оброблюваних за допомогою методу forEach ()встановлюється перед першимвикликом функції зворотного виклику. Якщо елементи були додані до масиву після її виклику, то на таких елементах функція викликана не буде.

Якщо значення існуючих елементів масиву змінюються в момент виконання, то в якості переданого значення функції буде значення в той момент часу, коли метод forEach ()відвідує їх. Якщо елементи видаляються до їх відвідування, то такі елементи відвідані не будуть. Якщо елементи, які вже відвідані, видаляються під час проходу по масиву, то більш пізні елементи будуть пропущені.

підтримка браузерами

JavaScript синтаксис:

версія JavaScript

значення параметрів

приклад використання

У наступному прикладі ми розглянемо як отримати суму всіх елементів масиву з використанням JavaScriptметоду forEach ():

У наступному прикладі ми розглянемо використання другогоаргументу методу forEach (), Який вказує на об'єкт, на який ми можемо посилатися з використанням ключового слова this всередині функції зворотного виклику:

Не так давно мені треба було на JavaScript створити асоціативний масив. Дивним чином, він мені раніше ніколи не був потрібен в JavaScript. Я поліз шукати в Інтернет, як його зробити. І був дуже здивований, що величезна кількість людей пишуть, що це неможливо, в JavaScriptйого немає. Благо мій багаторічний досвід підказував мені, що вони несуть марення. Тому, врешті-решт, я дізнався, як створити асоціативний масив в JavaScript, Про що і розповім в даній статті.

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

У цій статті ми розглянули створення асоціативних масивів, Їх зміна, а також повний перебір через цикл for. Особисто я використовував асоціативні масиви в JavaScriptлише одного разу, але знати про таку можливість потрібно обов'язково.

Останнє оновлення: 26.03.2018

Об'єкт Array представляє масив і надає ряд властивостей і методів, за допомогою яких ми можемо управляти масивом.

ініціалізація масиву

Можна створити порожній масив, використовуючи квадратні дужки або конструктор Array:

Var users = new Array (); var people =; console.log (users); // Array console.log (people); // Array

Можна відразу ж форматувати масив деякою кількістю елементів:

Var users = new Array ( "Tom", "Bill", "Alice"); var people = [ "Sam", "John", "Kate"]; console.log (users); // [ "Tom", "Bill", "Alice"] console.log (people); // [ "Sam", "John", "Kate"]

Можна визначити масив і по ходу визначати в нього нові елементи:

Var users = new Array (); users = "Tom"; users = "Kate"; console.log (users); // "Tom" console.log (users); // undefined

При цьому не важливо, що за замовчуванням масив створюється з нульовою довжиною. За допомогою індексів ми можемо підставити на конкретний індекс в масиві той чи інший елемент.

length

Щоб дізнатися довжину масиву, використовується властивість length:

Var fruit = new Array (); fruit = "яблука"; fruit = "груші"; fruit = "сливи"; document.write ( "У масиві fruit" + fruit.length + "елемента:
"); For (var i = 0; i< fruit.length; i++) document.write(fruit[i] + "
");

За фактом довжиною масиву буде індекс останнього елемента з додаванням одиниці. наприклад:

Var users = new Array (); // в масиві 0 елементів users = "Tom"; users = "Kate"; users = "Sam"; for (var i = 0; i

Висновок браузера:

Tom Kate undefined undefined Sam

Незважаючи на те, що для індексів 2 і 3 ми не додавали елементів, але довжиною масиву в даному випадку буде число 5. Просто елементи з індексами 2 і 3 будуть мати значення undefined.

Копіювання масиву. slice ()

Копіювання масиву може бути поверхневим або неглибоким (shallow copy) і глибоким (deep copy).

При неглибокому копіюванні досить привласнити змінної значення іншої змінної, яка зберігає масив:

Var users = [ "Tom", "Sam", "Bill"]; console.log (users); // [ "Tom", "Sam", "Bill"] var people = users; // неглибоке копіювання people = "Mike"; // змінюємо другий елемент console.log (users); // [ "Tom", "Mike", "Bill"]

В даному випадку змінна people після копіювання буде вказувати на той же масив, що і змінна users. Тому при зміні елементів в people, зміняться елементи і в users, так як фактично це один і той же масив.

Така поведінка не завжди є бажаним. Наприклад, ми хочемо, щоб після копіювання змінні вказували на окремі масиви. І в цьому випадку можна використовувати глибоке копіювання за допомогою методу slice ():

Var users = [ "Tom", "Sam", "Bill"]; console.log (users); // [ "Tom", "Sam", "Bill"] var people = users.slice (); // глибоке копіювання people = "Mike"; // змінюємо другий елемент console.log (users); // [ "Tom", "Sam", "Bill"] console.log (people); // [ "Tom", "Mike", "Bill"]

В даному випадку після копіювання змінні будуть вказувати на різні масиви, і ми зможемо змінювати їх окремо один від одного.

Також метод slice () дозволяє скопіювати частину масиву:

Var users = [ "Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice (1, 4); console.log (people); // [ "Sam", "Bill", "Alice"]

У метод slice () передається початковий і кінцевий індекси, які використовуються для вибірки значень з масиву. Тобто в даному випадку вибірка в новий масив йде починаючи з 1 індексу по індекс 4 не вмикаючи. І оскільки індексація масивів починається з нуля, то в новому масиві виявляться другий, третій і четвертий елемент.

push ()

Метод push () додає елемент в кінець масиву:

Var fruit =; fruit.push ( "яблука"); fruit.push ( "груші"); fruit.push ( "сливи"); fruit.push ( "вишня", "абрикос
"); Document.write (fruit); // яблука, груші, сливи, вишня, абрикос

pop ()

Метод pop () видаляє останній елемент з масиву:

Var fruit = [ "яблука", "груші", "сливи"]; var lastFruit = fruit.pop (); // витягаємо з масиву останній елемент document.write (lastFruit + "
"); Document.write (" У масиві fruit "+ fruit.length +" елемента:
"); For (var i = 0; i ");

Висновок браузера:

Зливи У масиві fruit 2 елементи: яблука груші

shift ()

Метод shift () витягує і видаляє перший елемент з масиву:

Var fruit = [ "яблука", "груші", "сливи"]; var firstFruit = fruit.shift (); document.write (firstFruit + "
"); Document.write (" У масиві fruit "+ fruit.length +" елемента:
"); For (var i = 0; i ");

Висновок браузера:

Яблука У масиві fruit 2 елементи: груші сливи

unshift ()

Метод unshift () додає новий елемент в початок масиву:

Var fruit = [ "яблука", "груші", "сливи"]; fruit.unshift ( "абрикоси"); document.write (fruit);

Висновок браузера:

Абрикоси, яблука, груші, сливи

Видалення елемента за індексом. splice ()

Метод splice () видаляє елементи з певного індексу. Наприклад, видалення елементів з третього індексу:

Var users = [ "Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (3); console.log (deleted); // [ "Alice", "Kate"] console.log (users); // [ "Tom", "Sam", "Bill"]

Метод slice повертає вилучені елементи.

В даному випадку видалення йде з початку масиву. Якщо передати негативний індекс, то видалення буде проводитися з кінця масиву. Наприклад, видалимо останній елемент:

Var users = [ "Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (-1); console.log (deleted); // [ "Kate"] console.log (users); // [ "Tom", "Sam", "Bill", "Alice"]

Додаткова версія методу дозволяє задати кінцевий індекс для видалення. Наприклад, видалимо з першого по третій індекс:

Var users = [ "Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (1,3); console.log (deleted); // [ "Sam", "Bill", "Alice"] console.log (users); // [ "Tom", "Kate"]

Ще одна версія методу splice дозволяє вставити замість видаляються елементів нові елементи:

Var users = [ "Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (1,3, "Ann", "Bob"); console.log (deleted); // [ "Sam", "Bill", "Alice"] console.log (users); // [ "Tom", "Ann", "Bob", "Kate"]

В даному випадку видаляємо три елементи з 1-го по 3-й індекси і замість них вставляємо два елементи.

concat ()

Метод concat () служить для об'єднання масивів:

Var fruit = [ "яблука", "груші", "сливи"]; var vegetables = [ "помідори", "огірки", "картопля"]; var products = fruit.concat (vegetables); for (var i = 0; i< products.length; i++) document.write(products[i] + "
");

При цьому необов'язково об'єднувати тільки однотипні масиви. Можна і різнотипні:

Var fruit = [ "яблука", "груші", "сливи"]; var prices =; var products = fruit.concat (prices);

join ()

Метод join () об'єднує всі елементи масиву в один рядок:

Var fruit = [ "яблука", "груші", "сливи", "абрикоси", "персики"]; var fruitString = fruit.join ( ","); document.write (fruitString);

У метод join () передається роздільник між елементами масиву. В даному випадку в якості роздільника буде використовуватися кома і пробіл ( ",").

sort ()

Метод sort () сортує масив по зростанню:

Var fruit = [ "яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.sort (); for (var i = 0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок в браузері:

Абрикоси груші персики сливи яблука

reverse ()

Метод reverse () перевертає масив задом наперед:

Var fruit = [ "яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.reverse (); for (var i = 0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок в браузері:

Персики абрикоси сливи груші яблука

У поєднанні з методом sort () можна впорядкувати масив по спадаючій:

Var fruit = [ "яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.sort (). reverse (); for (var i = 0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок в браузері:

Яблука сливи персики груші абрикоси

Пошук індексу елемента

Методи indexOf () і lastIndexOf () повертають індекс першого і останнього включити його у масиві. наприклад:

Var fruit = [ "яблука", "груші", "сливи", "яблука", "груші"]; var firstIndex = fruit.indexOf ( "яблука"); var lastIndex = fruit.lastIndexOf ( "яблука"); var otherIndex = fruit.indexOf ( "вишні"); document.write (firstIndex); // 0 document.write (lastIndex); // 3 document.write (otherIndex); // -1

firstIndex має значення 0, так як його запуск стоки "яблука" в масиві доводиться на індекс 0, а останнім на індекс 3.

Якщо ж елемент відсутній в масиві, то в цьому випадку методи indexOf () і lastIndexOf () повертають значення -1.

every ()

Метод every () перевіряє, чи всі елементи відповідають певній умові:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value> 0) (result = true;) return result;); var passed = numbers.every (condition); document.write (passed); // false

У метод every () як параметр передається функція, що представляє умова. Ця функція приймає три параметри:

Function condition (value, index, array) ()

Параметр value являє поточний перебирати елемент масиву, параметр index представляє індекс цього елемента, а параметр array передає посилання на масив.

У цій функції ми можемо перевірити передане значення елемента на відповідність якомусь умові. Наприклад, в даному прикладі ми перевіряємо кожен елемент масиву, більше він нуля. Якщо більше, то повертаємо значення true, то є елемент відповідає умові. Якщо менше, то повертаємо false - елемент не відповідає умові.

У підсумку, коли відбувається виклик методу numbers.every (condition) він перебирає всі елементи масиву numbers і по черзі передає їх у функцію condition. Якщо ця функція повертає значення true для всіх елементів, то і метод every () повертає true. Якщо хоча б один елемент не відповідає умові, то метод every () повертає значення false.

some ()

Метод some () схожий на метод every (), тільки він перевіряє, чи відповідає хоча б один елемент умові. І в цьому випадку метод some () повертає true. Якщо елементів, відповідних умові, в масиві немає, то повертається значення false:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value === 8) (result = true;) return result;); var passed = numbers.some (condition); // true

filter ()

Метод filter (), як some () і every (), приймає функцію умови. Але при цьому повертає масив тих елементів, які відповідають цій умові:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value> 0) (result = true;) return result;); var filteredNumbers = numbers.filter (condition); for (var i = 0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

Висновок в браузері:

1 8 25 42

forEach () і map ()

Методи forEach () і map () здійснюють перебір елементів і виконують з ними певний операції. Наприклад, для обчислення квадратів чисел в масиві можна використовувати наступний код:

Var numbers = [1, 2, 3, 4, 5, 6]; for (var i = 0; i "); }

Але за допомогою методу forEach () можна спростити цю конструкцію:

Var numbers = [1, 2, 3, 4, 5, 6]; function square (value, index, array) (var result = value * value; document.write ( "Квадрат числа" + value + "дорівнює" + result + "
");); Numbers.forEach (square);

Метод forEach () в якості параметра приймає все ту ж функцію, в яку при переборі елементів передається поточний перебирати елемент і над ним виконуються операції.

Метод map () схожий на метод forEach, він також в якості параметра приймає функцію, за допомогою якої виконуються операції над перебирати елементами масиву, але при цьому метод map () повертає новий масив з результатами операцій над елементами масиву.

Наприклад, можна застосувати метод map до обчислення квадратів чисел масиву:

Var numbers = [1, 2, 3, 4, 5, 6]; function square (value, index, array) (return result = value * value;); var squareArray = numbers.map (square); document.write (squareArray);

Функція, яка передається в метод map () отримує поточний перебирати елемент, виконує над ним операції і повертає деяке значення. Це значення потім потрапляє в результуючий масив squareArray

• I. Перебір справжніх масивів
  1. Метод forEach і родинні методи
  2. цикл for
  3. Правильне використання циклу for ... in
  4. Цикл for ... of (неявне використання ітератора)
  5. Явне використання ітератора
• II. Перебір массівоподобних об'єктів
  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 entry; while (! (entry = a.next ()). done) (console.log (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);

3. Зауваження по об'єктах середовища виконання

Якщо ви застосовуєте методи Array.prototype до об'єктів середовища виконання (таких як DOM колекції), то ви повинні мати на увазі, що правильна робота цих методів не гарантована у всіх середовищах виконання (в т.ч. в браузерах). Це залежить від поведінки конкретного об'єкта в конкретному середовищі виконання, якщо точніше, від того, як в цьому об'єкті реалізована абстрактна операція HasProperty. Проблема в тому, що сам стандарт ES5 допускає можливість неправильної поведінки об'єкта по відношенню до цієї операції (див. §8.6.2).

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