JavaScript之10种遍历方法

1. for 循环

for循环语句，最基础的遍历，以数组的下标为索引，主要对数组元素进行遍历。

注意：for 循环不是函数，不存在返回值。

var arr = [1,2,'zhejiang',true];
    for(var i=0 ;i){
        console.log(arr[i])     // i=0 1 2 3
    }

2. for in

for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，

因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。

另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。

3. whild 和 do while 循环

    let cars=["BMW","Volvo","Saab","Ford"];
    let i=0;
    for(;cars[i];){
        console.log(cars[i]);
        i++;
    }


    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i]){
        console.log(cars[i] + "
");
        i++;
    };


    let j = 3;
    do{
        console.log(j);
        j--;
    }
    while(j>0)
    // 3
    // 2
    // 1

4. forEach

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

let arr = [11,22,33];
    arr.forEach(function(i,index,arr0){
        console.log(i); //数组每一项
        console.log(index);     //数组下标
        console.log(arr0);  //该遍历的数组 arr
    });

详细用法介绍：

// let arr = [11,22,33];
    /*arr.forEach(function(i,index,arr0){
        console.log(i); //数组每一项
        console.log(index);     //数组下标
        console.log(arr0);  //该遍历的数组 arr
    });*/

    // ES6 箭头函数写法
    // arr.forEach(res =>{
    //     console.log(res);   //数组每一项
    // });

    /*// 一个小例子：修改产品的数量随机,求出每个产品的总价
    var data=[
        {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
        {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
        {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
        {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
        {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
        {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
        {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
        {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
        {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
        {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
    ];
    data.forEach(function (item) {
        item.num=parseInt(Math.random()*9+1);
        item.sum=item.num*item.price;
    });
    console.log(data);*/


    /*// 修改数组中的每个值
    var arr=[1,2,4,6,7,8,5,9];
    arr.forEach(function (t,i,arr) {
        //  t++;     //错误
        //  arr[i]++;    //数组中每一项

        //  将所有偶数+1
        if(t%2===0){
            arr[i]++;
        }
    });
    console.log(arr);*/

5. for of (ES6)

for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历 对象
它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。

6. Array map()方法

map()与forEach相似,可以完成forEach的所有功能。

•  map() 返回一个新数组。
•  map() 不会对空数组进行检测。
•  map() 不会改变原始数组。

注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。

    //map()遍历
    /*var arr = [1, 2, 4, 6, 7, 8, 5, 9];
    arr.map(function (t) {
        console.log(t);     //1 2 4 6 7 8 5 9
    });*/

    /*// map()与forEach相似,可以完成forEach的所有功能
    var data = [
        {id: 1001, icon: "img/1.png", name: "餐饮0", num: 1, price: 10},
        {id: 1002, icon: "img/2.png", name: "餐饮1", num: 1, price: 20},
        {id: 1003, icon: "img/3.png", name: "餐饮2", num: 1, price: 30},
        {id: 1004, icon: "img/4.png", name: "餐饮3", num: 1, price: 40},
        {id: 1005, icon: "img/5.png", name: "餐饮4", num: 1, price: 50},
        {id: 1006, icon: "img/6.png", name: "餐饮5", num: 1, price: 60},
        {id: 1007, icon: "img/7.png", name: "餐饮6", num: 1, price: 70},
        {id: 1008, icon: "img/8.png", name: "餐饮7", num: 1, price: 80},
        {id: 1009, icon: "img/9.png", name: "餐饮8", num: 1, price: 90},
        {id: 1010, icon: "img/10.png", name: "餐饮9", num: 1, price: 100}
    ];
    data.map(function (item) {
        item.num = parseInt(Math.random() * 9 + 1);
        item.sum = item.num * item.price;
    });
    console.log(data);*/

    /*// 每个元素+1,返回给新数组
    var arr=[1,2,4,6,7,8,5,9];
    var arr1=arr.map(function (t) {
        return ++t;
    });
    console.log(arr,arr1);*/
    

    /*
   return 返回数据元素,到新数组中,如果不返回的数据就会变成undefined
    var arr=[1,2,4,6,7,8,5,9];
      arr=arr.map(function (t) {
          if(t%2===0){
              return t+1;
          }
          return t;      //如果没有这句，非奇数的返回为undefined
      });
       console.log(arr);*/


    /*  map() 和 forEach() 的区别
    *   forEach遍历当前数组,没有返回值,不会返回新数组
    *   map遍历当前数组,并且将当前数组中的元素返回给新数组,
    * 不使用return时,新数组的长度与原数组相同,但是每个元素都是undefined;
    * */

7. Array filter() 方法

filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。

filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

 8. Array some() 方法

some() 方法用于检测数组是否存在元素满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断,不改变原数组。

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// true

详细用法介绍：

9. Array every() 方法

every() 方法用于检测数组中是否所有元素都符合指定条件（通过函数提供），返回 boolen。

let arr = [1,2,3];
let tt = arr.every(function(i){
 return i>1;
})
// false

详细用法介绍：

// every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
// some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

    function isBigEnough(element, index, array) {
        return (element >= 10);
    }

    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    console.log(passed);

    //检查数组每一项 是否都是偶数
    function CheckIfEven(value, index){
        console.log(value);
        if(value % 2 == 0){
            return '偶数';        //回到函数的返回值没有必要非得是true本身，只要可以转换为true即可，对于false也是如此。
        }
    }
    let numbers=[2, 4, 5, 6, 8];

    if(numbers.every(CheckIfEven)){
        console.log("全都是偶数");
    }
    else{
        console.log("不全都是偶数");
    }

10. JQuery方法 $.each

each() 方法为每个匹配元素规定要运行的函数。JQuery的each方法既可以遍历数组，也可以遍历对象。在遍历对象时可以很容易获取对象属性名。

语法：jQuery.each(object, [callback])

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

示例1 遍历数组：

示例2 遍历对象

原生方法实现如下：

// 通过字面量方式实现的函数each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return 'Object';
                break;
            case Array:
                return 'Array';
                break;
            case NodeList:
                return 'NodeList';
                break;
            default:
                return 'null';
                break;
        }
    })();
    // 为数组或类数组时, 返回: index, value
    if(type === 'Array' || type === 'NodeList'){
        // 由于存在类数组NodeList, 所以不能直接调用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // 为对象格式时,返回:key, value
    else if(type === 'Object'){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

测试下：

数组类型：

对象类型：

类数组类型：

增加退出循环条件:

var obj= {name:'box', color: 'red', size:'big', number: '100',}
each(obj, function(i, v){
  if(i === 'color'){ 
    console.log('箱子的颜色是，'+v+'');
    return true;
  }
  if(i === 'size' && v=== 'big'){
    console.log('型号，数量符合收货');
    return false;
  }
  console.log(i + ': ' + v);
});