JavaScript遍历对象方法总结，原来有这么多，你掌握了几种？ _JavaScript遍历

前言本篇内容将按照下图展开：

文章插图

遍历ObjectObject最常见的遍历方法方法就是使用 for...in... ，但其有一定的局限性，比如只能遍历可枚举属性。虽然Object无法直接使用 for循环和 forEach ，但是经过 Reflect.ownKeys /
Object.getOwnPropertyNames /
Object.getOwnPropertySymbols / Object.keys 等方法转换直接得到Object中key值的集合后，是可以通过 for循环和 forEach 来遍历的。

文章插图

比如现在有个对象，其中有3个属性，分别是可枚举属性、不可枚举属性和 Symbol属性

let person = {name : 'xiaoming'}person[Symbol('sex')] = 'man';Object.defineProperty(person, 'age', {value : 18,writable: true,configurable: false,enumerable: false})

使用for...in...遍历for(let key in person){console.log('key : ' + key + ' , value : ' + person[key]);}输出结果：

文章插图

使用Object.keys + for循环遍历

文章插图

使用Object.getOwnPropertyNames + for循环遍历

let names = Object.getOwnPropertyNames(person);for(let index = 0, length = names.length; index < length; index++){let key =names[index];let value = https://www.isolves.com/it/cxkf/yy/js/2021-04-27/person[key];console.log('key : ' + key + ' , value : ' + value);}

输出结果：

文章插图

使用Object.getOwnPropertySymbols + for循环遍历

let symbols = Object.getOwnPropertySymbols(person);for(let index = 0, length = symbols.length; index < length; index++){let key =symbols[index];let value = https://www.isolves.com/it/cxkf/yy/js/2021-04-27/person[key];typeof key === 'symbol' ? key = Symbol.prototype.toString.call(key) : '';console.log('key : ' + key + ' , value : ' + value);}

输出结果：

文章插图

使用Reflect.ownKeys + for循环遍历

let keys = Reflect.ownKeys(person);for(let index = 0, length = keys.length; index < length; index++){let key =keys[index];let value = https://www.isolves.com/it/cxkf/yy/js/2021-04-27/person[key];typeof key === 'symbol' ? key = Symbol.prototype.toString.call(key) : '';console.log('key : ' + key + ' , value : ' + value);}

输出结果：

文章插图

遍历Array遍历Array可以使用 for循环，也可以使用 for...in... 和 for...of... ，并且Array的原型中还有 forEach函数和 map函数可用来遍历Array对象。
测试数据：
【JavaScript遍历对象方法总结，原来有这么多，你掌握了几种？】let arr = ['item_1', 'item_2', 'item_3', 'item_4', 'item_5'];输出结果：

文章插图

使用for循环遍历for(let index = 0, length = arr.length; index < length; index += 1){console.log('index : ' + arr[index]);}输出结果：

文章插图

使用Array.prototype.forEach遍历Array.prototype.forEach.call(arr, (value) => {console.log('value : ' + value);})输出结果：

文章插图

使用Array.prototype.map遍历Array.prototype.map.call(arr, (value) => {console.log('value : ' + value);})输出结果：

文章插图

map方法会根据原数组中的每个元素调用函数后返回的数据创建一个新数组。
使用for...of...遍历for(let value of arr){console.log('value : ' + value);}输出结果：

文章插图

遍历Map遍历Map一般是两种，一是直接使用 for...of... 或者 Map.prototype.forEach ，二是通过 Map.prototype.entries / Map.prototype.keys / Symbol.iterator 获取Map对象的迭代器，再通过 for...of... 来遍历迭代器。