js、jquery遍历数组和对象

1.遍历数组

  1.1   原生js有两种方法都可以使用

          方法一：for(var i;i<arr.length;i++){},

          方法二：for(var i in arr){}

  1.2   jquery有两个函数共计四种方法都可以使用

          方法一：$.each(arr,function(i,item){}),

          方法二：$(arr).each(function(i,item){}),

          方法三：$.map(arr,function(i,item){}),

          方法四：$(arr).map(function(i,item){})

 

2.遍历对象

  2.1   原生js有一种方法可以使用

          方法一：for(var i in obj){}

  2.2   jquery有两个函数共计两种方法可以使用

          方法一：$.each(obj,function(i,item){});

          方法二：$(obj).each(function(i,item){});

          方法三：$.map(obj,function(i,item){});

          方法四：$(obj).map(function(i,item){});

 

3.遍历数组代码

<script>
var arr=["a","b","c"];
// console.log("js遍历数组1");
for(var i=0;i<arr.length;i++){
    // 输出结果：0--a，1--b，2--c
    console.log(i+"--"+arr[i]);
}

// console.log("js遍历数组2");
for(var i in arr){
    // 输出结果：0--a，1--b，2--c
    console.log(i+"--"+arr[i]);
}

// console.log("jquery.each遍历数组");
$.each(arr,function(i,item){
    // 输出结果：0--a，1--b，2--c
    console.log(i+"--"+item);
});

// console.log("jquery.each遍历数组2");
$(arr).each(function(i,item){
    // 输出结果：0--a，1--b，2--c
    console.log(i+"--"+item);
});

// console.log("jquery.map遍历数组1，注意这里回调函数中第一个参数是元素，第二个是索引");
$.map(arr,function(i,item){
    // 输出结果：a--0，b--1，c--2
    console.log(i+"--"+item);
});

// console.log("jqery.map遍历数组2");
$(arr).map(function(i,item){
    // 输出结果：0--a，1--b，2--c
    console.log(i+"--"+item);
});
</script>

 

4. 遍历对象代码

<script>
    var obj={name:"xiaoming",age:20,addr:"tianminglu"};
    // console.log("js遍历对象")
    for(var i in obj){
        // 结果：name--xiaoming  age--20  addr--tianminglu
        console.log(i+"--"+obj[i]);
    }

    // console.log("jquery.each遍历对象1");
    $.each(obj,function(i,item){
        // 结果：name--xiaoming  age--20  addr--tianminglu
        console.log(i+"--"+item);
    });

    // console.log("jquery.each遍历对象2")
    $(obj).each(function(i,item){
        // 结果：0--[object Object]
        console.log(i+"--"+item);
    });

    // console.log("jquery.map遍历对象1，注意这里回调函数中第一个参数是元素，第二个是索引");
    $.map(obj,function(i,item){
        // 结果：xiaoming--name  20--age  tianminglu--addr
        console.log(i+"--"+item);
    });

    // console.log("jquery.map遍历对象2");
    $(obj).map(function(i,item){
        // 结果：0--[object Object]
        console.log(i+"--"+item);
    });
</script>

注意：
$.each(obj,function(i,item){})
$.map(obj,function(i,item){})
遍历对象时，这两种方法可以，另外两种方法不行

附加：
jquery中的each是用来遍历数组的而map则是用来映射生成一个新数组的
each方法中的return false相当于循环中的break,return true相当于循环中的continue
map方法中的return 相当于个新数组映射成的一个元素，没有return就相当于新的数组中忽略掉了这个元素

附加知识点： 

1.可以通过Object.values(obj1)，获取字典对象的值的列表，代码如下

<script>
    var str1 = '{ "name": "cxh", "sex": "man" }';
    var obj1 = $.parseJSON(str1);
    // 结果：object
    console.log(typeof(obj1))
    var arr = Object.values(obj1);
    // 结果：["cxh", "man"]
    console.log(arr)
</script>