“这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战”

前言

最开始常用的遍历是for（var i=0；i<index,i++）{},随着ctrl+v ，ctrl+c的技术不断提高，也开始使用for(let i in arr){}以及现在常用的arr.map((item,index)=>{}).

数组遍历常用方法

下边介绍数组中常见的循环方法，以及性能对比

for循环

`let arr = [1,2,3];`

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

console.log(i,arr[i])`

}

最简单的一种，也是使用频率最高的一种,但是还是有优化的空间

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

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

Array forEach 循环

let arr = [1,2,3];

arr.forEach(``function``(i,index){

    console.log(i,index)

})

// 1 0

// 2 1

// 3 2

使用频率较高，实际上性能比普通for循环弱. forEach循环，循环数组中每一个元素并采取操作，没有返回值，可以不用知道数组长度,他有三个参数，只有第一个是必需的，代表当前下标下的 value。

另外请注意，forEach 循环在所有元素调用完毕之前是不能停止的，它没有 break 语句，如果你必须要停止，可以尝试 try catch 语句，就是在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了，如果你经常用这个方法，最好自定义一个这样的 forEach 函数在你的库里。

Array map()方法

let arr = [1,2,3];

let temp = arr.map((item,index)=>{
//item 第一个元素值  //index 为索引
})

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。虽然用起来比较优雅，但实际效率还比不上foreach

对象遍历

for in

let obj = {name:'liu',age:'je'}
for(let i in obj){
 console.log(i,obj[i])
}
// name liu
// age je

for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value,当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。

另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。

for of(ES6新增)

ES6中，新增了for-of遍历方法。它被设计用来遍历各种类数组集合，例如DOM NodeList对象、Map和Set对象，甚至字符串也行。官方的说法是：

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

// for-of遍历数组，不带索引，i即为数组元素

for (let  i of arrTmp){

     console.log(i)

}

//输出 "value1" "value2" "value3"

 

// for-of遍历Map对象

let  iterable =  new  Map([["a", 1], ["b", 2], ["c" , 3]]);`

for  ( let  [key, value] of iterable) {

   console.log(value);
}

//输出 1 2 3

 

// for-of遍历字符串

let  iterable =  "china中国" ;

for  ( let  value of iterable) {

   console.log(value);

}

//输出 "c" "h" "i" "n" "a" "中" "国"

Object.keys()方法（低版本IE不兼容）

/****Object.keys()返回键名数组****/

//数组类型

let  arr = ["a", "b", "c"];

console.log(Object.keys(arr));

// (3) ['0', '1', '2']

 

`// 类数组对象`

let  anObj = { 100: ` `'a'` `, 2: ` `'b'` `, 7: ` `'c'`  `};

console.log(Object.keys(anObj));

// (3) ['2', '7', '100']

 

//一般对象

let  xyz = {z: "zzz" , x:  "xxx" , y:  "yyy"` };

console.log(Object.keys(xyz));

javascript原生遍历方法的建议用法：

用for循环遍历数组
用for-in遍历对象
用for-of遍历类数组对象（ES6）
用Object.keys()获取对象属性名的集合

js数组、对象遍历

前言