Foreach js для масивів та колекцій. Як створити асоціативний масив у JavaScript. Явне використання ітератора

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

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

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

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

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

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

JavaScript синтаксис:

Версія JavaScript

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

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

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

))); console .log( // виводимо значення змінної sum рівне 50У наступному прикладі ми розглянемо використання forEach()другого аргументу методу, який вказує на об'єкт, який ми можемо посилатися з використанням

• ); console .log(
  1. // Виводимо значення змінної squared рівне;
  2. I. Перебір реальних масивів
  3. Метод forEach і споріднені методи
  4. Цикл for
  5. Правильне використання циклу for...in
• Цикл for...of (неявне використання ітератора)
  1. Явне використання ітератора
  2. ІІ. Перебір масивоподібних об'єктів
  3. Використання способів перебору справжніх масивів

Перетворення на справжній масив

Зауваження щодо об'єктів середовища виконання I. Перебір реальних масивівна

1. Наразі
2. є три способи перебору елементів цього масиву:
3. метод Array.prototype.forEach;

класичний цикл for;

1. «правильно» побудований цикл for...in.
2. Крім того, незабаром, з появою нового стандарту ECMAScript 6 (ES 6), очікується ще два способи:

цикл 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 і більше

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

Якщо вас турбують можливі витрати на виклик колбека для кожного елемента, не хвилюйтеся та прочитайте це.

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); )

ІІ. Перебір масивоподібних об'єктів

Крім справжніх масивів, JavaScript зустрічаються також масивоподібні об'єкти . Зі справжніми масивами їх ріднить те, що вони мають властивість length і властивості з іменами у вигляді чисел, що відповідають елементам масиву. Як приклади можна назвати DOM колекції NodeList і псевдомасив arguments, доступний всередині будь-якої функції/методу.

1. Використання способів перебору реальних масивів

Як мінімум більшість, якщо не всі способи перебору справжніх масивів можуть бути застосовані для перебору масивоподібних об'єктів.

Конструкції for і for...in можуть бути застосовані до масивоподібних об'єктів точно тим самим шляхом, що і до масивів.

Длякожного та інших методів 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 у кожному середовищі виконання (браузері), в якому планується використання вашої програми.

• Перетворення на справжній масив
  1. // Виводимо значення змінної squared рівне;
  2. I. Перебір реальних масивів
  3. Метод forEach і споріднені методи
  4. Цикл for
  5. Правильне використання циклу for...in
• 1. Явне використання ітератора
  2. ІІ. Перебір масивоподібних об'єктів
  3. Використання способів перебору справжніх масивів

Перетворення на справжній масив

1. Наразі
2. є три способи перебору елементів цього масиву:
3. метод Array.prototype.forEach;

1. «правильно» побудований цикл for...in.
2. Крім того, незабаром, з появою нового стандарту ECMAScript 6 (ES 6), очікується ще два способи:

цикл for...of (неявне використання ітератора);

1. Метод forEach і споріднені методи
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
У загальному випадку використання forEach потребує підключення бібліотеки емуляції es5-shim для браузерів, які не мають нативної підтримки цього методу. До них відносяться IE 8 і раніше версії, які до цих пір де-не-де ще використовуються.

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

Якщо вас турбують можливі витрати на виклик колбека для кожного елемента, не хвилюйтеся та прочитайте це.

ForEach призначений для перебору всіх елементів масиву, але крім нього ES5 пропонує ще кілька корисних методів для перебору всіх або деяких елементів плюс виконання при цьому будь-яких дій з ними:

• every - повертає true, якщо для кожного елемента масиву колбек повертає значення, що приводиться до true.
• some-повертає true, якщо хоча б для одного елемента масиву колбек повертає значення, що приводиться до true.
• filter - створює новий масив, що включає елементи вихідного масиву, для яких колбек повертає true .
• map - створює новий масив, що складається зі значень колбеком, що обертаються.
• reduce - зводить масив до єдиного значення, застосовуючи колбек по черзі до кожного елемента масиву, починаючи з першого (може бути корисним для обчислення суми елементів масиву та інших підсумкових функцій).
• reduceRight – працює аналогічно reduce, але перебирає елементи у зворотному порядку.

