遍历方法总结

一、遍历数组

1、for循环

javascript原生方法

2、for in

javascript原生方法，但是当在数组的原型上拓展方法的时候，再执行for in，也会循环到拓展的方法，所以不太适合使用for in来遍历数组。

例：

Array.prototype.searchItem = function(value){//函数已被简化  
    return right;  
}  
var a = [1, 2, 3, 4];  
for(var i in a){  
    console.log(a[i]);  
}  
结果：
1  
2  
3  
4  
function (value){  
    return right;  
}   

3、forEach

其实这个数组的原型方法，兼容IE9及以上

demoArr.forEach(function(arg) {})

参数arg表示数组每一项的元素，实例如下

demoArr.forEach(function(val, index) {
    if (e == 'CSS3') {
        return;  // 循环被跳过
        // break;   // 报错
        // continue;// 报错
    };
    console.log(val, index);
})

具体有以下需要注意的地方

• 回调函数中有2个参数，分别表示值和索引，这一点与jQuery中的$.each相反
• forEach无法遍历对象
• forEach无法在IE8及以下中使用，firefox和chrome实现了该方法
• forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致
• 最重要的一点，可以添加第二参数，为一个数组，而且回调函数中的this会指向这个数组。而如果没有第二参数，则this会指向window。

var newArr = [];
demoArr.forEach(function(val, index) {
    this.push(val); // 这里的this指向newArr
}, newArr)

4、every

数组的原型方法兼容IE9及以上.

语法：array.every(function(currentValue,index,arr), thisValue)

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

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。
• every() 不会对空数组进行检测。
• every() 不会改变原始数组。

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
输出结果为:
false

例：数组求和

(function() {
    var sum = 0;
    function getSum(item, index, array) {
        sum += item;
        console.log(sum);
        return true;//由于every方法是会在遇到回调函数返回的第一个false时停止遍历所以需要始终返回true
    };
    arr.every(getSum);
    console.log("use every:sum = " + sum);
})();

5、some

数组的原型方法，兼容IE9及以上。

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。
• some() 不会对空数组进行检测。
• some() 不会改变原始数组。

实例
检测数组中是否有元素大于 18:

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
输出结果为:
true

例：数组求和

(function() {
    var sum = 0;
    function getSum(item, index, array) {
        sum += item;
        console.log(sum);
    };
    arr.some(getSum);
    console.log("use some:sum = " + sum);
})();

6、filter

数组的原型方法，兼容IE9及以上

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

filter() 不会对空数组进行检测。

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

实例
返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:
32,33,40
例：数组求和
(function() {
    var sum = 0;
    function getSum(item, index, array) {
        sum += item;
        console.log(sum);
    };
    arr.filter(getSum);
    console.log("use filter:sum = " + sum);
})();

7、map

数组的原型方法，兼容IE9及以上。

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

• map() 不会对空数组进行检测。
• map() 不会改变原始数组。

返回一个数组，数组中元素为原始数组的平方根:

var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
输出结果为:
2,3,4,5

例：数组求和

(function() {
    var sum = 0;
    function getSum(item, index, array) {
        sum += item;
        console.log(sum);
    };
    arr.map(getSum);
    console.log("use map:sum = " + sum);
})();

8、$.each(object,callback(index,domElement)

jquery方法，通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。

回调函数拥有两个参数：

• 第一个为对象的成员或数组的索引。
• 第二个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回例遍数组，同时使用元素索引和内容。

jQuery 代码:

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
}); false，其它返回值将被忽略。

9、$.map(arr|obj,callback(domElement,index))

jquery方法

jquery 代码:

$.map( [0,1,2], function(n){
  return n + 4;
});
结果:
[4, 5, 6]

each()返回的是原来的数组，并不会新创建一个数组。

map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

二、遍历对象

1、for循环

javascript原生方法

2、for in

javascript原生方法。

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

for in循环可以遍历原型上的属性和方法，所以如果你不希望原型上的方法也被遍历，可以用hasOwnProperty这一对象原型方法来判断。

Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

如果你想获取一个对象的所有属性,，甚至包括不可枚举的，请查看Object.getOwnPropertyNames。

3、$.each(object,callback(name,value))

jquery方法。

例遍对象，同时使用成员名称和变量内容。

jquery 代码:

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

4、$.map(arr|obj,callback(value,name))

三、遍历节点集合

1、for循环

javascript原生方法

2、for in

javascript原生方法。

因为domList并非数组，而是一个对象，只是因为其key值为0，1，2… 而感觉与数组类似，但是直接遍历的结果如下

var domList = document.getElementsByClassName('its');
for(var item in domList) {
    console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
//    ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

因此我们在使用for in 遍历domList时，需要将domList转换为数组

var res = [].slice.call(domList);
for(var item in res) {}

3、$.each(object,callback(index,domElement))

jquery方法。

$.each(DOMList,function(e,ele) {
    console.log(e,ele);lk
})

4、$(selecter).each(callback(index,domElement))

专门用来遍历DOMList

语法：$(selector).each(function(index,element))

$('.list li').each(function(i, ele) {
    console.log(i, ele);
    // console.log(this == ele); // true
    $(this).html(i);
    if ($(this).attr('data-item') == 'do') {
        $(this).html('data-item: do');
    };
})

• i: 序列值
• ele: 指当前被遍历的DOM元素
• this 当前被遍历的DOM元素，不能调用jquery方法
• $(this) == $(ele) 当前被遍历元素的jquery对象，可以调用jquery的方法进行DOM操作

5、$.map(arr|obj,callback(domElement,index))

$.map(DOMList,function(ele) {
    console.log(ele);
})

6、$(selecter).map(callback(index,domElement))

总结

$.map (element,index)

$.each (index,element)

$(selecter).each(index,element)

$(selecter).map(index,element)

注意： each返回的是原来的数组，并不会新创建一个数组。
map方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。