js 数组对象遍历

数组遍历

• 普通for循环及优化版（性能最好）

    var arr = [1, 2, 3, 5]
    for(var i = 0; i< arr.length; i++) {}
    //优化：长度缓存，避免重复获取，数组很大时优化效果明显
    for(var j = 0, len = arr.length; j< len; j++) {}
  

• ES5 的 forEach(性能比普通for还弱)

    arr.forEach(function(value, i) {})
  

  注意：forEach遍历数组需注意使用break不能中断循环，使用return也不能返回到外层函数。

• ES5的map遍历

   arr.map(function(value, index){ console.log(value) })
   //支持使用return
   var newArray = arr.map(function(value, index){ 
      console.log(value)
      return value * value
   })
  

• ES6的 for...of 遍历可迭代对象
  可迭代对象：Array 、Set、Map等；还支持类数组对象（DOM nodeList对象、String(只读类数组)、arguments）

    for(let i of arr) { console.log(i) }
  

补充PS：

类数组对象：含有length属性的json对象，且其他属性为正整数，并不具有数组的一些方法。但可以在类数组对象上应用数组的操作方法。

let objLikeArray = {
      0: 'aaa',
      1: 'bbb',
      2: 'ccc',
      length: 3 //必须属性
 }
Array.prototype.join.call(objLikeArray)
Array.prototype.slice.call(objLikeArray,1,2)
//string
var s = 'string'
console.log(s[2]) // 'r'
Array.prototype.join.call(s, ','); //s,t,r,i,n,g

对象遍历

• ES5的 for...in
  遍历对象自身的和继承的可枚举属性（不包含Symbol属性），不想遍历原型属性可使用hasOwnProperty方法

  let obj = {a:1,b:2,c:3}
  for(let key in obj）{
    console.log(key) // a b c
    console.log(obj[key]) // 1 2 3
  }
  
  

  for...in 也可遍历数组所有的可枚举属性（即数组索引），但不推荐使用for...in进行数组的遍历。

    let arr = [1,2,3]
    arr.name = 'sss' //可遍历自定义属性
    for(let item in arr）{ //
        console.log(item) // 0 1 2 name
    }
  

补充：

• ES5的Object.keys(obj) 返回一个数组，即对象自身的所有可枚举属性(不含继承的，也不含Symbol属性)

• ES5的Object.values(obj) 返回一个数组，即对象自身的所有可枚举属性值(不含继承的，也不含Symbol属性)

• Object.entries(obj) 返回一个数组，给定对象的所有可枚举的属性名和属性值组成的【属性名，属性值】键值对的数组

• Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（包括不可枚举属性，不含Symbol属性）

• Reflect.ownKeys(obj) 返回对象自身所有属性（包含不可枚举和Symbol属性）
  [Reflect: ES6出来的反射，可以理解为一个全局对象，上面直接挂载了对象的某些特殊方法]

• Object.hasOwnProperty（proName） 判断一个属性是否是对象自身的（不包含原型）

• proName in obj 判断一个属性是否是对象的（包含原型）