JavaScript进阶_01_映射的方法

1.数组map( )方法(最常用的数组映射)Arrary.protype.map( ) 是数组的内置方法用于对数组中的每个元素执行回调函数返回一个由回调函数结果组成的新数组不改变原数组核心作用将数组中的元素按规则 “映射” 为新元素语法:const newArray originalArray.map((currentValue, index, array) { // 处理逻辑返回映射后的值 return mappedValue; });参数对应关系:currentValue是当前正在处理的元素,index是当前元素的索引,Array是新数组包含每个元素映射后的结果// 示例1将数字数组映射为其平方值 const numbers [1, 2, 3, 4]; const squares numbers.map(num num * num); // squares 结果[1, 4, 9, 16] // 示例2将对象数组映射为指定属性的数组 const users [ { name: Alice, age: 20 }, { name: Bob, age: 25 } ]; const names users.map(user user.name); // names 结果[Alice, Bob] // 示例3结合条件映射根据状态返回中文描述 const rows [ { status: YTY }, { status: BJZ }, { status: FB } ]; const statusTexts rows.map(row { if (row.status YTY) return 编辑中; if (row.status BJZ) return 已保存; return 已发布; }); // statusTexts 结果[编辑中, 已保存, 已发布]2.对象映射表键 - 值对映射替代多条件判断当需要根据一个 “键” 快速查找对应的 “值”如状态码、类型转换等可以用普通对象作为映射表比 if-else 或嵌套三目更简洁、易维护。核心逻辑:对象的是需要判断的条件,值是映射后的结果,通过对象[键]直接获取结果示例:// 场景将状态码映射为中文描述替代嵌套三目 const statusMap { YTY: 编辑中, BJZ: 已保存, FB: 已发布, default: 未知状态 // 默认值 }; // 映射逻辑根据row.status取对应值无则用默认 const getStatusText (status) { return statusMap[status] || statusMap.default; }; // 使用 console.log(getStatusText(YTY)); // 编辑中 console.log(getStatusText(XXX)); // 未知状态对象映射表优势优势:第一个是新增/修改映射关系的时,只需要修改statusMap对象,无需改动逻辑代码,可读性远远高于多层嵌套的条件