The following array we need to iterate over takes arr=[1,2,3,4,5] as an example

The for loop

Let arr = [1,2,3,4,5] for (var I = 0; i < arr.length; I++) {the console. The log (arr) [I] / / 1, 2, 3, 4, 5} for (var I arr) in {the console. The log (arr) [I] / / 1, 2, 3, 4, 5} arr. ForEach ((data) = > { console.log(data); / / 1, 2, 3, 4, 5}); For (var I of arr) {console.log(I) //1,2,3,4,5}Copy the code

The for loop is probably the most common and used method of loop traversal, which leads to poor readability and maintainability, but it breaks out of the loop in time.

for… The in loop is used to iterate over objects. When you want to get the corresponding key value of an object, use for… In is more convenient

ForEach is used in much the same way as map, except that forEach does not return a value, only manipulates data, and there is no stopping in the middle of the loop, always iterating through all the members

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 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 iterating over 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).

The map cycle

let result = arr.map(function(item){ return item * 2 }); Console. log(result) //2,4,6,8,10 console.log(arr) // 1,2,3,4,5Copy the code

The map() method is used to call a function on the elements of an array and return the result in a new array. The loop cannot be stopped halfway through, always iterating through all the members (if no value is returned, each element in the new array is undefined).

Filter cycle

Let result = arr.filter((item,index)=>{return item > 3}) console.log(result) // 4,5 console.log(arr) // 1,2,3,4,5Copy the code

The filter method is used to filter the members of an array. It takes a function that all array members execute in turn, returning true members as a new array. This method does not change the original array.