2. Цикл 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 може виявитися корисним, якщо тільки дотримуватися при цьому запобіжних заходів, як показано в прикладі нижче:

// 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 .

Щоб не писати такий громіздкий код перевірок щоразу, коли потрібно перебір масиву, можна оформити його у вигляді окремої функції:

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 (неявне використання ітератора)

Ітератор - це реалізований об'єктом протокол, який визначає стандартний спосіб отримання послідовності значень (кінцевою чи нескінченною).
Ітератор - це об'єкт, у якому визначено метод next() - функція без аргументів, що повертає об'єкт із двома властивостями:

1. done (boolean) - приймає значення true , якщо ітератор досяг кінця послідовності, що ітерується. В іншому випадку має значення false.
2. value - визначає значення, яке повертається ітератором. Можливо не визначено (відсутня), якщо властивість done має значення true .

Приклад використання for...of:

Var val; var a = ["a", "b", "c"]; for (val of a) (console.log(val); )
У наведеному прикладі цикл for...of неявно викликає ітератор об'єкта Array для кожного значення масиву.

5. Явне використання ітератора

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 міститься масив виду [ключ, значення] .

ІІ. Перебір масивоподібних об'єктів

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. Перетворення на справжній масив

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 у кожному середовищі виконання (браузері), в якому планується використання вашої програми.

The forEach()метод executes виконується функція once для кожного елемента array.

Source для цього interactive example is stored in GitHub repository. Якщо ви знайдете, щоб розширити проектні приклади, повторити clone https://github.com/mdn/interactive-examples і виконати додаткові запити.

Syntax

Parameters

index Optional The index currentValue in the array.

array Optional The array forEach() був названий upon.

thisArg Optional Value для використання як це executing callback .

Return value

1. Description
2. дляEach() calls a provided callback function once for each element in array in ascending order. Це не є сприятливим для index properties, що має бути вилученим або є uninitalizated. (For sparse arrays, .)
3. callback is invoked with three arguments:

the value of the element

index of the element

forEach() виконує callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. Типовим використанням випадку є виконання дійсних дій на кінці кінця.

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

Це не може бути перерва або перерва дляEach() проміжок інших, якщо throwing an exception. Якщо ви потребуєте такий behavior, то дляEach() метод є wrong tool.

Early termination може бути зроблено з:

Array методів: every() , some() , find() , і findIndex() test the array elements with predicate returning truthy value to determine if further iteration is required.

Examples

No operation for uninitialized values ​​(sparse arrays)

Converting a for loop toforEach

Printing the contents of an array

Note:У відповідь на відображення вмісту array в консолі, ви можете використовувати console.table() , які принтери formatted version of array.

Наступні приклади ілюструють альтернативні приклади, використовуючи дляEach() .

Наступні коди logs a line for each element in an array:

Функція 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

За допомогою цьогоArg

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 = Counter() obj.add() obj.count // 3 obj.sum // 16

Безпосередньо цей параметр архіву (це) забезпечений дляEach() , він проходить до callback each time it"s invoked.

An object copy function

Наступні коди створюють копію given object.

Вони є різними способами до створення копії object. Наступна мова йде тільки про те, як розглянути, як розгорнути список 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

Якщо 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 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

Наступні приклади є тільки для того, щоб розпізнати purpose. Якщо ви хочете, щоб залучити до використання методів, ви можете використовувати Array.prototype.flat() (який exppected до роботи з ES2019, і є виконаний в деяких браузерах).

/** * Flattens passed array в одному 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 функцій

Specifications

Browser compatibility

Компактність таблиці в цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data і пишуть.

Update compatibility data on GitHub

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

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

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

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

Var users = новий 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 = новий Array(); users = "Tom"; users = "Kate"; console.log(users); // "Tom" console.log(users); // undefined

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

length

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

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

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

Var users = новий 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"]

У цьому випадку змінна людина після копіювання буде вказувати на той самий масив, що і змінна користувача. Тому при зміні елементів у людей, зміняться елементи і в 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