Js for, for… In the for… Xsl-fo, forEach

Var arr =,1,2,3,4 [0]Copy the code

• For:

for(var i=0; i<arr.length; I ++) {console.log(arr[I])Copy the code

• ForEach advantages: Simple, can access the array index and element value at the same time, missing: cannot interrupt the loop

 arr.forEach(function(val,index){     
      console.log(val+'subscript:',arr[index]) // 0, 1, 2, 3, 3, 4, 4})Copy the code

• For-in loop: Set for loop ‘Enumerable’ object

var obj = {a:1, b:2, c:3}; 
for(var i in obj) {
   console.log(i + ':'+ obj[i]) // a:1, b:2, c:3    
}Copy the code

 for(var i inArr) {// Can return subscripts and values console.log(I +)':'+ arr[i])  // 0:0 1:1 2:2 3:3 4:4
 }Copy the code

• For-of loops: you can iterate over strings, Maps, Sets….

1. Traversal string

let string = 'string';
for(let index of string) {
   console.log(index); // "s" "t" "r" "i" "n" "g"
}      Copy the code

2) For… Use entries() to return the subscript of an array

const iterable = ['apple'."Potato".'tomato']
for(let[val,index] of iterable.entries()) {// Return the corresponding value and the corresponding subscript console.log(val,index); }Copy the code

3. Maps objects store key-value pairs

const remap = new Map([['one', 1], ['two'2]]);for(const [key,val] of remap) {
    console.log(key + 'value:, val); / / one value: 1; Two values: 2}Copy the code

4. Sets allow you to store unique values of any type

Const iter = new Set([1,2,3,4,1])for(const val of iter) { console.log(val); / / 1, 2, 3, 4}Copy the code

5. Walk through DOM Collectiion

let Ul = document.querySelectorAll('ul');
for (let i of UL) {
    i.classList.add('red');
}Copy the code

• for… In and for.. Comparison of

 Array.prototype.newArr = () =>{}; 
 Array.prototype.anotherNewArr = () => {}; 
 const array = ['foo'.'bar'.'baz']; 
 for (const val in array) {
    console.log(val);   // foo bar baz newArr anotherNewArr 
 }Copy the code

const outerarr = ['a'.'b']outerarr.length // 3Copy the code

// forprint"a, undefined, b" 
for (leti = 0; i < outerarr.length; ++i) { console.log(outerarr[i]); } // for... Of the print"a, undefined, c"  
for(const i of outerarr) { console.log(i); } // for... In print"a,b"   
for(let i in outerarr) {
   console.log(i)   
} 

// forEach print"a,b"    
outerarr.forEach((val,index) =>{
    console.log(val)    
})Copy the code

Conclusion: the for… In and forEach prints do not print undefined, and empty elements in arrays are called “holes”. If you want to avoid this problem, consider disabling forEach:

parserOptions:
    ecmaVersion: 2018
rules:
    no-restricted-syntax:
        - error
        - selector: CallExpression[callee.property.name="forEach"]
          message: Do not use `forEach()`, use `for/of` insteadCopy the code

Conclusion:

Simply put, for/of is the most reliable way to iterate over a set of numbers. It’s cleaner than the for loop and doesn’t have as many weird exceptions as for/in and forEach(). The disadvantage of for/of is that we can’t fetch the index easily, and we can’t chain forEach().foreach ().

Reference: juejin. Cn/post / 684490…