js遍歷數據的方法總結：js中遍歷對象（5種）和遍歷數組（6種）

一、遍歷對象方法
 
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])
 
}
 
輸出結果:
 
key = name  value = yayaya
key = age  value = 12 
key = sex  value = female
key = contry  value = china 
key = pro1  value = function(){}
 
 
 
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])
 
});
 
輸出結果:
 
name yayaya
age 12 
sex female
contry china 
 
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])
 
});
 
輸出結果:
 
name yayaya
age 12 
sex female
country ccc
nation undefined
contry china 
 
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])
 
});
 
返回結果:
 
name yayaya
age 12 
sex female
country ccc
nation undefined
contry china 
 
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));
 
輸出結果:
 
name age sex country
 
二.遍歷數組方法
1.forEach
 
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
arr.forEach(function(value, index) {
 
  console.log('value=', value, 'index=', index);
 
})
 
輸出結果:
 
value=a index=0
value=b index=1
value=c index=2
value=d index=3
 
2.map
可以對遍歷的每一項做相應的處理,返回每次函數調用的結果組成的數組
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
arr.map(function(item, index, array) {
 
  console.log(item, index);
 
})
 
輸出結果:
 
a 0
b 1
c 2 
d 3
 
3.for循環遍歷
 
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
for (var i = 0; i < arr.length; i++) {
 
  console.log(i, arr[i])
 
}
 
輸出結果:
 
0 a
1 b
2 c
3 d
 
4.for...in
 
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
for (var i in arr) {
 
  console.log('index:', i, 'value:', arr[i])
 
}
 
輸出結果:
 
index:0 value:a
index:1 value:b
index:2 value:c
index:3 value:d
 
5.for...of(es6)
只遍歷出value,不能遍歷出下標,可遍歷出Symbol數據類型的屬性,此方法作為遍歷所有數據結構的統一的方法
 
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
for (var value of arr) {
 
  console.log('value', value)
 
}
 
輸出結果:
 
value a
value b
value c
value d
 
6.利用underscore插件
 
 
eg:
 
var arr = ['a', 'b', 'c', 'd'];
 
var _ = require('underscore');
 
_.each(arr, function(value, index, arr) {
 
  console.log(value, index, arr)
 
 
 
})
 
輸出結果:
 
a 0 ['a','b','c',''d]
b 1 ['a','b','c',''d]
c 2 ['a','b','c',''d]
d 3 ['a','b','c',''d]