javascript - перебор - поиск в массиве js




Для каждого по массиву в JavaScript? (19)

Как я могу перебирать все записи в массиве с помощью JavaScript?

Я думал, что это что-то вроде этого:

forEach(instance in theArray)

Где theArray - мой массив, но это кажется неправильным.


Петля назад

Я думаю, что обратное для цикла заслуживает упоминания здесь:

for (var i = array.length; i--; ) {
     // process array[i]
}

Преимущества:

  • Вам не нужно объявлять временную переменную len или сравнивать с array.length на каждой итерации, которая может быть минутной оптимизацией.
  • Удаление братьев и сестер из DOM в обратном порядке обычно более эффективно . (Браузеру необходимо меньше перемещать элементы во внутренних массивах).
  • Если вы изменяете массив во время цикла, в или после индекса i (например, вы удаляете или вставляете элемент в array[i] ), тогда прямой контур пропускает элемент, сдвинутый влево в позицию i , или повторно обрабатывает i который был сдвинут вправо. В традиционном цикле вы можете обновить i, чтобы указать на следующий элемент, который нуждается в обработке - 1, но простое изменение направления итерации часто является более простым и элегантным решением .
  • Аналогичным образом, при изменении или удалении вложенных элементов DOM обработка в обратном порядке может обойти ошибки . Например, рассмотрите возможность изменения внутреннегоHTML родительского узла перед обработкой его дочерних элементов. К моменту достижения дочернего узла он будет отделен от DOM, заменив его новым созданным потомком, когда был записан внутренний HTTML родителя.
  • Он короче для ввода и чтения , чем некоторые другие доступные опции. Хотя он теряет forEach() и ES6 for ... of

Недостатки:

  • Он обрабатывает элементы в обратном порядке. Если вы строили новый массив из результатов или печатали на экране, естественно, выход будет отменен в отношении исходного порядка.
  • Неоднократное включение братьев и сестер в DOM в качестве первого ребенка для сохранения их порядка менее эффективно . (Браузеру все равно придется менять вещи.) Чтобы создать узлы DOM эффективно и упорядоченно, просто переходите вперед и добавьте как обычно (а также используйте «фрагмент документа»).
  • Обратный цикл запутывает младших разработчиков. (Вы можете учесть это преимущество, в зависимости от вашего прогноза.)

Должен ли я всегда использовать его?

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

Хотя прирост производительности обычно незначителен, это крики:

«Просто сделайте это для каждого элемента в списке, я не забочусь о заказе!»

Однако на практике это на самом деле не является надежным указанием на намерение, поскольку оно неотличимо от тех случаев, когда вы заботитесь о заказе, и действительно нужно зацикливать в обратном порядке. Таким образом, на самом деле потребуется еще одна конструкция, чтобы точно выразить намерение «не заботиться», то, что в настоящее время недоступно на большинстве языков, включая ECMAScript, но которое можно было бы назвать, например, forEachUnordered() .

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

Лучше использовать forEach ()

В целом для кода более высокого уровня, где ясность и безопасность являются более серьезными, я бы рекомендовал использовать Array::forEach качестве шаблона по умолчанию:

  • Ясно читать.
  • Это указывает на то, что i не будет перемещаться внутри блока (что всегда является возможным сюрпризом, скрывающимся в длинных циклах while и while ).
  • Это дает вам свободу действий для закрытия.
  • Это уменьшает утечку локальных переменных и случайное столкновение с (и мутацией) внешних переменных.

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

(Если обсуждение намерения не имеет для вас никакого смысла, вам и вашему коду может быть полезно наблюдать за лекцией Крокфорда « Стиль программирования и ваш мозг» ).

Как это работает?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Вы заметите, что i-- является средним предложением (где мы обычно видим сравнение), а последнее предложение пусто (где мы обычно видим i++ ). Это означает, что i-- также используется как условие продолжения. Реально, он выполняется и проверяется перед каждой итерацией.

  • Как он может начинаться с array.length без взрыва?

    Поскольку i-- выполняется перед каждой итерацией, на первой итерации мы фактически получаем доступ к элементу в array.length - 1 который избегает любых проблем с undefined элементами Array-out-of-bounds .

  • Почему он не останавливает итерацию перед индексом 0?

    Цикл прекратит итерацию, когда условие i-- оценивает значение false (когда оно дает 0).

    Фокус в том, что в отличие от --i , конечный i-- оператор уменьшает i но дает значение до декремента. Ваша консоль может продемонстрировать это:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Итак, на последней итерации я раньше был 1, а выражение i-- его на 0, но фактически давало 1 (правдивость), и поэтому условие проходит. На следующей итерации i-- изменяет i на -1, но дает 0 (falsey), в результате чего выполнение немедленно выпадает из нижней части цикла.

    В традиционном forwards for loop, i++ и ++i взаимозаменяемы (как указывает Дуглас Крокфорд). Однако в обратном для цикла, поскольку наш декремент также является выражением нашего условия, мы должны придерживаться i-- если мы хотим обработать элемент с индексом 0.

