对象和数组的遍历方法

 

一、对象

Object.keys()：方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

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

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']　// 注意返回的顺序，键名为数值时会按照索引值升序返回

for...in：返回所有通过对象访问的，可枚举的属性，其中包含了实例中的属性和原型中的属性，hasOwnProperty返回的是实例中的可枚举属性，所以使用该方法会修改原型链上的数据，需要在修改的时候加上hasOwnProperty()的判断，以防止修改原型。

var obj = {'0':'a','1':'b','2':'c'};
for(var i in obj) {
     console.log(i,":",obj[i]);
}
// 0 : a
// 1 : b
// 2 : c

Object.getOwnPropertyNames(obj)：返回字符串数组，对象的可枚举和不可枚举属性的名称被返回

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

对象方法详细可见：https://blog.csdn.net/DepressedPrince/article/details/86541308

二、数组

for循环

var arr = [1,2,0,3,9];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}
// 使用变量，将长度缓存起来，避免重复获取长度
for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

forEach：理论上没有返回值，仅仅遍历数组，不对原数组进行修改。不能使用break语句中断循环，也不能使用return语句返回到外层函数。

var temp = arr.forEach(function(value,index){
　　console.log(value);
　　// do something....
})
console.log(temp);   // undefined (没有返回值)

for...in：对数组的每个元素遍历，可以正确响应break、continue和return语句 

for( let index in arr){
    console.log(arr[index]);　　　// index为元素的键值
}

for...of：对数组的每个元素遍历，可以正确响应break、continue和return语句 

for( let item of arr){
    console.log(item);　　　　　// item为元素的值
}

filter：对数据进行筛选，返回一个新的数组

// 对arr进行筛选，返回正数数组
var temp　=　arr.filter(function(value,index){
  return value > 0;          // 对数组的每一个元素进行判定，符合条件即返回为true的元素，推入新数组
})

map：遍历数组，并对每个元素进行回调函数的操作，返回的是新的数组

var temp　=　arr.map(function(value,index){
  console.log(value);  // value为元素的值，index为元素的下表即键值
  return value*value;           
})

数组的详细操作可见：https://blog.csdn.net/DepressedPrince/article/details/80463371