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循环语句，最基础的遍历，以数组的下标为索引，对数组元素进行遍历。

示例：

 1 function arrFor(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         for (var k = 0; k < arr.length; k++) {
 6             ret += arr[k];
 7         }
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array for 总耗时：" + diff);
11     } catch (e) {
12         console.log("array for 报错了：" + e.message);
13     }
14 }

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for 总耗时：1.7999999690800905

结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array for 总耗时：0.6000000000000085

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

2. for in

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

示例：

 1 function arrForIn(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         for (var k in arr) {
 6             ret += arr[k];
 7         }
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array for in 总耗时：" + diff);
11     } catch (e) {
12         console.log("array for in报错了：" + e.message);
13     }
14 }

结果(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。

修改：

 1 function arrForIn(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         for (var k in arr) {
 6             if (arr.hasOwnProperty(k)) {
 7                 ret += arr[k];
 8             }
 9         }
10         console.log(ret);
11         var diff = performance.now() - st;
12         console.log("array for in 总耗时：" + diff);
13     } catch (e) {
14         console.log("array for in报错了：" + e.message);
15     }
16 }

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for in 总耗时：2.3999999975785613

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

2.B IE兼容性

示例：

 1 function arrForIn(arr) {
 2     try {
 3         //解决IE9不支持performance
 4         if ((window.navigator.userAgent.indexOf("MSIE 9.0") >= 1) && window.performance) {
 5             window.performance.now = function () {
 6                 return ((+new Date()) - performance.timing.navigationStart);
 7             }
 8         }
 9         var ret = '',
10             st = performance.now();
11         for (var k in arr) {
12             ret += arr[k];
13         }
14         console.log(ret);
15         var diff = performance.now() - st;
16         console.log("array for in 总耗时：" + diff);
17     } catch (e) {
18         console.log("array for in报错了：" + e.message);
19     }
20 }

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(集合)等可迭代的数据结构进行遍历。

 1 function arrForOf(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         for(var k of arr) {
 6             ret += k;
 7         }
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array for of 总耗时：" + diff);
11     } catch (e) {
12         console.log("array for of报错了：" + e.message);
13     }
14 }

需要注意的是：

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

2、 IE 不支持，Edge支持。

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array for of 总耗时：2.3999999975785613

4. forEach

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

 1 function arrForEach(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         arr.forEach(function (v, k) {
 6             ret += v;
 7         });
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array forEach 总耗时：" + diff);
11     } catch (e) {
12         console.log("array forEach报错了：" + e.message);
13     }
14 }

结果(Google)：

abcdefghijklmnopqrstuvwxyz
array forEach 总耗时：1.7000000225380063

结果(IE11)：

abcdefghijklmnopqrstuvwxyz
array forEach 总耗时：1

注意:

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

浏览器支持：

5. map

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

 1 function arrMap(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         arr.map(function (v, k) {
 6             ret += v;
 7         });
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array map 总耗时：" + diff);
11     } catch (e) {
12         console.log("array map报错了：" + e.message);
13     }
14 }

结果(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() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

 1 function arrFilter(arr) {
 2     try {
 3         var ret = '',
 4             st = performance.now();
 5         arr.filter(function (v, k) {
 6             ret += v;
 7         });
 8         console.log(ret);
 9         var diff = performance.now() - st;
10         console.log("array filter 总耗时：" + diff);
11     } catch (e) {
12         console.log("array filter报错了：" + e.message);
13     }
14 }

结果(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。

 1 function arrEvery(arr) {
 2     try {
 3         var st = performance.now();
 4         var ret = arr.every(function (v, k) {
 5             return v.length > 1;
 6         });
 7         console.log(ret);
 8         var diff = performance.now() - st;
 9         console.log("array every 总耗时：" + diff);
10     } catch (e) {
11         console.log("array every报错了：" + e.message);
12     }
13 }

结果(Google)：

false
array every 总耗时：1.500000013038516

结果(IE11)：

false
array every 总耗时：0.5

浏览器支持：

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

8. some

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

 1 function arrSome(arr) {
 2     try {
 3         var st = performance.now();
 4         var ret = arr.some(function (v, k) {
 5             return v.length > 1;
 6         });
 7         console.log(ret);
 8         var diff = performance.now() - st;
 9         console.log("array some 总耗时：" + diff);
10     } catch (e) {
11         console.log("array some报错了：" + e.message);
12     }
13 }

结果(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中用到的遍历方法，有些地方描述的不是特别清晰，可能还存在误人子弟的地方，如果有大佬发现了还望及时指出，自已发现了也会及时更新的。

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

作者：乔二哥

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

Javascript 10种遍历方法

JS遍历简述

1. for 循环

2. for in

2.A 陷阱

2.B IE兼容性

3. for of (ES6)

4. forEach

5. map

6. filter

7. every

8. some

9. JQuery方法 $.each

10. Object.keys.forEach

西门子scl语言用法介绍(常用指令介绍)

欧洲汽车巨头 Stellantis CEO 唐唯实到访零跑总部，官微暗示合资公司“明天见”

最新文章

网上的流量卡用着怎么样_网上的流量卡可信吗(网上卖的流量卡)

网上的流量卡激活_网上的流量卡激活了不充值可以吗(流量卡激活和首充)

网上的流量卡测评_网上说的流量卡都很便宜是不是真的(29元的流量卡到底是坑还是真)

网上的流量卡注销违约金_流量卡注销会退钱吗(合约期内注销流量卡还要交违约金)

网上的流量卡注销_网上流量卡注销了充值的钱会退吗(怎么注销网上办的流量卡)

网上的流量卡正规吗移动_网上的流量卡正规吗移动套餐(19元的流量卡靠谱吗)

网上的流量卡是套路吗_网上流量卡的是不是真的(29元的流量卡到底是坑还是真)

蓝牙驱动怎么安装(蓝牙适配器驱动程序怎么安装不了)

网上的流量卡是否可靠_网上的流量卡真实吗(29元的流量卡靠谱吗)

wps字体文件夹在哪(wps字体在哪个文件夹银河麒麟)

最新评论

标签

关注我们么么哒！

Javascript 10种遍历方法

JS遍历简述

1. for 循环

2. for in

2.A 陷阱

2.B IE兼容性

3. for of (ES6)

4. forEach

5. map

6. filter

7. every

8. some

9. JQuery方法 $.each

10. Object.keys.forEach

西门子scl语言用法介绍(常用指令介绍)

欧洲汽车巨头 Stellantis CEO 唐唯实到访零跑总部，官微暗示合资公司“明天见”

最新文章

网上的流量卡用着怎么样_网上的流量卡可信吗(网上卖的流量卡)

最新评论

标签

关注我们 么么哒！

关注我们的公众号

关注我们么么哒！