for loop

ordinaryforcycle

Specify the number of cycles by yourself. Let’s take a look at the common writing:

const arr = [1, 2, 3]; for(let i = 0; i< arr.length; i++) { console.log(arr[i]); }Copy the code

If the array length does not change during the loop, it is more efficient to store the array length as a variable.

const arr = [1, 2, 3];
for(let i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}
Copy the code

forEachcycle

Iterable objects that can be iterated over have forEach(callbackFn,? ThisArg). Array, Map, and Set objects are all iterable. ForEach () receives a callback function, callbackFn, which is called back with each iteration. The argument list for the callback function is (value, key, iterable), followed by (value, key, iterable object itself).

iterable.forEach(function(value, key, iterable) {
  console.log(key, value, iterable);
});
Copy the code

If you want to add each array, just sum += value is much easier than it used to be.

ForEach finds a value and then returns. ForEach does not abort the operation and still prints the elements that follow, while some aborts the operation once it returns.

for.. incycle

Legacy, used to iterate over properties of an object (the index value of an array is also a property). If you add a member attribute to an array, use for.. The in traversal group iterates through the newly defined attributes.

for (property in obj) {
  console.log(property, obj[property]);
}
Copy the code
const arr = [1, 2, 3]; let index; for(index in arr) { console.log("arr[" + index + "] = " + arr[index]); } / / output / / arr as follows [0] = 1 / / arr [1] = 2 / / arr [2] = 3Copy the code

A for-in loop iterates over the properties of the object, not the index of the array. Thus, for-in traverses not only arrays, but also objects.

const person = { fname: "san", lname: "zhang", age: 29 }; let info; for(info in person) { console.log("person[" + info + "] = " + person[info]); // person[fname] = SAN // person[lname] = Zhang // person[age] = 29Copy the code

A for-in is not good for iterating over elements in an Array, it is better for iterating over properties in an object, which is why it was created.

for.. ofLoop (ES6)

for.. The of loop fixed for.. The problem with in is that it only iterates over property values belonging to the object itself. And the object must be iterable. Such as Array, Map, and Set. \

What are the drawbacks of the three for loops prior to ES6:

  • ForEach cannot break or return;
  • The disadvantage of for-In is that it not only iterates through the elements in the array, but also traverses custom attributes, and even attributes on the prototype chain are accessed. Furthermore, the order in which the elements of the traversal array are traversed can be random.

So, in view of these shortcomings, we need to improve the original for loop. But ES6 doesn’t break the JS code you’ve already written. Today, thousands of Web sites rely on for-in loops, and some even use them for array traversal. Adding array traversal support by fixing for-In loops would have made things even messier, so the standards committee added a new loop syntax in ES6 to solve the current problem, for-of.

So what exactly can for-of do?

  • In contrast to forEach, it responds correctly to break, continue, and return.
  • For-of loops support not only arrays, but also most array-like objects, such as DOM Nodelist objects.
  • The for-of loop also supports string traversal, which traverses strings as a series of Unicode characters.
  • For-of also supports traversal of Map and Set objects (both new types in ES6).

To summarize, for-of loops have the following characteristics:

  • This is the simplest and most straightforward syntax for traversing a list of elements.
  • This approach avoids all the pitfalls of a for-in loop.
  • Unlike forEach, it responds correctly to break, continue, and return statements.
  • It can iterate not only over arrays, but also over array-like objects and other iterable objects.

Note that for-of loops don’t support normal objects, but if you want to iterate over an object’s properties, you can use for-in loops (which is what it does).