js 中常用的循环

参考文章：

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

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

首先是数组中可以使用的

1.for 循环

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

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

2. 优化版的 for 循环

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

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

3.forEach

　　数组方法。

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

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

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

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

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

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

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

 　　

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

4.forEach 变种

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

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

　　性能弱于 forEach。

 

5.for ... in ...

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（集合）等可迭代的数据结构等。不可遍历普通对象。

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

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

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

7.map

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

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

 　　示例：

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()是对键值对的遍历，如：

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属性).

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属性,但是包括不可枚举属性).