Flex遍历Object键和值示例代码|超详细实战代码直接复制

文章目录▼CloseOpen

• Flex里遍历Object键值对的3种核心场景，我帮你踩过坑了
  • 场景1：只需要Object的键名——别再用for…in遍历原型链了
  • 场景2：要遍历值？直接取键名对应的值不如用这个方法
  • 场景3：同时要键和值——最顺手的写法在这里
• Flex遍历Object的避坑指南：我踩过的3个坑，你别再掉进去
  • 坑1：忽略不可枚举属性——你定义的属性可能“隐身”了
  • 坑2：遍历数组用错方法——别用Object.keys()遍历数组
  • 坑3：原型链污染——如果扩展了Object.prototype，一定要小心
  • Object.keys()和for…in遍历键名有什么区别？
  • 为什么推荐用Object.values()直接获取对象的值？
  • Object.entries()能遍历对象的不可枚举属性吗？
  • 遍历数组时用Object.keys()合适吗？

其实Flex里处理Object遍历早有更高效的写法，我帮你整理了最常用的3种场景，连坑都帮你踩过了，直接照做就行。

Flex里遍历Object键值对的3种核心场景，我帮你踩过坑了

我做了5年前端开发，从电商商品属性到后台用户信息，遍历Object的场景没有1000次也有800次， 下来最常用的就是“要键名”“要值”“要键值对一起”这3种情况。每种都有对应的“懒人写法”，不用再写冗余的过滤代码。

场景1：只需要Object的键名——别再用for…in遍历原型链了

我之前做电商商品详情页时，要遍历商品属性的键名（比如“品牌”“规格”“产地”），一开始用for…in循环：

for (var key in productAttr) {
 if (productAttr.hasOwnProperty(key)) {
 console.log(key);
 }
}

写多了真的烦——每次都要加hasOwnProperty判断，生怕把原型链上的属性搞进来。直到后来查MDN文档（MDN文档）才发现，Flex里有个Object.keys()方法，直接返回对象自身可枚举的键名数组，不用再过滤原型链！

比如商品属性对象是var productAttr = { brand: '华为', spec: '128G', origin: '中国' };，用Object.keys(productAttr)直接得到['brand', 'spec', 'origin']——刚好是我们要的“属性名称”。而如果用for…in，要是原型链上有扩展的方法（比如Object.prototype.log），就会把“log”也遍历出来，导致下拉框多了个无关选项。

为什么Object.keys()更靠谱？因为它只取对象自身的可枚举属性——这才是业务场景里“键名”的真实含义。

场景2：要遍历值？直接取键名对应的值不如用这个方法

如果只需要Object的值，很多人会先取键名再循环取value：

var values = [];
Object.keys(productAttr).forEach(key => {
 values.push(productAttr[key]);
});

但其实Flex里有个更直接的方法——Object.values()，一步就能拿到值数组。我之前做用户积分统计时，要把所有用户的积分加起来，用Object.values(userScores).reduce((total, score) => total + score)，比之前的写法少了3行，而且读起来更顺：“取userScores的值，然后求和”，不用再绕一遍键名。

比如var userScores = { Alice: 80, Bob: 90, Charlie: 75 };，用Object.values(userScores)直接得到[80, 90, 75]——是不是比循环取键名再取值方便多了？

场景3：同时要键和值——最顺手的写法在这里

最常用的场景其实是“既要键又要值”——比如渲染用户信息表格时，要把键当表头（“姓名”“年龄”），值当内容（“张三”“25”）。我之前做后台管理系统的用户详情页时，一开始用Object.keys()遍历键，再对应取value：

Object.keys(userInfo).forEach(key => {
 var value = userInfo[key];
 // 渲染表头key，渲染内容value
});

后来发现Flex里有个Object.entries()方法，直接返回[key, value]的数组，写法更简洁：

Object.entries(userInfo).forEach(([key, value]) => {
 // 直接用key和value
});

比如var userInfo = { name: '张三', age: 25, gender: '男' };，用Object.entries(userInfo)得到[['name', '张三'], ['age', 25], ['gender', '男']]——遍历的时候直接解构出key和value，不用再写userInfo[key]，省了一步，也不容易出错。

为了让你更清楚这3种方法的区别，我做了个对比表格：

Flex遍历Object的避坑指南：我踩过的3个坑，你别再掉进去

说了这么多好用的方法，我也得跟你聊聊踩过的坑——这些坑我都是实打实花时间填过的，你别再掉进去。

坑1：忽略不可枚举属性——你定义的属性可能“隐身”了

我之前做权限控制模块时，用Object.defineProperty定义了一个hidden属性：

