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

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

Array.forEach()

forEach() Метод вызывает функцию один раз для каждого элемента массива (обратную функцию).

Пример

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Попробуйте сами

备注:Функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

В примере выше использовался только параметр value. Этот пример можно переписать как:

Пример

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Попробуйте сами

все браузеры поддерживают Array.forEach()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.map()

map() Метод создает новый массив, выполняя функцию на каждом элементе массива.

map() Метод не выполняет функцию на элементах массива без значений.

map() Метод не изменяет исходный массив.

Этот пример умножает каждый элемент массива на 2:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Попробуйте сами

Пожалуйста, обратите внимание, что функция имеет 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

Если обратная функция использует только параметр value, можно опустить параметры index и array:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Попробуйте сами

все браузеры поддерживают Array.map()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.filter()

filter() Метод создает новый массив, содержащий элементы, прошедшие тест.

Этот пример создает новый массив из элементов, значение которых больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Попробуйте сами

Обратите внимание, что эта функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

В примере выше обратная функция не использует параметры index и array, поэтому их можно опустить:

Пример

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Попробуйте сами

все браузеры поддерживают Array.filter()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.reduce()

reduce() Метод выполняет функцию на каждом элементе массива, чтобы сгенерировать (уменьшить) один значений.

reduce() Метод работает в массиве справа налево. См. также reduceRight().

reduce() Метод не уменьшает исходный массив.

Этот пример определяет сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Попробуйте сами

Пожалуйста, обратите внимание, что эта функция принимает 4 параметра:

  • итого (начальное значение/предыдущее возвращенное значение)}
  • Значение элемента
  • Индекс элемента
  • Сам массив

в предыдущем примере не использовались параметры index и array. Его можно переписать следующим образом:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Попробуйте сами

reduce() Метод может принимать начальное значение:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Попробуйте сами

все браузеры поддерживают Array.reduce()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.reduceRight()

reduceRight() Метод выполняет функцию на каждом элементе массива, чтобы сгенерировать (уменьшить) один значений.

reduceRight() Метод работает в массиве слева направо. См. также reduce().

reduceRight() Метод не уменьшает исходный массив.

Этот пример определяет сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Попробуйте сами

Пожалуйста, обратите внимание, что эта функция принимает 4 параметра:

  • итого (начальное значение/предыдущее возвращенное значение)}
  • Значение элемента
  • Индекс элемента
  • Сам массив

в предыдущем примере не использовались параметры index и array. Его можно переписать следующим образом:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Попробуйте сами

все браузеры поддерживают Array.reduceRight()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.every()

every() метод проверяет, проходят ли все значения массива тест.

в этом примере проверяется, являются ли все значения массива больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Попробуйте сами

Обратите внимание, что эта функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

если обратная функция использует только первый параметр (значение), можно пропустить другие параметры:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Попробуйте сами

все браузеры поддерживают Array.every()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.some()

some() метод проверяет, проходят ли некоторые значения массива тест.

в этом примере проверяется, являются ли некоторые значения массива больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Попробуйте сами

Обратите внимание, что эта функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

все браузеры поддерживают Array.some()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

Array.indexOf()

indexOf() метод поиска значения элемента в массиве и возвращает его положение.

备注:положение первого элемента - 0, положение второго элемента - 1 и так далее.

Пример

поиск элемента "Apple" в массиве:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Попробуйте сами

все браузеры поддерживают Array.indexOf()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

грамматика

array.indexOf(элемент, start)
элемент необходимо. Объект для поиска.
start опционально. Откуда начинать поиск. Отрицательные значения начинают поиск с конца массива и продолжают до конца.

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

возвращает положение первого出现的 элемента, если элемент встречается несколько раз.

Array.lastIndexOf()

Array.lastIndexOf() с Array.indexOf() аналогично, но поиск начинается с конца массива.

Пример

поиск элемента "Apple" в массиве:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Попробуйте сами

все браузеры поддерживают Array.lastIndexOf()кроме Internet Explorer 8 или более ранних версий:

да 9.0 да да да

грамматика

array.lastIndexOf(элемент, start)
элемент необходимо. Объект для поиска.
start Опционально. Откуда начинать поиск. Отрицательное значение начнет поиск с конца массива, начиная с указанного места, и продолжит до начала.

Array.find()

find() Метод возвращает значение первого элемента массива, который проходит тест функции.

Этот пример ищет (возвращает) значение первого элемента массива, значение которого больше 18:

Пример

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Попробуйте сами

Обратите внимание, что эта функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

Старые браузеры не поддерживают Array.find()Ниже приведен список первых версий браузеров, которые полностью поддерживают этот метод:

45 12 25 8 32

Array.findIndex()

findIndex() Метод возвращает индекс первого элемента массива, который проходит тест функции.

Этот пример ищет индекс первого элемента, значение которого больше 18:

Пример

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Попробуйте сами

Обратите внимание, что эта функция принимает 3 параметра:

  • Значение элемента
  • Индекс элемента
  • Сам массив

Старые браузеры не поддерживают Array.findIndex()Ниже приведен список первых версий браузеров, которые полностью поддерживают этот метод:

45 12 25 8 32