js遍历数组的五种方法+对象的六种方法

方法+对象的六种方法"/>

js遍历数组的五种方法+对象的六种方法

 遍历对象： 

1.for...in
遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的     只能遍历出键值
2.Object.keys()
遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).
3.Objcet.getOwnPropertyNames()
输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性

4.Reflect.ownKeys()
返回对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

5. _.keys
用underscore插件的遍历方法只可以遍历出对象自身的可枚举属性

// 对象的遍历  五种
// 1.for...in
// 遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的
var obj = {'name': '小李','age': '18','sex': '男','nation': '地球',
};
Object.prototype.pro1 = function() {}; //在原型链上添加属性Object.defineProperty(obj, 'nation', {enumerable: false //不可枚举      【【遍历不出来】
})
obj.country = '中国';
for (var index in obj) {console.log('key=', index, 'value=', obj[index])
}
// --------------------------------------
// 运行结果：
// key= name value= 小李
// key= age value= 18
// key= sex value= 男
// key= country value= 中国
// key= pro1 value= [Function (anonymous)]    最后遍历原型链
// -------------------------------------------------------------
// 2.Object.keys()
// 遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).
var obj2 = {name: '小张',age: '18',sex: '女'
}
Object.prototype.pro2 = function() {}
Object.defineProperty(obj2, 'country', {enumerable: true,value: '德国' //设置为可枚举了
});
Object.defineProperty(obj2, 'nation', {enumerable: false
})
Object.keys(obj2).forEach(function(index) {console.log("index=", index, 'value=', obj2[index])})// 运行结果：//index= name value= 小张// index= age value= 18// index= sex value= 女// index= country value= 德国// ---------------------------------------------------------// 3. Objcet.getOwnPropertyNames()// 输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性
var obj3 = { 'name': "yayaya", 'age': '12', 'sex': 'female', 'Symbol(birth)': '19991010', };
Object.prototype.pro3 = function() {}
Object.defineProperty(obj3, 'country', {Enumerable: true,value: '法国'
});
Object.defineProperty(obj3, 'nation', {Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj3).forEach(function(index) {console.log(index, obj3[index])
});
// 运行结果：
// name yayaya
// age 12
// sex female
// Symbol(birth) 19991010
// country 法国
// nation undefined// ----------------------------------------------------
// 4.Reflect.ownKeys()
// 返回对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
Reflect.ownKeys(obj3).forEach(function(index) {console.log(index, obj3[index])
});// -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
// 5. _.keys
// 用underscore插件的遍历方法只可以遍历出对象自身的可枚举属性
console.log(_.keys(obj3));

二.遍历数组方法
1.forEach

2.map
可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组

3.for循环遍历

4.for...in

5.for...of(es6)
只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法

6.利用underscore插件

// 1.forEach
var arr = ['a', 'b', 'c', 'd']
arr.forEach(function(value, index, ) {console.log('index=', index, 'value=', value)})// 运行结果// index= 0 value= a// index= 1 value= b// index= 2 value= c// index= 3 value= d// -------------------------------------------// 2.map// 可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组
arr.map(function(item, index, array) {console.log(item, index);console.log(array)})// 运行结果：// a 0// [ 'a', 'b', 'c', 'd' ]// b 1// [ 'a', 'b', 'c', 'd' ]// c 2// [ 'a', 'b', 'c', 'd' ]// d 3// [ 'a', 'b', 'c', 'd' ]// --------------------------------------------------
// 3.for循环遍历
for (var i = 0; i < arr.length; i++) {console.log(i, arr[i])
}
// -------------------------------------------------
// 4.for...in
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数据类型的属性,此方法作为遍历所有数据结构的统一的方法
for (var value of arr) {console.log('value', value)
}
// 运行结果：
// value a
// value b
// value c
// value d
// ----------------------------------------------------------
// 6.利用underscore插件
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]