var obj = {};
Object.defineProperty(obj, 'hidden', {
 value: '秘密',
 enumerable: false // 默认是false
});

结果用Object.keys(obj)根本拿不到“hidden”——因为enumerable是false，这个属性是不可枚举的。后来查文档才知道，Object.keys()、Object.values()、Object.entries()都只遍历可枚举的属性。

如果你需要遍历不可枚举属性，得用Object.getOwnPropertyNames()——它会返回对象自身的所有属性（不管可不可枚举），但一般业务场景里很少用到，除非你在做框架或者工具类开发。

坑2：遍历数组用错方法——别用Object.keys()遍历数组

我见过有人用Object.keys()遍历数组：

var arr = [1,2,3];
Object.keys(arr).forEach(key => {
 console.log(arr[key]);
});

虽然能拿到结果，但数组有专门的遍历方法——forEach()、map()，比Object.keys()更顺手。比如arr.forEach(item => console.log(item))，直接遍历元素，不用处理索引。

Object.keys()返回的是数组的索引（字符串类型），比如arr = [1,2,3]，Object.keys(arr)得到['0','1','2']——虽然能用，但总不如数组自带的方法直观。

坑3：原型链污染——如果扩展了Object.prototype，一定要小心

如果你的项目里有扩展Object.prototype的情况（比如加了个全局的方法）：

Object.prototype.log = function() {
 console.log(this);
};

那用for...in遍历对象的时候，会把“log”也遍历出来——但用Object.keys()、Object.values()、Object.entries()就不会，因为它们只取对象自身的属性。

所以我 你，除非万不得已，别扩展Object.prototype——真要扩展的话，记得用Object.defineProperty加enumerable: false，避免污染原型链。

如果你按这些方法试了，比如用Object.entries()重构了之前的遍历代码，欢迎回来告诉我有没有省时间！或者你还有其他遍历Object的小技巧，也可以留言跟我分享，我帮你验证有没有坑～

我之前帮朋友做小超市的库存统计时，他要算所有商品的库存总量，一开始写的代码特绕——先拿Object.keys()把商品对象的键名（比如“矿泉水”“泡面”“火腿”）取出来，再用forEach循环着用键名查对应的库存数，最后累加。你想啊，本来就是要“把所有库存数加起来”，结果中间还得先处理一遍键名，写的时候要多敲三行代码不说，回头看的时候还得反应一下“哦，这步是在取键名，接下来才是拿库存”，特费脑子。

后来我让他换成Object.values()，直接一步拿到所有库存数的数组，再用reduce()求和——简直不要太爽。比如商品对象是{矿泉水:50,泡面:30,火腿:20}，Object.values()直接返回[50,30,20]，接着写个.reduce((total, num) => total + num)，当场就算出总库存是100。你看，这才是咱们本来要的“直接拿所有值来计算”啊！不用再绕键名的弯子，代码读起来像说话一样顺，别人接手的时候一看就懂“哦，这是在算总库存”。而且我之前用老方法时，还犯过键名拼错的错（比如把“矿泉水”写成“矿泉书”），导致库存数取错，查了半小时才找到问题；换成Object.values()之后，根本不用碰键名，自然就少了这种低级错误——反正能偷懒又不出错的方法，我肯定优先用啊！

Object.keys()和for…in遍历键名有什么区别？

Object.keys()只返回对象自身可枚举的键名数组，不会包含原型链上的属性；而for…in会遍历对象自身及原型链上的所有可枚举属性， 需要额外用hasOwnProperty()过滤原型链属性。业务场景中通常只需要对象自身的键名，所以Object.keys()更简洁可靠。

为什么推荐用Object.values()直接获取对象的值？

如果先通过Object.keys()取键名再循环取value，需要多一步“键名映射到值”的操作；而Object.values()能直接返回对象自身可枚举的值数组，代码更简洁（比如求和时用Object.values().reduce()一步完成），也更符合“直接取value”的业务意图。

Object.entries()能遍历对象的不可枚举属性吗？

不能。Object.entries()和Object.keys()、Object.values()一样，只遍历对象自身的可枚举属性。如果需要遍历不可枚举属性，可以用Object.getOwnPropertyNames()，它会返回对象自身的所有属性（无论是否可枚举），但一般业务场景很少用到。

遍历数组时用Object.keys()合适吗？

可以但不推荐。Object.keys()会返回数组的索引（字符串类型，比如[‘0′,’1′,’2’]），虽然能通过索引取到数组元素，但数组有更直观的遍历方法（如forEach()、map()），直接遍历元素本身，不需要处理索引，代码更简洁易读。