文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本篇文章基于《现代 JavaScript 教程》中文版中 映射到对象 一题展开系统讲解如何借助Array.prototype.map与箭头函数Arrow Functions把一组user对象转换为包含id与fullName的新对象数组。你将掌握map的完整语法与返回值语义、箭头函数表达式体与块体两种写法的区别以及为什么返回对象字面量时必须用圆括号包裹——这是实际开发中极易踩坑的高频问题。任务背景从一个对象数组生成另一个对象数组题目给出三个用户对象每个对象都包含name、surname与id三个字段let john { name: John, surname: Smith, id: 1 }; let pete { name: Pete, surname: Hunt, id: 2 }; let mary { name: Mary, surname: Key, id: 3 }; let users [ john, pete, mary ];目标是根据这个数组生成一个新数组usersMapped其中每个元素都是一个新对象只保留id并把name与surname拼接成fullName/* usersMapped [ { fullName: John Smith, id: 1 }, { fullName: Pete Hunt, id: 2 }, { fullName: Mary Key, id: 3 } ] */校验方式非常简单直接读取新数组第一个元素的属性alert( usersMapped[0].id ); // 1 alert( usersMapped[0].fullName ); // John Smith注意这里需要的是新数组即转换过程不得修改原数组users这与后面要讲的map的语义完全吻合。解法map回调中返回新对象Array.prototype.map是数组方法中最常用、最有用的方法之一。正如 数组方法 一章所总结的map(func)会对数组的每个元素调用func并把每次调用的返回值收集起来组成一个新数组。它的完整语法是let result arr.map(function(item, index, array) { // 返回新值而不是当前元素 })回调函数的三个参数中item是当前元素index是它的索引array是数组本身实际使用中通常只用得到item。本题的参考解法如下完整答案见 solution.mdlet usersMapped users.map(user ({ fullName: ${user.name} ${user.surname}, id: user.id }));这段代码逐条拆解users.map(...)对users中的每个对象调用回调回调的返回值组成新数组原数组users保持不变。user ({...})箭头函数接收当前用户对象user返回一个新对象字面量。**fullName: \${user.name} ${user.surname}**使用模板字符串Template Literals把name与surname用空格拼接成完整姓名等价于user.name user.surname。id: user.id把原对象的id字段透传到新对象中。补充map并不限定返回类型。这里返回的是对象本章其他练习 中映射到 names一题则只返回user.name这样的原始值let names users.map(user user.name)可见map既能做取值也能做重组对象。关键陷阱为什么返回对象必须加圆括号参考解法里有一个极易被忽略、却决定成败的细节——箭头函数体外的圆括号。如果不加代码会变成let usersMapped users.map(user { fullName: ${user.name} ${user.surname}, id: user.id });这段代码不会报语法错误但完全得不到预期结果。原因在于箭头函数的两种写法详见 箭头函数基础知识表达式体(...args) expression—— 右侧是一个表达式函数直接求值并返回其结果块体(...args) { body }—— 花括号表示函数体开始可以写多条语句但必须显式使用return才能返回内容。JavaScript 解析器看到user {时会把这里的{视为函数体的开始而不是对象字面量的开始。于是fullName: ...和id: ...会被当作块体内的标签语句labeled statement与表达式函数并不会返回任何对象usersMapped会是一个填充了undefined的数组。解决办法就是给对象字面量套一层普通圆括号()让解析器明确知道这里是一个表达式let usersMapped users.map(user ({ fullName: ${user.name} ${user.surname}, id: user.id }));或者也可以在块体内显式return效果完全等价let usersMapped users.map(user { return { fullName: ${user.name} ${user.surname}, id: user.id }; });两种写法中圆括号版本更简洁也是社区的主流写法显式return版本则在函数体包含多步逻辑例如先做校验再返回对象时更合适。扩展思考对象数组转换的常见组合拳掌握了map与箭头函数后可以顺势理解本章其他几个同族练习它们共同构成对象数组转换的完整工具箱映射为子集字段映射到 names 用map抽取单一字段得到纯字符串数组筛选 映射先用filter按条件筛选如users.filter(item item.id 3)再对结果map实现筛选后转换的两段式管道归约为单值或对象从数组创建键值对象 使用reduce把数组折叠为以id为键的查找表常用于处理服务端数据按字段排序按年龄对用户排序 用sort配合比较函数按age排序。其中根据现有对象数组派生新的展示型对象数组正是本题所代表的模式数据层保留原始字段展示层通过map生成fullName等派生字段这也是为什么题目强调要把name与surname拼成fullName放入新对象。总结map对数组每个元素调用回调收集返回值组成新数组不修改原数组回调返回对象字面量时箭头函数必须写成item ({ ... })用圆括号包裹避免{被解析为函数体若使用块体item { ... }则必须显式return对象fullName的拼接可用模板字符串${user.name} ${user.surname}完成语义清晰且支持任意表达式。本题完整可运行的代码位于 task.md 与 solution.mdmap方法的系统性讲解见 数组方法箭头函数语法基础见 箭头函数基础知识。建议在浏览器控制台或本地直接运行上述代码亲身体验加不加圆括号两种写法的差异这一步比任何解释都更能加深记忆。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐现代 JavaScript 教程实战用 Array.map 将对象数组映射为字段数组映射到 names任务详解现代 JavaScript 教程实战用 Array.map 将对象数组映射为字段数组映射到 names任务详解 本篇文章围绕现代 JavaScript文档教程前端用 map 与箭头函数将对象数组映射为对象数组括号陷阱与实战详解现代 JavaScript 教程 7-map-objects 题解用 map 与箭头函数将对象数组映射为对象数组括号陷阱与实战详解现代 JavaScript 教程 7 map objects 题解 本篇基于《现代 Jav文档教程前端Modern JavaScript Tutorial 实战用 Array.map 将用户对象数组映射为姓名数组Map to namesModern JavaScript Tutorial 实战用 Array.map 将用户对象数组映射为姓名数组Map to names 导读 本篇基于 M文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考