js 中常用的循环

参考文章：

1.js几种数组遍历方式以及性能分析对比

2.javaScript遍历对象、数组总结

首先是数组中可以使用的

1.for 循环

?

1 2 3

for (let i = 0; i < xxx.length; i++) {     ... }

　　最基本的循环工具，常用于数据循环。据说性能相当不错...

 

2. 优化版的 for 循环

?

1 2 3

for(let i = 0,len=arr.length; i < len; i++) {    ...   }

 　　使用变量将数组长度缓存起来，在数组较长的时候优化效果明显。因此，性能最优...

 

3.forEach

　　数组方法。

?

1 2 3

arr.forEach(function(value[,index,array]){ // index, array 参数可选     ... });

 　　适用于循环次数未知或者计算次数比较麻烦的情况。性能不如 for 。

　　另外，jquery 中还有一个 $.each() 方法，支持 数组 、 json对象 、 dom结构 的遍历。其 api 如下：

?

1 2 3

$.each(arr, function(index,element){     ... })

?

1 2 3

$.each(json1,function(key,value){  //遍历键值对     ... })

 　　这是 jquery each 的另外写法，多用于遍历元素。

?

1 2 3

$('domElement').each(function(index, val) { //第一个参数表示索引下标，第二个参数表示当前索引元素     ... })

 　　

　　需要注意的是 forEach 和 $.each 回调函数中参数的位置。

 

4.forEach 变种

?

1 2 3

Array.prototype.forEach.call(arr,function(el){     ... });

 　　由于forEach 是数组方法，对于非数组类型数据，通过这种方法可以让类似的数组(如 NodeList )拥有 foreach 功能。

　　性能弱于 forEach。

 

5.for ... in ...

?

1 2 3

for (var index in arr) {     ... }

　　遍历数组的效率最低。且此时参数 i 是 string 型，而不是普通 for 当中的 number 型。

　　另外，如果 Array 被扩充(原型上自定义了某些属性或者方法)，这些扩充也会被遍历出来，容易出错。详情移步 https://www.cnblogs.com/yang-C-J/p/6284038.html 。

 

6.for ... of ... (es 6 标准)

　　允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。不可遍历普通对象。

?

1 2 3

for (var val of iterable) {     ... }

　　for ... in ... 遍历 index，那么 for ... of ... 遍历 index 位置上的值。

　　性能好于 for ... in ... 但是任然比不上 for。

 

7.map

　　意如其字，映射，将原数组元素根据回调函数进行映射，不修改原数组，返回新数组。

?

1 2 3

var newArr = arr.map(function(Val,index,arr){     return 某一个规则 }）

 　　示例：

?

1 2 3 4 5 6 7

var data = [1, 2, 3, 4];   var arrayOfSquares = data.map(function (item) {   return item * item; });   alert(arrayOfSquares); // 1, 4, 9, 16

　　效率比不上 forEach 。

 

　　以上就是常用到的数组遍历的 api ，另外，es 6 还有一些 api：keys()，values()，entries()，它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历，如：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

for (let index of ['a', 'b'].keys()) {     console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) {     console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) {     console.log(index, elem); } // 0 "a" // 1 "b"

 

 

对象中的遍历

1.object.keys()

　　返回一个数组，值是对象的 keys ,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

?

1 2 3 4

var obj = {a:1,b:2,c:3} var keys = Object.keys(obj); console.log(keys) // ['a', 'b', 'c']

 

2.for...in...

　　同上

 

3.Object.getOwnPropertyNames(obj)

　　返回一个数组，值是对象的 keys ,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).