数组的迭代方法

Array.forEach()

Array.map()          

Array.filter()

Array.reduce()

----------------------------------------------------------------------------------

Array.reduceRight()

Array.every()

Array.some()

Array.indexOf()

Array.lastIndexOf()

Array.find()

Array.findIndex()
 

forEach(callbackfn)

forEach() 方法用于调用数组的每个元素，将元素传递给函数。

• 参数说明：callbackfn 回调函数；该回调函数最多可以接收三个参数，分别是：value,index,arr

• 注意： forEach() 空数组是不会执行函数的  不能结束循环。

•       var arr = [10, 201, 301, 1000];
          var rst = arr.some(function (value,index,arr) {//value 数组中的每个元素
              console.log(value)
          });

• 注意：forEach不能被return打断

• map() 遍历数组；返回的结果会组成一个新的数组返回 ，数组中的元素为原始数组元素调用函数处理后的值。

• 注意： map() 不会对空数组进行检测。

  注意： map() 不会改变原始数组。

•    var arr = [53, 20, 430, 1];
           var arr0=arr.map(function(v){
               return v+10;
          })
           console.log(arr0);

  filter() 遍历数组;将数组中满足过滤条件的元素返回，组成新数组

• 注意： filter() 不会对空数组进行检测。

  注意： filter() 不会改变原始数组。

•    var arr = [10, 20, 30, 40, 100, 99];
          var arrx = arr.filter(function (v, i) {
              // console.log(v,i);
              return v > 60;//条件
          });
  
          console.log(arrx);

  arr.reduce(callbackfn,initvalue) 返回累加结果

• 参数说明：callbackfn 回调函数 initvalue 回调函数第一个参数的初始值

• 用法一：initvalue没有赋值，

  • 回调函数第一次执行的时候，第一个参数的值为数组的第一个元素，第二个参数的值为数组的第二个元素

  • 非第一次遍历，则回调函数的第一个参数为上一次累加的结果，第二个参数为当遍历的元素

  •    var arr=[11,22,55,200,300];
             //累加器
             var sum=arr.reduce(function (a, b) {
                // console.log(a, b);
                // return a+b;
                return a*b;
             });

    用法二：initvalue有初始值

  • 遍历时，回调函数的第一个参数为默认值，第二个参数为当前遍历的元素；依次类推

  •         let arr = [
                { id: 1, name: "李逵", age: 30 },
                { id: 2, name: "李四", age: 40 },
                { id: 3, name: "李鬼", age: 50 },
                { id: 4, name: "李某", age: 20 },
            ];
    
            let s = arr.reduce(function (s, item) {
                return s += ` <li><span>${item.id}</span>---- <span>${item.name}</span> --- <span>${item.age}</span></li>`
            }, '')