Для каждого в JavaScript?

ВОПРОС: Есть ли способ сделать цикл for-each в чистом JavaScript?

ОТВЕТ: Есть несколько способов сделать это, как для массивов, так и для объектов.

Способы перебора массивов и объектов в JavaScript

Массив # для каждого метода

Array.prototype.forEach(обратный вызов(значение, индекс, массив)) Метод Array.forEach [только массивы]

var miArray = [ 2, 4, 6, 8, 10 ];
miArray.forEach( function(valor, indice, array) {
    console.log("En el índice " + indice + " hay este valor: " + valor);
});

Метод Object#keys в сочетании с методом Array#forEach

Object.keys(object) Для получения свойств объекта в ассоциативном массиве. вклад эледгаара

var obj = {
  first: "John",
  last: "Doe"
}

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key])
})

петля for-i

оператор for ([начальное-выражение]; [условие]; [конечное-выражение]) for-i Цикл [Только массивы]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var i = 0; i < miArray.length; i+=1) {
  console.log("En el índice '" + i + "' hay este valor: " + miArray[i]);
}

цикл for-in

Оператор for (переменная в объекте) Массивы [Не рекомендуется] и Объекты [Рекомендуется]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var indice in miArray) {
  console.log("En el índice '" + indice + "' hay este valor: " + miArray[indice]);
}
    
var miObjeto = { "marca":"audi", "edad":2 };
for (var propiedad in miObjeto) {
  if (miObjeto.hasOwnProperty(propiedad)) {
    console.log("En la propiedad '" + propiedad + "' hay este valor: " + miObjeto[propiedad]);
  }
}

цикл for-of

Оператор for (переменная объекта) Для любого типа Итерируемый (массивы)

var miArray = [ 2, 4, 6, "hola", "mundo" ];
for (var valor of miArray) {
  console.log("Valor: " + valor);
}

Вывод:

Если вам нужно выполнить итерацию по массиву, используйте метод forEach , а если вам нужно выполнить итерацию по объекту, используйте метод for-in .

Array.prototype.forEach (callbackfn [, thisArg])

 
var arr = ["uno", "dos", "tres"];

arr.forEach(function(elemento) {
    console.log(elemento);
});

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

^{*Примечание. Работает с ECMAScript 5.}

перезвонить

Функция, которая передается в качестве обратного вызова , принимает 3 параметра: значение элемента, индекс и ссылку на итерируемый массив. Последние 2 являются необязательными (в первом примере просто передан элемент). Если бы мы также хотели использовать индекс:

var arr = [];
arr[0]  = "cero";
arr[10] = "diez";
arr[20] = "veinte";

arr.forEach(function(elemento, indice) {
    console.log("pos=", indice, "valor=", elemento);
});

Кроме того, следует отметить, что .forEachон вообще не мутирует в формат array. Если значение изменено elemento, то arrayне будет изменено (хотя на него можно ссылаться для изменения значения).

Другие подобные функции

• .every()Выход из цикла, как только функция возвращает значение false.
• .some()Выход из цикла, как только функция возвращает значение true.

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

Конструктор Object имеет метод Object.keys() , который возвращает массив свойств данного объекта.

Object.keys(obj)

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

const obj = {
  first: "John", 
  last: "Doe"
}

console.log(Object.keys(obj))  // ["first", "last"]

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function (key) {
  console.log(key, obj[key])
})

Foreach использует await и async, проверьте следующий код:

const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
[1, 2, 3].forEach(async (num) => {
  await waitFor(50);
  console.log(num);
});
console.log('Done');