Итерация массива JavaScript
Методы итерации массива работают с каждым элементом массива.
Массив JavaScript для каждого()
Метод forEach()вызывает функцию (функцию обратного вызова) один раз для каждого элемента массива.
Пример
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
В приведенном выше примере используется только параметр value. Пример можно переписать так:
Пример
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Карта массива JavaScript()
Метод map()создает новый массив, выполняя функцию для каждого элемента массива.
Метод map()не выполняет функцию для элементов массива без значений.
Метод map()не изменяет исходный массив.
В этом примере каждое значение массива умножается на 2:
Пример
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
Когда функция обратного вызова использует только параметр значения, параметры индекса и массива можно опустить:
Пример
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Фильтр массива JavaScript()
Метод filter()создает новый массив с элементами массива, который проходит тест.
В этом примере создается новый массив из элементов со значением больше 18:
Пример
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
В приведенном выше примере функция обратного вызова не использует параметры индекса и массива, поэтому их можно не указывать:
Пример
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Уменьшение массива JavaScript()
Метод reduce()запускает функцию для каждого элемента массива, чтобы создать (уменьшить его до) одно значение.
Метод reduce()работает слева направо в массиве. См. также reduceRight().
Метод reduce()не уменьшает исходный массив.
Этот пример находит сумму всех чисел в массиве:
Пример
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Обратите внимание, что функция принимает 4 аргумента:
- Итого (начальное значение / ранее возвращенное значение)
- Стоимость товара
- Индекс элемента
- Сам массив
В приведенном выше примере не используются параметры индекса и массива. Его можно переписать так:
Пример
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Метод reduce()может принимать начальное значение:
Пример
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
Массив JavaScript
Метод reduceRight()запускает функцию для каждого элемента массива, чтобы создать (уменьшить его до) одно значение.
Работает reduceRight()справа налево в массиве. См. также reduce().
Метод reduceRight()не уменьшает исходный массив.
Этот пример находит сумму всех чисел в массиве:
Пример
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Обратите внимание, что функция принимает 4 аргумента:
- Итого (начальное значение / ранее возвращенное значение)
- Стоимость товара
- Индекс элемента
- Сам массив
В приведенном выше примере не используются параметры индекса и массива. Его можно переписать так:
Пример
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Массив JavaScript каждый()
Метод every()проверяет, проходят ли тест все значения массива.
В этом примере проверяется, все ли значения массива больше 18:
Пример
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
Когда функция обратного вызова использует только первый параметр (значение), остальные параметры можно опустить:
Пример
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Массив JavaScript какой-то()
Метод some()проверяет, проходят ли тест некоторые значения массива.
В этом примере проверяется, больше ли некоторые значения массива 18:
Пример
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
Массив JavaScript indexOf()
Метод indexOf()ищет в массиве значение элемента и возвращает его позицию.
Примечание . Первый элемент имеет позицию 0, второй элемент имеет позицию 1 и так далее.
Пример
Найдите в массиве элемент «Apple»:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Синтаксис
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() возвращает -1, если элемент не найден.
Если элемент присутствует более одного раза, он возвращает позицию первого вхождения.
Массив JavaScript lastIndexOf()
Array.lastIndexOf()то же самое , что и Array.indexOf(), но возвращает позицию последнего вхождения указанного элемента.
Пример
Найдите в массиве элемент «Apple»:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Синтаксис
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
Поиск массива JavaScript()
Метод find()возвращает значение первого элемента массива, который проходит тестовую функцию.
Этот пример находит (возвращает значение) первого элемента, который больше 18:
Пример
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
Поддержка браузера
find() является функцией ES6 (JavaScript 2015).
Поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() не поддерживается в Internet Explorer.
Массив JavaScript findIndex()
Метод findIndex()возвращает индекс первого элемента массива, который проходит тестовую функцию.
Этот пример находит индекс первого элемента, который больше 18:
Пример
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Обратите внимание, что функция принимает 3 аргумента:
- Стоимость товара
- Индекс элемента
- Сам массив
Поддержка браузера
findIndex() является функцией ES6 (JavaScript 2015).
Поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() не поддерживается в Internet Explorer.
JavaScript Array.from()
Метод Array.from()возвращает объект Array из любого объекта со свойством длины или любого итерируемого объекта.
Пример
Создайте массив из строки:
Array.from("ABCDEFG");
Поддержка браузера
from() является функцией ES6 (JavaScript 2015).
Поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() не поддерживается в Internet Explorer.
Ключи массива JavaScript()
Метод Array.keys()возвращает объект Array Iterator с ключами массива.
Пример
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.