Become the ES version of the specification

  • for… In: Before ES6
  • for… Of: ES6 appear

for… in

MDN is introduced:

The for… in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.

Features:

  • Properties of an object: for… In traverses the property name of the object (not its value). For example, traversing an array of numbers iterates over the subscripts of the elements in the array rather than the values of the elements in the array
  • Enumerable properties: the for… In traverses enumerable properties.
  • Including Inherited Properties: Inherited Properties In also iterates over inherited properties. To exclude inherited attributes, use thehasOwnProperty()Let’s do the filtering.
  • for… In can interrupt traversal with break, return, or throw statements.

for… of

MDN is introduced:

The for… of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

Features:

  • iterable objects: for… Of iterates through the iterable objects introduced in ES6, such as strings, arrays, array-like objects (arguments, NodeList, etc.), TypedArray, Maps, sets, and other iterable objects.
  • for… Of can iterate directly over objects like arrays without the need[].slice.call().Array.from()Array conversion like this
  • To be executed for the value of each distinct property of the object: for… Of iterates over the property value of an object property rather than the property name. And it does not iterate over inherited property values.
  • for… Of can interrupt iteration using break, return, or throw statements.

Array.prototype.forEach()

MDN is introduced:

Note: There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

Early termination may be accomplished with:

  • A simple for loop
  • A for… of / for… in loops
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype.find()
  • Array.prototype.findIndex()

Array methods: every(), some(), find(), and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required.

  • ForEach cannot interrupt a sequence by breaking or returning false, only by throwing an exception.

  • For array-like objects (e.g. : arguments), to iterate over their values, you can’t use array forEach methods directly (because they just look like arrays but are not instances of arrays), but you can use for… Of or convert an array-like object to an Array using the [].slice.call or array. from methods and then iterate over the values using the Array’s forEach method

    Such as:

The resources

  • MDN-for… in
  • MDN-for… of
  • MDN-Array.prototype.forEach()
  • Zhang Xinxu – Look, for.. In and for.. Quarrel over there!