Javascript 10种遍历方法

 JS遍历简述

对于数组，javascript有很多遍历的方法，for、for in、for of（ES6）、forEach、map、filter、every、some、Jquery的each等等。接下来通过一些例子来对比一下这些方法。示例均使用如下测试数据：

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

1. for 循环

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

示例：

function arrFor(arr) {
    try {
        var ret = '',
            st = performance.now();
        for (var k = 0; k < arr.length; k++) {
            ret += arr[k];
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for 总耗时：" + diff);
    } catch (e) {
        console.log("array for 报错了：" + e.message);
    }
}

 结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for 总耗时：1.7999999690800905

 结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array for 总耗时：0.6000000000000085

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

 2. for in

 for in循环不仅可以遍历数组，还可以遍历对象，但for in存在一些陷阱，比如它会在遍历完元素之后，还会对数组或对象的prototype中的属性进行遍历，所以，for in 更像是为对象遍历而设计的。

 示例： 

function arrForIn(arr) {
    try {
        var ret = '',
            st = performance.now();
        for (var k in arr) {
            ret += arr[k];
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for in 总耗时：" + diff);
    } catch (e) {
        console.log("array for in报错了：" + e.message);
    }
}

  

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：1.5999999595806003

 结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：0.7000000000000028

2.A 陷阱

在此，我们为数组做一点改动，在调用上面定义的 arrForIn 方法前先执行如下语句：

Array.prototype.name="this is a test";

结果(Google)：

abcdefghijklmnopqrstuvwxyzthis is a test
array for in 总耗时：2.299999992828816

 结果(IE11)：

abcdefghijklmnopqrstuvwxyzthis is a test
array for in 总耗时：0.5999999999999943

可以明显看到，打印出的字符串后面有 "this is a test"，这就是 Array.prototype.name 的值。也就是说，Array 的原型也参与了遍历，这就给后续的语句埋下了一个炸弹。

当然，针对这种情况，也是有解决办法的，可以使用对象的hasOwnProperty()方法来避免此问题，通过hasOwnProperty()方法筛选出的都是对象实例自身的属性，对于像上面这种从Array继承过来的属性，该方法将返回false。

修改：

function arrForIn(arr) {
    try {
        var ret = '',
            st = performance.now();
        for (var k in arr) {
            if (arr.hasOwnProperty(k)) {
                ret += arr[k];
            }
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for in 总耗时：" + diff);
    } catch (e) {
        console.log("array for in报错了：" + e.message);
    }
}

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：2.3999999975785613

对于数组的遍历，不提倡 for in。

2.B IE兼容性

示例：

function arrForIn(arr) {
    try {
        //解决IE9不支持performance
        if ((window.navigator.userAgent.indexOf("MSIE 9.0") >= 1) && window.performance) {
            window.performance.now = function () {
                return ((+new Date()) - performance.timing.navigationStart);
            }
        }
        var ret = '',
            st = performance.now();
        for (var k in arr) {
            ret += arr[k];
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for in 总耗时：" + diff);
    } catch (e) {
        console.log("array for in报错了：" + e.message);
    }
}

IE 10：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：0.5999999999999943

IE 9：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：1

  

 测试到IE9，都是支持的。 

3. for of (ES6)

ES6中引入了 for ... of 循环，以替代 for...in 和 forEach() ，允许对 Array(数组)、String(字符串)、Maps(映射)、Sets(集合)等可迭代的数据结构进行遍历。

function arrForOf(arr) {
    try {
        var ret = '',
            st = performance.now();
        for(var k of arr) {
            ret += k;
        }
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array for of 总耗时：" + diff);
    } catch (e) {
        console.log("array for of报错了：" + e.message);
    }
}

需要注意的是：

1、 for(var k of arr) 中的 k ，就是数组 arr 中的元素，而不是数组的下标。

2、 IE 不支持，Edge支持。

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for of 总耗时：2.3999999975785613

  

4. forEach

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

function arrForEach(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.forEach(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array forEach 总耗时：" + diff);
    } catch (e) {
        console.log("array forEach报错了：" + e.message);
    }
}

 结果(Google)： 

abcdefghijklmnopqrstuvwxyz
array forEach 总耗时：1.7000000225380063

  结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array forEach 总耗时：1

注意:

•  forEach() 对于空数组是不会执行回调函数的。
• 回调函数  function (v, k) 中的 k 是数组的下标，v 是数组元素值。
• IE9以下的版本不支持。

浏览器支持：

 5. map

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

function arrMap(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.map(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array map 总耗时：" + diff);
    } catch (e) {
        console.log("array map报错了：" + e.message);
    }
}

  

结果(Google)： 

abcdefghijklmnopqrstuvwxyz
array map 总耗时：1.5999999595806003

结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array map 总耗时：0.8000000000000114

  

 浏览器支持：

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

接下来看一下map处理的结果，先修改一下操作：

function arrMap(arr) {
    try
    {
        var newArr = arr.map(function(v, k) {
            return v + 0;
        });
        console.log(arr.join(','));
        console.log(newArr.join(','));
    }
    catch (e)
    {
        console.log("array map报错了：" + e.message);
    }
}

 输出结果

a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z
a0,b0,c0,d0,e0,f0,g0,h0,i0,j0,k0,l0,m0,n0,o0,p0,q0,r0,s0,t0,u0,v0,w0,x0,y0,z0

可以看出

• map()处理后不会改变原有数组
• 新数组与原数组的元素个数一致

 6. filter

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

function arrFilter(arr) {
    try {
        var ret = '',
            st = performance.now();
        arr.filter(function (v, k) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array filter 总耗时：" + diff);
    } catch (e) {
        console.log("array filter报错了：" + e.message);
    }
}

  

 结果(Google)： 

abcdefghijklmnopqrstuvwxyz
array filter 总耗时：1.6000000177882612

  

结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array filter 总耗时：0.5999999999999943

浏览器支持：

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

 接下来看一下filter处理的结果，先修改一下操作：

function arrFilter(arr) {
    try
    {
        var newArr = arr.filter(function(v, k) {
            return k > 10;
        });
        console.log("arr:" + arr.join(','));
        console.log("newArr:" + newArr.join(','));
    }
    catch (e)
    {
        console.log("array filter报错了：" + e.message);
    }
}

 结果(Google)： 

arr:a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z
newArr:l,m,n,o,p,q,r,s,t,u,v,w,x,y,z

• filter() 没有改变原始数组。
• filter() 返回的新数组是筛选后的结果。

 7. every

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

function arrEvery(arr) {
    try {
        var st = performance.now();
        var ret = arr.every(function (v, k) {
            return v.length > 1;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array every 总耗时：" + diff);
    } catch (e) {
        console.log("array every报错了：" + e.message);
    }
}

 结果(Google)： 

false
array every 总耗时：1.500000013038516

结果(IE11)：

false
array every 总耗时：0.5

  

浏览器支持：

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

 8. some

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

function arrSome(arr) {
    try {
        var st = performance.now();
        var ret = arr.some(function (v, k) {
            return v.length > 1;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("array some 总耗时：" + diff);
    } catch (e) {
        console.log("array some报错了：" + e.message);
    }
}

  

  结果(Google)： 

false
array some 总耗时：1.6999999643303454

  

 结果(IE11)：

false
array some 总耗时：1.1000000000000227

  

 浏览器支持：

 

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

9. JQuery方法 $.each

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

function jqueryEach(obj) {
    try {
        var ret = '',
            st = performance.now();
        $.each(obj, function(k, v) {
            ret += v;
        });
        console.log(ret);
        var diff = performance.now() - st;
        console.log("jquery each 总耗时：" + diff);
    } catch(e) {
        console.log("jquery each报错了：" + e.message);
    }
}

  结果(Google)： 

abcdefghijklmnopqrstuvwxyz
jquery each 总耗时：2.8999999922234565

 结果(IE11)：

abcdefghijklmnopqrstuvwxyz
jquery each 总耗时：0.6999999999999886

• 一般用法为：$(selector).each(function(index,element)) 或者 $.each(obj,function(index,element)) ；回调函数中 index 参数是 对象obj的属性名（或者 数组obj 的索引），element 参数是 具体的值。
• 执行 return true 相当于 continue;
• 执行 return false 相当于 break;

10. Object.keys.forEach

Object.keys.forEach() 主要是用于遍历对象，获取对象的属性名，对于遍历数组意义不大。

function objectKey(obj) {
    try
    {
        var ret = '',
            st = performance.now();
        Object.keys(obj).forEach(function(key, index, arr) {
            ret += obj[key];
        });
        //ES6写法
        //Object.keys(obj).forEach(k => {
        //    ret += obj[k];
        //});　
        console.log(ret);
        let diff = performance.now() - st;
        console.log("object key 总耗时：" + diff);
    }
    catch (e)
    {
        console.log("object key 报错了：" + e.message);
    }
}

  结果(Google)： 

abcdefghijklmnopqrstuvwxyz
object key 总耗时：1.799999998183921

 结果(IE11)：

abcdefghijklmnopqrstuvwxyz
object key 总耗时：1.1000000000000227

• Object.keys.forEach 在遍历时，回调函数的参数 key是属性名（对于数组，属性名和索引一一对应)，index 是keys数组的索引，arr是keys数组；所以在取值的时候还是用 obj[key]

以上列出了10种在js中用到的遍历方法，有些地方描述的不是特别清晰，可能还存在误人子弟的地方，如果有大佬发现了还望及时指出，自已发现了也会及时更新的。

对于遍历，可能还有其他办法，以后发现了会继续记录。

作者：乔二哥

加班码字不易    文章暂不允许私自转载，转载请在明显的地方标注文章出处。