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 = yayayakey = age value = 12 key = sex value = femalekey = 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 yayayaage 12 sex femalecontry 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 yayayaage 12 sex femalecountry cccnation undefinedcontry 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 yayayaage 12 sex femalecountry cccnation undefinedcontry 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.forEacheg:

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

输出结果:

value=a index=0value=b index=1value=c index=2value=d index=32.map可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组eg:

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

输出结果:

a 0b 1c 2 d 33.for循环遍历eg:

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

输出结果:

0 a1 b2 c3 d4.for...ineg:

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

输出结果:

index:0 value:aindex:1 value:bindex:2 value:cindex:3 value:d5.for...of(es6)只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法eg:

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

输出结果:

value avalue bvalue cvalue d6.利用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]

转载于:https://www.cnblogs.com/joe235/p/11585858.html

相关资源：JQuery遍历json数组的3种方法