原生JS、jQuery 遍历方法总结

sunnylin 2019-06-27

一、原生JS: forEach()和map()遍历

共同点:

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

(1)、forEach() : 没有返回值

var arr = [12,23,24,42,1];
var res = arr.forEach(function (item,index,input) {
   input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(arr);//-->会对原来的数组产生改变;

(2)、map() : 有返回值,可以return出来

var arr = [1,2,3,4,5];
var res = arr.map(function (item,index,input) {
    return item * 10;
})
console.log(res);//-->[10,20,30,40,50];
console.log(arr);//-->[1,2,3,4,5];

二、jQuery $.each()和$.map()遍历

共同点:

即可遍历数组,又可遍历对象。

(1)、$.each():没有返回值.支持的匿名函数有2个参数:如果遍历的是数组,i为当前项的索引,n为数组中的当前项。如果遍历的是对象,k 是键,n 是值。

//数组:i为索引,n为值
$.each( [1,2,3,4], function(i, n){
     console.log( i + ": " + n );
});

//对象:k为键名,n为值
$.each( { name: "John", lang: "JS" }, function(k, n){
 console.log(  k + ": "+ n );
});

(2)、$.map():有返回值,可以return 出来。支持匿名函数有2个参数(和$.each()里的参数位置相反):数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。

//数组:n为值,i为索引
var arr=$.map( [0,1,2], function(n,i){
     return n + 4;
});
console.log(arr);

//对象:n为值,k为键名
$.map({"name":"Jim","age":17},function(n,k){
     console.log(k+":"+n);
});

相关推荐