如何在 JavaScript 中利用 Array.map() 对原始数组进行数据转换并生成新数组-java教程-PHP中文网

array.map() 是纯函数式操作，不修改原数组，返回等长新数组，支持三参数回调，适用于一对一映射，不适合过滤、中断、累积或原地修改。

如何在 javascript 中利用 array.map() 对原始数组进行数据转换并生成新数组

Array.map() 是 JavaScript 中最常用、最安全的数组转换方法之一。它不会修改原始数组，而是遍历每个元素，对每个元素执行你提供的函数，并将返回值**按顺序组成一个新数组**。

核心行为：不改变原数组，只生成新数组

这是 map() 最关键的特性：纯函数式操作。无论你在回调函数里做什么（只要不显式修改原数组），原始数组始终保持不变。

原始数组长度为 5，map() 返回的新数组也一定是长度为 5 的数组
即使回调函数返回 undefined 或 null，这些值也会如实进入新数组
如果想跳过某些元素，map() 不适合——应改用 filter() + map() 组合，或直接用 flatMap()

基础用法：单参数回调处理每个元素

最常见场景：对每个元素做简单计算或提取属性。

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] ← 原数组未变
<p>const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];
const names = users.map(user => user.name); // ['Alice', 'Bob']
</p>

进阶技巧：利用 map 的三个参数增强灵活性

map 的回调函数实际接收三个参数：currentValue、index、array。常用于需要位置信息或上下文的转换：

加序号或索引标识：如生成带编号的列表项
条件性转换：例如偶数位乘 2，奇数位减 1
访问原数组其他元素（谨慎使用，避免副作用）

const items = ['a', 'b', 'c'];
const withIndex = items.map((item, i) => `${i + 1}. ${item}`);
// ['1. a', '2. b', '3. c']
<p>const nums = [10, 20, 30, 40];
const mixed = nums.map((n, i) => i % 2 === 0 ? n * 2 : n - 1);
// [20, 19, 60, 39]
</p>