The difference and usage of JS for in loop and for of loop

1.for in

usage ： Used to traverse objects , Array and string key

The code is ：

  <script>
        var arr = [1,2,3,4,5,6];
        for(let Aarry in arr){
            console.log(Aarry);  // Get index   0,1,2,3,4,5,6
            console.log(arr[Aarry]);  // Get index corresponding value   1,2,3,4,5,6
            console.log(arr+arr); //  Can't participate in computation    Spliced  1,2,3,4,5,61,2,3,4,5,6
        }
    </script>

• for in The obtained subscript is of string type , Cannot participate in set operation
• The traversal order may not be in the internal order of the actual array
• Will traverse all enumerable properties of the array Including the prototype approach

    Array.prototype.method=function(){
              console.log("hellow");
          }
          Array.prototype.hes = " Hello "
          var arr = [1,2,3,4,5,6];
          for(let Aarry in arr){
              console.log(Aarry);  // Get index and enumerable properties   0,1,2,3,4,5,6 ,methods,hes
             
          }

•   Usually requires cooperation hasOwnProperty() Method to determine whether a property is an instance property of the object , To get the prototype object out of the loop .

 <script>
        Array.prototype.method=function(){
            console.log("hellow");
        }
        Array.prototype.hes = " Hello "
        var arr = [1,2,3,4,5,6];
        for(let Aarry in arr){
            if(arr.hasOwnProperty(Aarry)){
                console.log(Aarry);  // Get index   0,1,2,3,4,5,6  
            }
          
    
        }
    </script>

  Therefore, it is generally used for in Traversing objects instead of arrays

2.for of

usage ： Values used to iterate through arrays and strings   Can't traverse object

The code is ：

    <script>
        var obj = {
            name:" Zhang San ",
            age:"15",
            sex:" male "
        }
        for(let self of obj){
            console.log(self);// Report errors    Because the object does not have a traversable interface 
        }
    </script>

• If you have to traverse ordinary attributes It can be used for in loop Or built-in Object.keys() Method
• Object.keys() Get an array of object instance properties , Does not include prototype methods and properties

     var obj = {
            name:" Zhang San ",
            age:"15",
            sex:" male "
        }
        for(let self of Object.keys(obj)){
            console.log(self+":"+obj[self]); // 
        }
    </script>

however , I feel like I've done it many times

• Traversal array

    <script>
       var a = [1,2,3,4,5,6,7]
       for(let arr of a){
        console.log(arr); // Getting array value   Not subscript 
       }
    </script>

foreach Function can also do But it cannot appear in the function return countine break sentence however for of Sure

for in Traversing objects

for of Traversal array