Итерация массива JavaScript


Оглавление

    Показать оглавление


Методы итерации массива работают с каждым элементом массива.


Массив JavaScript 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>

JavaScript-массив 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>

JavaScript-массив 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


JavaScript-массив 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>

Массив JavaScript 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>

JavaScript-массив 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>

Массив JavaScript 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>

Массив JavaScript 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 аргумента:

  • Стоимость товара

  • Индекс товара

  • Сам массив


Массив JavaScript 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)
item

Необходимый. Объект для поиска.

start

Необязательный. С чего начать поиск. Отрицательные значения начнутся с заданной позиции, считая с конца, и будут искать до конца.

Array.indexOf() возвращает -1, если элемент не найден.

Если элемент присутствует более одного раза, он возвращает позицию первого вхождение.


Массив JavaScript 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)
item

Необходимый. Объект для поиска

start

Необязательный. С чего начать поиск. Отрицательные значения будут начинаться с заданной позиции, считая с конца, и искать до начала.


Массив JavaScript 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.


Массив JavaScript 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.


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


JavaScript-массив 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.


JavaScript-массив 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.


Массив JavaScript 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.


Распространение массива JavaScript (...)

Оператор ... расширяет итерируемый объект (например, массив) на большее количество элементов:

Пример

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. свойства и методы.