遍歷對象和數組的方法總結

一.遍歷對象方法

1.for...in
遍歷輸出的是對象自身的屬性以及原型鏈上可枚舉的屬性(不含Symbol屬性),原型鏈上的屬性最後輸出說明先遍歷的是自身的可枚舉屬性,後遍歷原型鏈上的

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型鏈上添加屬性
Object.defineProperty(obj, 'country', {
  Enumerable: true //可枚舉
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚舉
})
obj.contry = 'china';
for (var index in obj) {
  console.log('key=', index, 'value=', obj[index])
}

輸出結果:

2.Object.keys()
遍歷對象返回的是一個包含對象自身可枚舉屬性的數組(不含Symbol屬性).

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚舉
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

輸出結果:

3.Objcet.getOwnPropertyNames()
輸出對象自身的可枚舉和不可枚舉屬性的數組,不輸出原型鏈上的屬性

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚舉
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
  console.log(index, obj[index])
});

輸出結果:

4.Reflect.ownKeys()
返回對象自身的全部屬性,無論屬性名是Symbol或字符串,也不論是否可枚舉.

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚舉
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

返回結果:

5. _.keys
用underscore插件的遍歷方法只能夠遍歷出對象自身的可枚舉屬性

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚舉
})
obj.contry = 'china';
console.log(_.keys(obj));

輸出結果:

二.遍歷數組方法

1.forEach

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
  console.log('value=', value, 'index=', index);
})

輸出結果:

2.map
能夠對遍歷的每一項作相應的處理,返回每次函數調用的結果組成的數組

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
  console.log(item, index);
})

輸出結果:

3.for循環遍歷

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i < arr.length; i++) {
  console.log(i, arr[i])
}

輸出結果:

4.for...in

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
  console.log('index:', i, 'value:', arr[i])
}

輸出結果:

5.for...of(es6)
只遍歷出value,不能遍歷出下標,可遍歷出Symbol數據類型的屬性,此方法做爲遍歷全部數據結構的統一的方法

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
  console.log('value', value)
}

輸出結果:

6.利用underscore插件

eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
  console.log(value, index, arr)

})

輸出結果: