Методы итерации массива работают с каждым элементом массива.
forEach()Метод forEach() вызывает функцию (функцию обратного вызова) один раз для каждого элемента массива.
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
В приведенном выше примере используется только параметр value. Пример можно переписать к:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
map()Метод map() создает новый массив, выполняя функцию над каждым элементом массива.
Метод map() не выполняет функцию для массива. элементы без значений.
Метод map() не меняет исходный массив.
В этом примере каждое значение массива умножается на 2:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
Когда функция обратного вызова использует только параметр значения, индекс и массив параметры можно опустить:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
flatMap()ES2019 добавил в JavaScript метод Array flatMap().
Метод flatMap() сначала отображает все элементы массива. а затем создает новый массив, выравнивая его.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
JavaScript Array flatMap() поддерживается во всех современных браузерах с января 2020 года:
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
filter()Метод filter() создает новый массив с элементами массива, прошедшими проверку.
В этом примере создается новый массив из элементов со значением больше 18:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
В приведенном выше примере функция обратного вызова не использует индекс и массив. параметры, поэтому их можно опустить:
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
reduce()Метод 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;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 4 аргумента:
Итого (начальное значение/ранее возвращенное значение)
Стоимость товара
Индекс товара
Сам массив
В приведенном выше примере не используются параметры индекса и массива. Может быть переписано на:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
Метод reduce() может принимать начальное значение:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduceRight()Метод reduceRight() запускает функцию для каждого элемента массива для получения (уменьшения его до) одного значения.
reduceRight() работает в массиве справа налево. См. также reduce().
Метод reduceRight() не уменьшает исходный массив.
В этом примере находится сумма всех чисел в массиве:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 4 аргумента:
Итого (начальное значение/ранее возвращенное значение)
Стоимость товара
Индекс товара
Сам массив
В приведенном выше примере не используются параметры индекса и массива. Может быть переписано на:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
ever()Метод every() проверяет, все ли значения массива проходят проверку.
В этом примере проверяется, все ли значения массива больше 18:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
Когда функция обратного вызова использует только первый параметр (значение), другой параметры можно опустить:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
some()Метод some() проверяет, проходят ли некоторые значения массива проверку.
В этом примере проверяется, превышают ли некоторые значения массива 18:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>
<p>The some() method checks if some array values pass a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
indexOf()Метод indexOf() ищет в массиве значение элемента и возвращает его позицию.
Примечание. Первый элемент имеет позицию 0, второй элемент — позицию 1 и т. д.
Найдите в массиве элемент «Яблоко»:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.indexOf(item, start)Необходимый. Объект для поиска.
Необязательный. С чего начать поиск. Отрицательные значения начнутся с заданной позиции, считая с конца, и будут искать до конца.
Array.indexOf() возвращает -1, если элемент не найден.
Если элемент присутствует более одного раза, он возвращает позицию первого вхождение.
lastIndexOf()Array.lastIndexOf() аналогичен Array.indexOf(), но возвращает позицию последнего вхождения указанного элемента.
Найдите в массиве элемент «Яблоко»:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.lastIndexOf(item, start)Необходимый. Объект для поиска
Необязательный. С чего начать поиск. Отрицательные значения будут начинаться с заданной позиции, считая с конца, и искать до начала.
find()Метод find() возвращает значение первого элемента массива, который передает тестовая функция.
В этом примере находит (возвращает значение) первый элемент, который больше чем 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
find() — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() не поддерживается в Internet Explorer.
findex()Метод findex() возвращает индекс первого элемента массива, который передает тестовую функцию.
В этом примере выполняется поиск индекса первого элемента, который больше 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Обратите внимание, что функция принимает 3 аргумента:
Стоимость товара
Индекс товара
Сам массив
findIndex() — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findex() не поддерживается в Internet Explorer.
Array.from()Метод Array.from() возвращает объект Array из любого объекта длиной свойство или любой повторяемый объект.
Создайте массив из строки:
Array.from("ABCDEFG");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Return an array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
from() — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() не поддерживается в Internet Explorer.
Keys()Метод Array.keys() возвращает объект Array Iterator с ключами массива.
Создайте объект Array Iterator, содержащий ключи массива:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Return an Array Iterator object with the keys of the array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
keys() — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() не поддерживается в Internet Explorer.
entries()Создайте итератор массива, а затем переберите пары ключ/значение:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() returns an Array Iterator object with key/value pairs:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
Метод entries() возвращает объект Array Iterator с парами ключ/значение:
[0, «Банан»]
[1, «Апельсин»]
[2, «Яблоко»]
[3, «Манго»]
Метод entries() не меняет исходный массив.
entries() — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
entries() не поддерживается в Internet Explorer.
includes()В ECMAScript 2016 появился Array.includes() для массивов. Это позволяет нам проверить, присутствует ли элемент в массиве (включая NaN, в отличие от indexOf).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is trueПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>
</body>
</html>
array.includes(search-item)Array.includes() позволяет проверять значения NaN. В отличие от Array.indexOf().
includes() — это функция ECMAScript 2016.
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() не поддерживается в Internet Explorer.
Оператор ... расширяет итерируемый объект (например, массив) на большее количество элементов:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "spread" operator spreads elements of iterable objects:</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
... — это функция ES6 (JavaScript 2015).
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
... не поддерживается в Internet Explorer.
Для получения полной информации о массивах перейдите по ссылке:
Полное руководство по массивам JavaScript.
Справочник содержит описания и примеры всех Array. свойства и методы.