пустяки

Некоторым людям нравится нарисовать маленькую стрелу в обратном направлении for цикла, и заканчивается подмигиванием:

for (var i = array.length; i --> 0 ;) {

Кредиты идут в WYL, чтобы показать мне преимущества и ужасы обратного цикла.


Резюме:

При повторении массива мы часто можем достичь одной из следующих целей:

  1. Мы хотим перебрать массив и создать новый массив:

    Array.prototype.map

  2. Мы хотим перебрать массив и не создавать новый массив:

    Array.prototype.forEach

    for..of петля

В JS существует множество способов достижения обеих этих целей. Однако некоторые из них более примитивны, чем другие. Ниже вы можете найти некоторые общепринятые методы (наиболее удобные imo) для выполнения итерации массива в javascript.

Создание нового массива: Map

map()- это функция, на Array.prototypeкоторой можно преобразовать каждый элемент массива, а затем возвращает новый массив. map()принимает в качестве аргумента функцию обратного вызова и работает следующим образом:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Обратный вызов, который мы передали в map()качестве аргумента, выполняется для каждого элемента. Затем возвращается массив, который имеет ту же длину, что и исходный массив. В этом новом элементе массива преобразуется функция обратного вызова, переданная в качестве аргумента map().

Четкое различие между mapи другим циклом цикла forEachи for..ofциклом заключается в том , что mapвозвращается как новый массив и оставляет старый массив неповрежденным (за исключением случаев, когда вы просто манипулируете им с такими мыслями splice).

Также обратите внимание, что mapобратный вызов функции предоставляет в качестве второго аргумента номер индекса текущей итерации. Кроме того, третий аргумент предоставляет массив, на который mapбыл вызван. Иногда эти свойства могут быть очень полезными.

Использование Loop forEach

forEach- это функция, которая находится на Array.prototypeкоторой принимает функцию обратного вызова в качестве аргумента. Затем он выполняет эту функцию обратного вызова для каждого элемента массива. В отличие от map()функции функция forEach возвращает ничего ( undefined). Например:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Подобно mapфункции, forEachобратный вызов предоставляет в качестве второго аргумента номер индекса текущей итерации. Также третий аргумент предоставляет массив, на который forEachбыл вызван.

Прокрутка элементов с использованием for..of

for..ofПетли петли через каждый элемент массива (или любого другого объекта Iterable). Он работает следующим образом:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

В приведенном выше примере elementиспользуется элемент массива и arrмассив, который мы хотим создать . Не то, чтобы имя было elementпроизвольным, и мы могли бы выбрать любое другое имя типа «el» или что-то более декларативное, когда это применимо.

Не путайте for..inпетлю с for..ofпетлей. for..inбудет циклически проходить через все перечислимые свойства массива, тогда как for..ofцикл будет циклически проходить через элементы массива. Например:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}


Если вы не против опустошения массива:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x будет содержать последнее значение y и оно будет удалено из массива. Вы также можете использовать shift() который даст и удалит первый элемент из y .


Если вы хотите перебрать массив, используйте стандартный трехсекционный цикл.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

Вы можете получить некоторую оптимизацию производительности, кэшируя myArray.length или повторяя ее назад.


