Różnica między pętlą forEach i for w javascript

Zastanawiam się: czy jest jakaś znacząca różnica między forEach i for loop w JavaScript.

Rozważ ten przykład: 

var myArray = [1,2,3,4];

myArray.forEach(function(value) {
  console.log(value);
});

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

Oto część moich badań:

  1. wydajność : zgodnie z JsPerf : forEach jest nieco wolniejszy niż for loop.
  2. Usability: nie ma możliwości przerwania / powrotu z wywołania zwrotnego w przypadku pętli forEach.

Na przykład: chcesz dowiedzieć się, czy liczba jest prime czy nie. Myślę, że użycie pętli for jest znacznie łatwiejsze niż użycie pętli forEach.

  1. czytelność: użycie pętli for sprawia, że kod jest bardziej czytelny niż posiadanie forEach w kodzie.
  2. Zgodność przeglądarki : forEach nie jest obsługiwany w IE

Moje pytania to:

  1. jakie są zalety pętli forEach over for ?
  2. w jakich scenariuszach forEach jest bardziej lepiej.
  3. dlaczego w ogóle to weszło do JavaScript ? Dlaczego w ogóle była potrzebna ?
Author: Pooja Kedar, 2014-09-23
Source

7 answers

forEach jest metodą na Array prototyp. Iteruje przez każdy element tablicy i przekazuje go do funkcji zwrotnej.

Więc w zasadzie, forEach jest metodą skróconą dla przypadku użycia " przekazuje każdy element array do function". Oto częsty przykład, w którym myślę, że Array.forEach jest bardzo przydatna w porównaniu do pętli for: 

// shortcut for document.querySelectorAll
function $$(expr, con) {
    return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// hide an element
function hide(el) {
    el.style.display = 'none';
}

// hide all divs via forEach
$$('div').forEach(hide); 

// hide all divs via for
for (var divs = $$('div'), i = 0; i < divs.length; i++) {
    hide(divs[i])
}

Jak widać, czytelność instrukcji forEach jest lepsza w porównaniu z pętla for.

Z drugiej strony, twierdzenie for jest bardziej elastyczne: niekoniecznie wiąże się z tablicą. Wydajność normalnej pętli for jest nieco lepsza, ponieważ nie ma wywołania funkcji dla każdego elementu. Pomimo tego zaleca się unikanie pętli for, gdy można ją zapisać jako instrukcję forEach.

 21
Author: terabaud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-17 14:14:03

W pętli forEach nie kontrolujesz sposobu iteracji tablicy. Klasyczna pętla for pozwala wybrać algorytm iteracji tak, jak chcesz (i++; i--; i+=2*i, itp.).

Jednak pętla forEach jest znacznie łatwiejsza w użyciu - nie musisz mieszać ze wszystkimi i liczeniami, znajdując array[i] obiekt -- JS robi to za Ciebie.

 20
Author: naivists,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-23 14:39:41 
>> sparseArray = [1, 2, , 4];

>> sparseArray.forEach(console.log, console);
1 0 [1, 2, 3: 4] 
2 1 [1, 2, 3: 4] 
4 3 [1, 2, 3: 4] 

>> for(var i = 0; i < sparseArray.length; ++i) { console.log(sparseArray[i]) };
1
2
undefined
4

forEach jest najnowszym dodatkiem umożliwiającym ekspresyjny styl rozumienia list w javascript. Tutaj możesz zobaczyć, że forEach pomija elementy, które nigdy nie zostały ustawione , ale najlepsze, co możesz zrobić za pomocą pętli for, to sprawdzić, czy undefined lub null, z których oba mogą być ustawione jako wartości i odebrane przez forEach. Jeśli nie oczekujesz brakujących wartości, forEach jest równoważne pętli for, ale pamiętaj, że nie możesz zatrzymać się wcześniej, do czego potrzebujesz every.

 8
Author: Phil H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-23 15:44:44

W prostych słowach, zgodnie z poniższym artykułem i badaniami, wydaje się, że główne różnice to:

For Loop

  1. jest to jeden z oryginalnych sposobów iteracji na tablicach
  2. It ' s faster
  3. Możesz break z tego używając tego słowa kluczowego
  4. moim zdaniem jest głównie używany do obliczeń z liczbami całkowitymi (liczbami)
  5. parametry to (iterator, counter, incrementor)

Pętla ForEach

  1. to nowszy sposób z less code to iterate over arrays
  2. łatwiejszy do odczytania
  3. pozwala zachować zmienną w zakresie
  4. mniejsza szansa na przypadkowe błędy z i <= >= etc.....
  5. parametry są (iterator, Index of item, entire array)

Https://alligator.io/js/foreach-vs-for-loops/

 1
Author: jso1919,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-18 12:40:01

Tutaj jest różnica między pętlą forEach i FOR w JavaScript.

Jeśli chodzi o wydajność, wolę pętlę for niż pętlę forEach. To tylko jeden z kilku problemów, z którymi zetknąłem się z pętlą forEach. 
let abc = [1,2,3] 

abc.forEach((e) => { 
   delete e; 
}) 

console.log(abc)  //Array(3) [ 1, 2, 3 ]

for (let i = 0; i < abc.length; i++) { 
   delete abc[i]; 
} 

console.log(abc)  //Array(3) [ <3 empty slots> ]
 0
Author: Foz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-12 16:28:22

Poza elastycznością, jednym z głównych powodów, dla których użyłbym pętli for jest to, że musiałem wcześniej wyjść z pętli.

W poniższym przykładowym kodzie jeśli chcesz zwrócić tylko określoną value w tablicy, możesz użyć instrukcji if, aby sprawdzić, czy Twoje kryteria są zgodne, a następnie wyrwać się z pętli. Metoda forEach powtarzałaby się nad każdym pokarmem, co mogłoby prowadzić do problemów z wydajnością.

//Assume that foodArray has been declared
for (let i = 0; i < foodArray.length; i++) {
  if (foodArray[i].name === 'Pizza') {
    console.log('PIZZA EXISTS');
    break;
  }
}
 0
Author: Kayvan Salimi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-22 11:19:27

ForEach

  1. forEach jest metodą w prototypie tablicy.
  2. jest łatwy w użyciu
  3. zawiera funkcję zwrotną i każdy element z tablicy jest przekazywany do funkcji zwrotnej
  4. z powodu wywołania zwrotnego, nie można używać wait z forEach, to doprowadzi do innego wyjścia niż oczekiwano.
  5. z powodu funkcji callback jest wolniejszy niż dla pętli
  6. z powodu wywołania zwrotnego nie można użyć break

Na loop

  1. W pętli for potrzebujesz indeksu, warunku i przyrostu / spadku zmiennej indeksu
  2. jest szybszy niż foreach
  3. możesz użyć break
  4. działa z wait
 0
Author: Sunil Garg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-04 08:35:44