The for loop

var arr = ['a'.'b'.'c'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}
Copy the code

while

For loops are useful when you know the initial and end conditions of a loop. The for loop, which ignores the conditions above, makes it hard to see the logic of the loop, so it is better to use a while loop.

The while loop has only one judgment condition. If the condition is satisfied, the loop will continue. If the condition is not satisfied, the loop will exit. For example, if we want to calculate the sum of all odd numbers up to 100, we can use the while loop:

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; / / 2500Inside the loop, the variable n keeps decreasing until it becomes minus1When, no longer satisfiedwhileCondition, loop exit.Copy the code

do … while

do { … } while() loop, the only difference between this and the while loop is that instead of judging the condition at the beginning of each loop, the condition is judged at the end of each loop:

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; / / 100
Copy the code

With the do {… } Be careful with the while() loop, which executes at least once, while for and while loops may not execute at all.

1.forEach

The forEach method iterates through the array, calling the specified function forEach element. The function passed as the first argument to forEach (). ForEach () then calls the function with three arguments: the array element, the element’s index, and the array itself. If you only care about the values of array elements, you can write a function that takes one argument — extra arguments are ignored: forEach () cannot terminate traversal until all elements have been passed to the calling function. That is, there is no corresponding break statement like the one used in the for loop. To terminate prematurely, the forEach () method must be placed in a try block and be able to throw an exception. If the function called by forEach () throws a foreach.break exception, the loop terminates prematurely:

function foreach(a.f.t){
    try{a.flaach (f,t); }catch(e) {if(e === foreach.break)return;
        else throw e;
    }
}
foreach.break = new Error("StopIteration");Copy the code

.for … in

A variant of the for loop is for… An in loop, which loops through all the properties of an object in turn:

var obj = {
    name: 'Li Yinhe'.age: 18.city: 'Beijing'
};
for (var key in obj) {
    console.log(key); // 'name', 'age', 'city'
}
Copy the code

To filter out inherited attributes of an object, use hasOwnProperty() :

var obj = {
    name: 'Li Yinhe'.age: 20.city: 'Beijing'
};
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'}}Copy the code

Since Array is also an object, and the index of each of its elements is treated as an attribute of the object, for… The in loop can loop through an Array index directly:

var a = ['A'.'B'.'C'];
for (var i in a) {
    console.log(i); / / '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
Copy the code

Please note that… In loops through Array to get a String instead of a Number.

Index The index is a string number and cannot be directly used for geometric operations. 2. 3. Using for in iterates through all enumerable properties of an array, including stereotypes. For example, the hairy prototype method and name attributes make for in better suited for traversing objects

for… of

var arr = [
    { name:'Joe'.age:18 },
    { name:'bill'.age:24 },
    { name:'Cathy'.age:26 },
    { name:'Daisy'.age:34}];for(var item of arr){	
    console.log(item.name,item.age);
 / / zhang SAN 18
 / / li si 24
 / / fifty and 26
 / / zhao six 34
}


 const obj = {a: 'x'.b: 'y'};
  for (let i of Object.keys(obj)) {
    console.log(i) // a, b
  }

Copy the code

To summarize, for in iterates over the array index (key name), while for of iterates over the array element value.

For-in always gets the key of an object or the index of an array or string.

For-of always gets the value of an object or the value of an array or string, and can also be used to traverse maps and sets. The for of loop is used to get the value in a key-value pair, while the for in loop gets the key name

A data structure that deploys the symbol. iterator attribute is considered to have an iterator interface and can use the for of loop.

Example 3: This object does not have symbol. iterator, so using for of returns json is not iterable

Unlike forEach, for of can be used with break, continue, and return, meaning that a for of loop can exit at any time.

The for of loop can be used for any data structure that has an Iterator interface. Which data structures have the symbol.iteratoer property deployed? Array Map Set String arguments Nodelist is a dom list collection

filter

The filter() method creates a new array of elements by checking all eligible elements in the specified array.

let arr = ['a'.'b'.'c'.'d'];
let arr2 = arr.filter(item= > item === 'a')
//['a']
Copy the code

map

Since the map() method is defined in JavaScript’s Array, we call Array’s map() method, passing in our own function, and get a new Array as a result. The elements in the Array are the values processed by the original Array calling function.

function pow(x) {
    return x * x;
}
let arr = [1.2.3.4.5.6.7.8.9];
let results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

let arr = ['d'.'s'.'r'.'c'];
let arr2 = arr.map(item= > item === 's')
console.log(arr2);


var arr = [1.2.3.4.5.6.7.8.9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
Copy the code

reduce

Array reduce() applies a function to Array [x1, x2, x3…]. The function must take two arguments, reduce(), and continue the cumulative calculation with the next element of the sequence, resulting in:

let arr = ['a'.'b'.'c'.'d'];
let arr2 = arr.reduce((total, item) = > {
   return total + item
}, ' ')
//abcd


var arr = [1.3.5.7.9];
arr.reduce(function (x, y) {
    return x + y;
}); / / 25
Copy the code