Реализация forEach ( см. В jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Я знаю, что это старый пост, и есть много замечательных ответов.Для немного более полноты я решил, что я бы выбрал другой, используя AngularJS . Конечно, это применимо только в том случае, если вы используете Angular, очевидно, тем не менее, я все равно хотел бы выразить это.

angular.forEachпринимает 2 аргумента и необязательный третий аргумент. Первый аргумент - это объект (массив) для итерации, второй аргумент - это функция итератора, а необязательный третий аргумент - это контекст объекта (в основном называемый внутри цикла как «это».

Существуют различные способы использования цикла forEach для углов. Самый простой и, вероятно, наиболее используемый

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Другой способ, который полезен для копирования элементов из одного массива в другой, - это

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Хотя вам этого не нужно, вы можете просто сделать следующее, и это эквивалентно предыдущему примеру:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Теперь есть плюсы и минусы использования angular.forEachфункции в отличие от встроенной forпетли с ароматом ванили .

Pros

  • Легкая читаемость
  • Легкость записи
  • Если доступно, angular.forEachбудет использоваться цикл ES5 forEach. Теперь я получу эффективность в разделе cons, поскольку петли forEach намного медленнее, чем циклы for. Я упоминаю это как профессионала, потому что приятно быть последовательным и стандартизованным.

Рассмотрим следующие два вложенных цикла, которые делают точно то же самое. Предположим, что у нас есть 2 массива объектов, и каждый объект содержит массив результатов, каждый из которых имеет свойство Value, которое представляет собой строку (или что-то еще). И, допустим, нам нужно перебирать каждый из результатов и, если они равны, выполните некоторые действия:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Конечно, это очень простой гипотетический пример, но я написал тройной встроенный для циклов, используя второй подход, и его было очень трудно читать и писать по этому вопросу.

Cons

  • Эффективность. angular.forEach, и нативные forEach, если на то пошло, настолько медленнее, чем нормальный forцикл ... примерно на 90% медленнее . Поэтому для больших наборов данных лучше всего придерживаться собственного forцикла.
  • Без перерыва, продолжения или возврата поддержки. continueна самом деле поддерживается « accident », чтобы продолжить в angular.forEachпростом представлении return;оператора в функции, angular.forEach(array, function(item) { if (someConditionIsTrue) return; });которая заставит его продолжить работу из этой итерации. Это также связано с тем, что нативный forEachне поддерживает перерыв или продолжается.

Я уверен, что есть и другие плюсы и минусы, и, пожалуйста, не стесняйтесь добавлять все, что сочтет нужным. Я чувствую, что в нижней строке, если вам нужна эффективность, придерживайтесь только собственного forцикла для ваших нужд цикла. Но, если ваши наборы данных меньше, и некоторая эффективность в порядке, чтобы отказаться от обмена на удобочитаемость и возможность записи, тогда, во что бы то ни стало, бросить angular.forEachэтого плохого мальчика.


Изменить : этот ответ безнадежно устарел. Для более современного подхода рассмотрите методы, доступные в массиве . Способы, представляющие интерес, могут быть:

  • для каждого
  • карта
  • фильтр
  • застежка-молния
  • уменьшить
  • каждый
  • немного

Стандартный способ итерации массива в JavaScript - это ваниль for -loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Обратите внимание, однако, что этот подход хорош только при наличии плотного массива, и каждый индекс занят элементом. Если массив разрежен, вы можете столкнуться с проблемами производительности при таком подходе, поскольку вы будете перебирать множество индексов, которые на самом деле не существуют в массиве. В этом случае идея a for .. in -loop может быть лучшей идеей. Тем не менее , вы должны использовать соответствующие меры предосторожности, чтобы гарантировать, что действуют только желаемые свойства массива (то есть элементы массива), поскольку for..in -loop также будет перечисляться в устаревших браузерах или если дополнительный свойства определяются как enumerable .

В ECMAScript 5 будет использоваться метод forEach для прототипа массива, но он не поддерживается в старых браузерах. Поэтому, чтобы иметь возможность использовать его последовательно, вы должны либо иметь среду, которая его поддерживает (например, Node.js для JavaScript на стороне сервера), либо использовать «Polyfill». Однако Polyfill для этой функции тривиальна, и поскольку она упрощает чтение кода, это хороший полиполк.


Использование циклов с помощью механизма destructuring и распространения ES6

Разрушение и использование оператора с расширенными возможностями оказались весьма полезными для новичков ES6 как более понятных для человека / эстетических, хотя некоторые ветераны javascript могут считать его грязным, юниоры или некоторые другие люди могут оказаться полезными.

Следующие примеры будут использовать for...ofоператор и .forEachметод.

Примеры 6, 7 и 8 могут быть использованы с какими - либо функциональными петлями , такими как .map, .filter, .reduce, .sort, .every, .some, для получения дополнительной информации об этих методах проверить массив объекты .

Пример 1: Нормальный for...ofцикл - здесь нет трюков.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Пример 2: Разделить слова на символы

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Пример 3: Циклический с keyиvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Пример 4: Получить свойства объекта inline

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Пример 5. Получите глубокие свойства объекта, что вам нужно.

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Пример 6: Используется ли пример 3 с.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Пример 7: Используется ли пример 4 с.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Пример 8: Используется ли пример 5 с.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


ECMAScript5 (версия на Javascript) для работы с массивами.

forEach - Итерирует через каждый элемент массива и делает все, что вам нужно с каждым элементом.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

В случае, более заинтересованный в работе над массивом с использованием некоторой встроенной функции.

map - Создает новый массив с результатом функции обратного вызова. Этот метод хорош для использования, когда вам нужно отформатировать элементы вашего массива.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

уменьшить. Как видно из названия, он уменьшает массив до одного значения, вызывая передачу данной функции в элементе currenct и результате предыдущего выполнения.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

each - Возвращает true или false, если все элементы массива проходят тест в функции обратного вызова.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - очень похоже на каждый, кроме того, что фильтр возвращает массив с элементами, возвращающими true для данной функции.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Надеюсь, это будет полезно.


Вы можете вызвать forEach Как это:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

элемент будет иметь значение каждого индекса от 0 до длины массива.

Выход:

1    
3    
2

Explaination:

forEach находится в классе прототипов. вы также можете назвать это какArray.prototype.forEach (...);

прототип: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Вы также можете изменить массив таким образом:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

Это итератор для N-редкого списка, где индекс начинается с 0, что является типичным сценарием при работе с document.getElementsByTagName или document.querySelectorAll)

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Примеры использования:

Пример №1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

Пример №2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Каждый тэг получает class="blue"

Пример № 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Каждый другой тег p получает class="red">

Пример №4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

И, наконец, первые 20 синих p-тэгов изменены на зеленый

Предостережение при использовании функции string как функции: функция создается вне контекста и должна использоваться только там, где вы уверены в переменном охвате. В противном случае лучше передать функции, где область обзора более интуитивно понятна.


Я также хотел бы добавить это как состав обратной петли и ответ выше для тех, кто хотел бы также использовать этот синтаксис.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Плюсы:

Выгода для этого: у вас есть ссылка уже в первом, что не нужно будет объявлять позже с другой строкой. Это удобно при циклическом перемещении по массиву объектов.

Минусы:

Это будет прерываться всякий раз, когда ссылка ложна - false (undefined и т. Д.). Однако это можно использовать как преимущество. Однако, это сделало бы его немного труднее читать. А также в зависимости от браузера он может быть «не» оптимизирован для работы быстрее оригинального.


Вероятно, for(i = 0; i < array.length; i++)петля - не лучший выбор. Зачем? Если у вас есть это:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

Метод вызовет от array[0]до array[2]. Во-первых, это сначала будет ссылаться на переменные, которых у вас даже нет, во-вторых, у вас не будет переменных в массиве, а в-третьих, это сделает код более смелым. Послушайте, это то, что я использую:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

И если вы хотите, чтобы это была функция, вы можете сделать это:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Если вы хотите сломать, немного логичнее:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Пример:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Он возвращает:

//Hello
//World
//!!!

Если вы хотите использовать forEach(), это будет выглядеть как -

theArray.forEach ( element => { console.log(element); });

Если вы хотите использовать for(), это будет выглядеть как -

for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }


Есть три реализации foreachв jQuery следующим образом .

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

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

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Другим жизнеспособным способом было бы использовать то, Array.map()что работает одинаково, но также и mutatesкаждый элемент и возвращает его так:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

Существует несколько способов циклического преобразования массива в JavaScript, как показано ниже:

для - это самый распространенный. Полный блок кода для циклирования

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - loop, пока выполняется условие. Кажется, это самый быстрый цикл

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - также цикл через блок кода, пока условие истинно, будет выполняться как минимум один раз

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Функциональные циклы - forEach, map, filter, и reduce(они цикл через функцию, но используются , если вам нужно что - то делать с вашим массивом и т.д.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Для получения дополнительной информации и примеров о функциональном программировании на массивах, посмотрите на сообщение в блоге. Функциональное программирование в JavaScript: отображение, фильтрация и уменьшение .


Там нет встроенной способности взломать forEach. Чтобы прервать выполнение, выполните Array#someследующие действия:

[1,2,3].some(function(number) {
    return number === 1;
});

Это работает, потому что someвозвращает true, как только любой из обратных вызовов, выполненный в порядке массива, возвращает true, короткое замыкание выполнения остальных. Оригинальный ответ см. В прототипе Array для some


var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})




iteration