js 总结之数组的遍历方式

for

for通过数组中自带的索引进行数组元素的获取，这种方式可以支持break、continue、return的打断形式，

  var arr=[1,2,3,4,5,7];
       for(var i=0;i < arr.length;i++) {
       //通过索引进行数组元素的获取
        console.log(arr[i]);
        if(i===3){
        //使用break跳出当前循环，效果和return一样
            break
        } else if(i===2){
            continue
        }
       }

each()

• each()方法为每个匹配元素规定要运行的函数，遍历dom元素

语法：

$(selector).each(function(index,element)

html：
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    js:
        <script>
            var arr=["列表1","列表2","列表3"];
            $("li").each(function (index, element) {
                console.log(index, element);
                //可以用switch也可以用for
                // switch(index){
                //     case 0:
                //     $(this).text("列表1");
                //     case 1:
                //     $(this).text("列表2");
                //     case 2:
                //     $(this).text("列表3");
                // }
                for(var i=0;i<=arr.length;i++){
                    $(this).text(arr[index]);
                }
            })
        </script>

forEach

• forEach是一个方法，这个方法是在Array类的prototype上，所以所有的Array实例都有这个方法，forEach方法没有返回值，参数有两个。第一个参数为回调函数，另一个参数thisValue,这个参数是一个对象，作用在callBackFn函数中的this作用，如果不传，则默认为undefined.

---

1.forEach方法中的function回调有三个参数：
第一个参数item是遍历的数组内容，
第二个参数index是对应的数组索引，
第三个参数arr是数组本身
2.如果callbackFn是箭头函数，则传入的 thisValue 不起作用，因为箭头函数绑定的this是模块this

---

foreach 语法：

[ ].forEach(function(value,index,array){
//code something
});

 var arr=[1,2,3,4];
       var sum=0;
       arr.forEach(function(value,index,array){
           array[index] == value; //结果为true
           sum+=value;
       })
       console.log(sum); //结果为10

 var MyArr=[
           {id:1,name:'tian'},
           {id:2,name:'pei'},
           {id:3,name:'pei'}
       ]
       MyArr.forEach((item,index)=>{
           console.log(item.name);
           console.log(index);
       })

for in

• for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）

语法：

for( 变量 in 对象 ){
    执行代码
}

• "变量"用来指定变量，可以是数组元素，也可以是对象属性

 var MyArr=[
           {id:1,name:'guai'},
           {id:2,name:'guai'},
           {id:3,name:'xiong'}
       ]
      for( x in MyArr){
          console.log(x); // 0.1.2 输出index值
          console.log(MyArr[x].name); 
        //   MyArr[x] 取值为item
      }

for of

for in遍历是数组的索引（即健名），而for of遍历的是数组元素值

语法：

for(variable of iterable){
          //statements
      }

• variable 在每次迭代中，将不同属性的值分配给变量
• iterable 被迭代枚举其属性的对象

迭代示例：

• 迭代Array

let iterable = [10,20,30];
      for(let value of iterable){
        value += 1;
        console.log(value);
        // 11,21,31
      }

• 如果不想修改语句块中的变量，也可以使用const代替let

let iterable = [10,20,30];
      for(const value of iterable){
        console.log(value);
        // 10,20,30
      }

• 迭代 String

let iterable = 'boo';
     for (let value of iterable){
         console.log(value);
         // 'b' 'o' 'o'
     }

• 迭代TypeArray

 let iterable = new Uint8Array([0x00,0xff]);
        for (let value of iterable){
            console.log(value);
        }

map()

• map的用法跟forEach非常类似，参数跟forEach一样，一个回掉函数和一个this对象，区别在于map是有返回值的，返回一个新数组实例，在原有数组的基础上进行一些变换，得到一个新数组，原数组保留。

html：
 <button onclick="myFunction()">点我</button>
 <p id="demo"></p>
 js:
    var numbers=[4,6,9,16,25];
    function myFunction(){
        x=document.getElementById('demo')
        x.innerHTML = numbers.map(Math.sqrt);
    }

every() some()

• every()用于检测数组所有元素是否都符合指定条件：
  1.every一旦找到一个是false的就不往下走了，就直接返回false
  2.some 一旦找到一个true就不往下走了，就返回true
• 注意：every()不会对空数组进行检查 every()不会改变原始数组

var arr = [ 1, 2, 3, 4, 5, 6 ];
    arr.some( function( item, index, array ){
          console.log( 'item=' + item + ',index='+index+',array='+array );
           return item > 3;
    })