五分钟掌握 TypeScript 的 .map() —— 五个最常用场景

为什么 .map() 如此重要？

在数组的三大高阶函数（map / filter / reduce）里，.map() 是最“优雅”的一个：
不改变原数组，而是通过映射规则返回一个新的数组。
这使得它天然契合函数式编程思想：无副作用、链式调用、易测试。

下面用 5 个最常见的实战场景，带你 5 分钟上手。

场景 1：数值变换（平方、折扣、汇率）

const prices = [100, 200, 300];
const discount20 = prices.map(p => p * 0.8); // [80, 160, 240]

要点

• 返回 新数组，prices 保持不变。

• 在 React / Vue 里渲染列表时，经常做一步“数值格式化”。

场景 2：对象 → UI 字符串（React / Vue 列表渲染）

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const listItems = users.map(u => (
  <li key={u.id}>{u.name}</li>
));

要点

• React 要求列表渲染必须加 key。

• .map() 直接返回 VNode 数组，模板简洁。

场景 3：数组 → 字典（索引映射）

把数组快速变成一个 对象/Map，方便 O(1) 查询。

const products = [
  { id: 10, title: 'Phone' },
  { id: 20, title: 'Laptop' }
];

const productMap = new Map(
  products.map(p => [p.id, p]) // -> [[10, {...}], [20, {...}]]
);

console.log(productMap.get(20)?.title); // Laptop

场景 4：多维数组扁平化（配合解构）

const matrix = [
  [1, 2],
  [3, 4]
];

const flat = matrix.map(row => row.map(cell => cell * 2)).flat(); // [2, 4, 6, 8]

// 或者一步到位
const flat2 = matrix.flatMap(row => row.map(cell => cell * 2)); // [2, 4, 6, 8]

要点

• flatMap 是 .map().flat() 的语法糖，Node 12+/现代浏览器都支持。

• 常用于树形结构 → 一维列表。

场景 5：异步并发 → Promise 数组结果

const urls = ['a.jpg', 'b.jpg'];

const loadImage = (url: string) =>
  fetch(url).then(r => r.blob());

const blobs = await Promise.all(urls.map(loadImage));
// blobs 依次保存了两张图片的 Blob

要点

• .map() 生成的是 Promise 数组，再用 Promise.all 并发等待。

• 在 Node 爬虫、前端预加载、批量接口请求中非常常见。

常见误区提醒

表格

复制

结语

记住一句口诀：
“只要你想把 A 数组变成同长度的 B 数组，先想 .map()。”

把它用顺手后，你会发现 80% 的数据转换都能一行搞定，代码瞬间简洁。
Happy mapping!