尧图网页设计  实战任务解析)
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇技术指南以 Modern JavaScript Tutorial本仓库1-js教程体系中的实战任务为核心讲解如何编写一个简洁的count(obj)函数来统计普通对象的属性数量。文章将完整还原任务要求、标准解法与配套测试用例并深入剖析Object.keys/Object.values/Object.entries三兄弟的底层行为包括它们与for..in一样会忽略 Symbol 键这一关键特性帮助读者理解为什么Object.keys(obj).length是最短且正确的答案。任务背景它属于哪一章本任务是 JavaScript 基础部分数据类型Data Types章节中 Object.keys, values, entries 一节的配套练习。该章节在讲完Map、Set、Array的迭代方法之后专门介绍普通对象的三个静态方法Object.keys(obj)—— 返回由对象所有键组成的数组Object.values(obj)—— 返回由对象所有值组成的数组Object.entries(obj)—— 返回[key, value]键值对数组。与Map的map.keys()这种实例方法语法不同普通对象必须用静态调用形式Object.keys(obj)且返回的是真正的数组而非可迭代对象。关于二者的差异章节中给出了清晰的对照表MapObject调用语法map.keys()Object.keys(obj)而不是obj.keys()返回值可迭代对象真正的数组任务原文count(obj)任务文件位于 02-count-properties/task.md要求如下编写一个函数count(obj)返回对象中属性的数量let user { name: John, age: 30 }; alert( count(user) ); // 2同时附带两条要求让代码尽可能短忽略 Symbol 类型的属性只统计常规属性P.S. 提示语。这是一个重要性标记为importance: 5的核心练习考察的正是Object.keys的使用与对Symbol 键被忽略这一语义的掌握。标准解法一行代码仓库中配套的标准解法位于 02-count-properties/_js.view/solution.js完整代码如下function count(obj) { return Object.keys(obj).length; }这个解法之所以是最短且正确的原理链条如下Object.keys(obj)返回一个包含对象自身可枚举字符串属性名的数组由于Object.keys与for..in一样会忽略以Symbol(...)为键的属性详见章节中的 warn 提示因此统计结果天然满足忽略 Symbol 属性的要求对数组取.length即为属性数量。需要说明的是Object.keys只统计自身的可枚举字符串属性不含原型链上的继承属性。对本题这样的普通字面量对象而言这恰好就是我们想要的行为。测试用例三种边界验证仓库为每个任务都提供了配套的 Mocha 测试本任务的测试位于 02-count-properties/_js.view/test.js共覆盖三个典型场景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空对象边界{}没有任何属性Object.keys({}).length为0这保证函数对空对象不报错Symbol 键忽略{ [Symbol(id)]: 1 }中唯一属性是 Symbol 键结果为0验证了任务 P.S. 中的核心要求。从源码结构看_js.view目录是任务的可运行视图其中solution.js为被测试的实现、test.js为断言脚本二者共同构成了读者可以在浏览器中直接运行的练习环境。深入理解为什么 Symbol 键被忽略任务 P.S. 特意强调忽略 symbolic properties这是本练习的隐藏考点。在 article.md 的 warn 提示中教程明确指出就像for..in循环一样Object.keys/Object.values/Object.entries会忽略使用Symbol(...)作为键的属性。通常这很方便。但如果我们也需要 Symbol 键那么有一个单独的方法Object.getOwnPropertySymbols(obj)返回只包含 Symbol 键的数组此外还有Reflect.ownKeys(obj)可以返回所有键。因此在实际开发中针对统计属性数量的需求要按场景选择需求场景推荐方法返回值示例只统计常规字符串属性Object.keys(obj).length字符串键的个数只统计 Symbol 属性Object.getOwnPropertySymbols(obj).lengthSymbol 键的个数统计全部自身属性含 Symbol 键Reflect.ownKeys(obj).length字符串键 Symbol 键的总数延伸练习Object.values 与求和同一个章节还包含一个姊妹任务 01-sum-salaries用Object.values和for..of循环求对象中所有薪水之和空对象返回0。其标准解法在 01-sum-salaries/solution.mdfunction sumSalaries(salaries) { let sum 0; for (let salary of Object.values(salaries)) { sum salary; } return sum; // 650 }教程还给出一种更精简的替代写法——Object.values配合数组的reduce方法function sumSalaries(salaries) { return Object.values(salaries).reduce((a, b) a b, 0); // 650 }这两个任务合在一起恰好演示了Object.keys与Object.values的典型组合用法前者用于获取结构信息键的个数后者用于遍历值做聚合计算。进阶技巧entries 与 fromEntries 组合变换章节中Object.entries的一个重要用途是配合Object.fromEntries对对象做数组化变换。例如把价格对象中的所有价格翻倍let prices { banana: 1, orange: 2, meat: 4, }; let doublePrices Object.fromEntries( Object.entries(prices).map(entry [entry[0], entry[1] * 2]) ); alert(doublePrices.meat); // 8这个三步走的模式Object.entries取出键值对数组 → 用数组方法map/filter变换 →Object.fromEntries还原为对象弥补了普通对象没有map、filter等数组方法的短板。熟悉它之后就能像处理数组一样对对象做任意链式变换这也是本练习所在章节的进阶价值所在。小结count(obj)的标准答案是一行代码Object.keys(obj).lengthObject.keys只返回自身可枚举的字符串键天然忽略 Symbol 键正好满足任务 P.S. 的要求仓库配套测试test.js覆盖常规计数、空对象、Symbol 忽略三种边界可用于验证实现的正确性如需统计 Symbol 键可改用Object.getOwnPropertySymbols如需统计全部键可改用Reflect.ownKeys同章节的Object.values/Object.entries分别擅长聚合求值与数组化变换配合Object.fromEntries可完成强大的对象处理链。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Lance Rust 核心开发规范代码风格、并发边界、API 设计与错误处理实战指南Lance Rust 核心开发规范代码风格、并发边界、API 设计与错误处理实战指南 导读 rust/CLAUDE.md https://link.gitco文档/教程前端Watch.JS基础使用教程实现JavaScript对象属性监听Watch.JS基础使用教程实现JavaScript对象属性监听 什么是Watch.JS Watch.JS是一个轻量级的JavaScript库它允许开发者监软件架构开发工具如何为ESP32 AI聊天机器人注入情感灵魂xiaozhi-esp32表情系统深度解析如何为ESP32 AI聊天机器人注入情感灵魂xiaozhi esp32表情系统深度解析 当冰冷的硬件设备遇上温暖的情感表达会发生什么奇妙的化学反应这正是x人工智能大模型语音交互助手嵌入式物联网智能硬件MCP 服务上一篇G-helper项目中的风扇控制与性能优化技术解析下一篇解决LazyVim缩进显示冲突mini.indentscope与indent-blankline协同配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Object.keys 统计 JavaScript 对象属性数量：count(obj) 实战任务解析
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇技术指南以 Modern JavaScript Tutorial本仓库1-js教程体系中的实战任务为核心讲解如何编写一个简洁的count(obj)函数来统计普通对象的属性数量。文章将完整还原任务要求、标准解法与配套测试用例并深入剖析Object.keys/Object.values/Object.entries三兄弟的底层行为包括它们与for..in一样会忽略 Symbol 键这一关键特性帮助读者理解为什么Object.keys(obj).length是最短且正确的答案。任务背景它属于哪一章本任务是 JavaScript 基础部分数据类型Data Types章节中 Object.keys, values, entries 一节的配套练习。该章节在讲完Map、Set、Array的迭代方法之后专门介绍普通对象的三个静态方法Object.keys(obj)—— 返回由对象所有键组成的数组Object.values(obj)—— 返回由对象所有值组成的数组Object.entries(obj)—— 返回[key, value]键值对数组。与Map的map.keys()这种实例方法语法不同普通对象必须用静态调用形式Object.keys(obj)且返回的是真正的数组而非可迭代对象。关于二者的差异章节中给出了清晰的对照表MapObject调用语法map.keys()Object.keys(obj)而不是obj.keys()返回值可迭代对象真正的数组任务原文count(obj)任务文件位于 02-count-properties/task.md要求如下编写一个函数count(obj)返回对象中属性的数量let user { name: John, age: 30 }; alert( count(user) ); // 2同时附带两条要求让代码尽可能短忽略 Symbol 类型的属性只统计常规属性P.S. 提示语。这是一个重要性标记为importance: 5的核心练习考察的正是Object.keys的使用与对Symbol 键被忽略这一语义的掌握。标准解法一行代码仓库中配套的标准解法位于 02-count-properties/_js.view/solution.js完整代码如下function count(obj) { return Object.keys(obj).length; }这个解法之所以是最短且正确的原理链条如下Object.keys(obj)返回一个包含对象自身可枚举字符串属性名的数组由于Object.keys与for..in一样会忽略以Symbol(...)为键的属性详见章节中的 warn 提示因此统计结果天然满足忽略 Symbol 属性的要求对数组取.length即为属性数量。需要说明的是Object.keys只统计自身的可枚举字符串属性不含原型链上的继承属性。对本题这样的普通字面量对象而言这恰好就是我们想要的行为。测试用例三种边界验证仓库为每个任务都提供了配套的 Mocha 测试本任务的测试位于 02-count-properties/_js.view/test.js共覆盖三个典型场景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空对象边界{}没有任何属性Object.keys({}).length为0这保证函数对空对象不报错Symbol 键忽略{ [Symbol(id)]: 1 }中唯一属性是 Symbol 键结果为0验证了任务 P.S. 中的核心要求。从源码结构看_js.view目录是任务的可运行视图其中solution.js为被测试的实现、test.js为断言脚本二者共同构成了读者可以在浏览器中直接运行的练习环境。深入理解为什么 Symbol 键被忽略任务 P.S. 特意强调忽略 symbolic properties这是本练习的隐藏考点。在 article.md 的 warn 提示中教程明确指出就像for..in循环一样Object.keys/Object.values/Object.entries会忽略使用Symbol(...)作为键的属性。通常这很方便。但如果我们也需要 Symbol 键那么有一个单独的方法Object.getOwnPropertySymbols(obj)返回只包含 Symbol 键的数组此外还有Reflect.ownKeys(obj)可以返回所有键。因此在实际开发中针对统计属性数量的需求要按场景选择需求场景推荐方法返回值示例只统计常规字符串属性Object.keys(obj).length字符串键的个数只统计 Symbol 属性Object.getOwnPropertySymbols(obj).lengthSymbol 键的个数统计全部自身属性含 Symbol 键Reflect.ownKeys(obj).length字符串键 Symbol 键的总数延伸练习Object.values 与求和同一个章节还包含一个姊妹任务 01-sum-salaries用Object.values和for..of循环求对象中所有薪水之和空对象返回0。其标准解法在 01-sum-salaries/solution.mdfunction sumSalaries(salaries) { let sum 0; for (let salary of Object.values(salaries)) { sum salary; } return sum; // 650 }教程还给出一种更精简的替代写法——Object.values配合数组的reduce方法function sumSalaries(salaries) { return Object.values(salaries).reduce((a, b) a b, 0); // 650 }这两个任务合在一起恰好演示了Object.keys与Object.values的典型组合用法前者用于获取结构信息键的个数后者用于遍历值做聚合计算。进阶技巧entries 与 fromEntries 组合变换章节中Object.entries的一个重要用途是配合Object.fromEntries对对象做数组化变换。例如把价格对象中的所有价格翻倍let prices { banana: 1, orange: 2, meat: 4, }; let doublePrices Object.fromEntries( Object.entries(prices).map(entry [entry[0], entry[1] * 2]) ); alert(doublePrices.meat); // 8这个三步走的模式Object.entries取出键值对数组 → 用数组方法map/filter变换 →Object.fromEntries还原为对象弥补了普通对象没有map、filter等数组方法的短板。熟悉它之后就能像处理数组一样对对象做任意链式变换这也是本练习所在章节的进阶价值所在。小结count(obj)的标准答案是一行代码Object.keys(obj).lengthObject.keys只返回自身可枚举的字符串键天然忽略 Symbol 键正好满足任务 P.S. 的要求仓库配套测试test.js覆盖常规计数、空对象、Symbol 忽略三种边界可用于验证实现的正确性如需统计 Symbol 键可改用Object.getOwnPropertySymbols如需统计全部键可改用Reflect.ownKeys同章节的Object.values/Object.entries分别擅长聚合求值与数组化变换配合Object.fromEntries可完成强大的对象处理链。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Lance Rust 核心开发规范代码风格、并发边界、API 设计与错误处理实战指南Lance Rust 核心开发规范代码风格、并发边界、API 设计与错误处理实战指南 导读 rust/CLAUDE.md https://link.gitco文档/教程前端Watch.JS基础使用教程实现JavaScript对象属性监听Watch.JS基础使用教程实现JavaScript对象属性监听 什么是Watch.JS Watch.JS是一个轻量级的JavaScript库它允许开发者监软件架构开发工具如何为ESP32 AI聊天机器人注入情感灵魂xiaozhi-esp32表情系统深度解析如何为ESP32 AI聊天机器人注入情感灵魂xiaozhi esp32表情系统深度解析 当冰冷的硬件设备遇上温暖的情感表达会发生什么奇妙的化学反应这正是x人工智能大模型语音交互助手嵌入式物联网智能硬件MCP 服务上一篇G-helper项目中的风扇控制与性能优化技术解析下一篇解决LazyVim缩进显示冲突mini.indentscope与indent-blankline协同配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考