文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本练习来自现代 JavaScript 教程zh.javascript.infoObject.keysvaluesentries章节的配套任务02-count-properties。教程要求编写一个count(obj)函数返回对象属性数量并尽量使代码简短。本文以该任务为核心从 task.md 的任务定义出发结合仓库中真实存在的 solution.js 与 test.js讲解一行代码的解答思路、Object.keys的底层行为、Symbol 键与空对象的边界情况以及如何在测试用例中验证这些行为。读完本文你将掌握统计对象常规属性数量的标准写法并理解它背后的遍历约定与取舍。任务定义写一个最简的count(obj)原始任务见 task.md非常明确写一个函数count(obj)该函数返回对象中的属性的数量并试着使代码尽可能简短。let user { name: John, age: 30 }; alert( count(user) ); // 2任务还有一个重要附注P.S.忽略 Symbol 类型属性只计算常规属性。这实际上是对属性一词的精确定义这里的属性指以字符串为键的可枚举属性而不是对象上所有可枚举的键。这个限定直接决定了应该选用哪个 API也是本练习考察的重点之一。标准解答一行代码Object.keys(obj).length仓库中该任务的官方解答solution.js只有短短三行function count(obj) { return Object.keys(obj).length; }其核心就一句话属性的数量 Object.keys(obj)返回数组的长度。对应到任务示例let user { name: John, age: 30 }; Object.keys(user); // [name, age] Object.keys(user).length; // 2Object.keys(obj)返回一个包含该对象所有可枚举键的数组这正是 article.md 中对Object.keys的定义。数组自带length属性取.length即得到键的个数也就是属性的个数因此函数体压缩为一条return语句满足了代码尽可能简短的要求。原理拆解为什么是Object.keys而不是obj.keys()要真正理解这个一行解法需要回到 article.md 中讲的两点约定1. 调用语法是Object.keys(obj)而不是obj.keys()与Map、Set的map.keys()、set.keys()不同普通对象使用静态方法Object.keys(obj)。原因在于灵活性JavaScript 中对象是一切复杂结构的基础我们完全可能自定义一个data对象并实现自己的data.values()方法而此时仍然可以对它调用Object.values(data)两者互不干扰。同理即使对象上存在自定义的同名方法Object.keys依然可用。2. 返回值是真正的数组Map.keys()返回的是可迭代对象而Object.keys(obj)返回的是真正的数组对象这主要是历史原因。正是这个区别让我们可以直接访问其.length属性——如果返回值只是一个可迭代对象就无法这样一行取到数量还需要先展开成数组。3. 遍历约定与for..in一致Object.keys返回的键的遍历顺序与for..in循环一致。它返回的是键key的数组姊妹方法Object.values(obj)返回值的数组Object.entries(obj)返回[key, value]键值对数组let user { name: John, age: 30 }; // Object.keys(user) [name, age] // Object.values(user) [John, 30] // Object.entries(user) [ [name,John], [age,30] ]关键边界一Symbol 键被自动忽略任务要求忽略 Symbol 类型属性只计算常规属性而Object.keys恰好天生满足这个要求。article.md 明确提示就像for..in循环一样Object.keys/values/entries会忽略使用Symbol(...)作为键的属性。这一点在仓库的测试用例 test.js 中得到了直接验证it(ignores symbolic properties, function() { assert.equal( count({ [Symbol(id)]: 1 }), 0 ); });一个只含Symbol(id)键的对象count的结果是0——Symbol 键完全没有被计入。因此如果你的需求恰好是只统计字符串键属性Object.keys(obj).length就是最贴切的答案。补充如果确实需要把 Symbol 键也统计进来article.md 给出了两个标准 API 作为备选Object.getOwnPropertySymbols(obj)返回只包含 Symbol 类型键的数组Reflect.ownKeys(obj)返回所有键既包括字符串键也包括 Symbol 键。它们与Object.keys的差异正是本练习边界设计的核心知识点。关键边界二空对象返回 0另一个边界是空对象。测试同样覆盖了这种情况it(returns 0 for an empty object, function() { assert.equal( count({}), 0 ); });Object.keys({})返回空数组[]其.length为0因此count({})自然返回0无需额外编写if分支。这也是一行代码方案之所以简洁的原因之一——它天然处理了空对象边界。同章节姊妹题对比Object.values求属性总和同一个章节目录下还有一个姊妹任务 01-sum-salaries编写sumSalaries(salaries)用Object.values和for..of循环返回所有薪水的总和空对象返回0。function sumSalaries(salaries) { let sum 0; for (let salary of Object.values(salaries)) { sum salary; } return sum; // 650 }对比两者可以更清晰地理解三兄弟的分工需求使用的 API返回关键点统计属性个数Object.keys(obj).length数字键的数组长度求所有属性值之和Object.values(obj)数字遍历值并累加转换对象如价格翻倍Object.entriesObject.fromEntries对象键值对数组加工后转回对象第三个场景在 article.md 的转换对象一节有完整示例用Object.entries(prices).map(...)把价格翻倍再用Object.fromEntries转回对象。可以看出keys/values/entries 三兄弟 length/map/reduce 等数组方法共同构成了处理普通对象数据的标准工具箱先借Object.*把对象降维成数组再用数组方法加工必要时用Object.fromEntries还原。sumSalaries的官方解答还给出了更精简的reduce写法见 01-sum-salaries/solution.mdfunction sumSalaries(salaries) { return Object.values(salaries).reduce((a, b) a b, 0); // 650 }这与count的Object.keys(obj).length思路同源都是先转数组再用数组原生能力一步算完。用测试验证行为仓库中的真实断言仓库为每个练习都配备了基于 Mocha 风格的测试文件test.js以describe/it/assert组织完整覆盖了本任务的全部约定describe(count, function() { it(counts the number of properties, function() { assert.equal( count({a: 1, b: 2}), 2 ); }); it(returns 0 for an empty object, function() { assert.equal( count({}), 0 ); }); it(ignores symbolic properties, function() { assert.equal( count({ [Symbol(id)]: 1 }), 0 ); }); });三个断言分别锁定三个行为契约常规计数{a: 1, b: 2}有两个字符串键结果为2空对象{}结果为0忽略 Symbol 键{ [Symbol(id)]: 1 }结果为0。对照这三条断言Object.keys(obj).length的实现全部通过这也说明一行解法并非投机取巧而是与任务的语义约定精确对齐。小结统计对象常规属性的数量标准且最简的写法是Object.keys(obj).length见 solution.js。该写法成立的三层前提Object.keys返回真正的数组有.length、遍历约定与for..in一致、自动忽略 Symbol 键——分别对应 article.md 中的三处说明。空对象与 Symbol 键两个边界无需手写分支由 API 语义天然保证测试用例 test.js 即为验证依据。若需统计 Symbol 键可改用Reflect.ownKeys(obj)或Object.getOwnPropertySymbols(obj)姊妹任务 01-sum-salaries 展示了Object.values用于求和的同类思路。掌握对象 ↔ 数组的双向转换Object.keys/values/entries 数组方法 Object.fromEntries你就能用几行简洁代码处理绝大多数对象数据统计与转换需求。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐使用 Object.keys 统计 JavaScript 对象属性数量count(obj) 实战任务解析使用 Object.keys 统计 JavaScript 对象属性数量count obj 实战任务解析 本篇技术指南以 Modern JavaScript T文档/教程前端30 seconds of code 实战用 Object.keys() 与 forEach 迭代 JavaScript 对象自有属性30 seconds of code 实战用 Object.keys 与 forEach 迭代 JavaScript 对象自有属性 对象在 JavaScrip教程文档JavaScript 对象遍历实战Object.keys / Object.values / Object.entries 详解与 Map 对比JavaScript 对象遍历实战Object.keys / Object.values / Object.entries 详解与 Map 对比 本篇指南以文档/教程前端上一篇FlexSearch Resolver深入解析用and、or、not、boost构建复杂布尔搜索与结果加权下一篇Notepad-- 快速上手指南支持目录查找与文件对比的跨平台文本编辑器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考