JavaScript 中 array.map() 的实战用法：数据转换、异步处理与 DOM 操作

2. 创建派生数组

相比于传统的 for 循环或嵌套回调，map() 结合 filter() 能让代码更优雅清晰。例如，从员工列表中筛选出年龄超过 30 岁的人并提取姓名和工资。

const employees = [
  { name: 'Alice', age: 25, salary: 70000 },
  { name: 'Bob', age: 32, salary: 80000 },
  { name: 'Charlie', age: 35, salary: 90000 },
  { name: 'David', age: 22, salary: 60000 }
];

const olderEmployees = employees
  .filter(employee => employee.age > 30)
  .map(employee => ({ name: employee.name, salary: employee.salary }));

console.log(olderEmployees);
// 输出：[{ name: 'Bob', salary: 80000 }, { name: 'Charlie', salary: 90000 }]

3. 链式调用

利用 map() 的返回值特性，可以方便地进行链式操作，如筛选、映射、排序一气呵成。

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: true }
];

const activeUserNames = users
  .filter(user => user.isActive)
  .map(user => user.name)
  .sort();

console.log(activeUserNames); // ['Alice', 'Charlie', 'David']

4. 异步数据流处理

当需要并发获取多个用户的详细信息时，可以在 map() 中发起 Promise 请求，最后用 Promise.all() 等待所有结果。

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

const fetchUserData = userId => new Promise(resolve => 
  setTimeout(() => resolve(`Data for user ${userId}`), 1000)
);

// 使用 map() 生成 Promise 数组
const fetchAllUserData = users.map(user => 
  fetchUserData(user.id).then(data => ({ ...user, details: data }))
);

Promise.all(fetchAllUserData).then(usersWithData => {
  console.log(usersWithData);
});

5. 复杂 API 请求梳理

如果数据分散在不同端点，可以用 map() 遍历端点列表发起请求，再汇总结果。

const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2'
];

const fetchDataFromApi = url => new Promise(resolve => 
  setTimeout(() => resolve(`Data from ${url}`), 500)
);

const fetchAllData = apiEndpoints.map(endpoint => 
  fetchDataFromApi(endpoint)
);

Promise.all(fetchAllData).then(allData => {
  console.log(allData);
});

6. DOM 操作

在渲染列表时，可以使用 map() 生成 DOM 节点，然后统一插入页面。注意性能优化，建议先构建文档片段再一次性追加。

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

const userList = document.getElementById('user-list');

// 生成列表项
const listItems = users.map(user => {
  const li = document.createElement('li');
  li.textContent = `User ${user.name}`;
  return li;
});

// 批量添加到 DOM
listItems.forEach(item => userList.appendChild(item));

7. 搜索和过滤

虽然 filter() 更适合纯过滤，但常配合 map() 使用，将过滤后的数据转换为前端展示所需的格式。

const products = [
  { id: 1, name: 'Apple', category: 'Fruits' },
  { id: 2, name: 'Banana', category: 'Fruits' }
];

const searchQuery = 'Apple';

const filteredProducts = products
  .filter(product => product.name.includes(searchQuery))
  .map(product => ({ id: product.id, name: product.name }));

console.log(filteredProducts);

总结

array.map() 是 JavaScript 中提升代码可读性和维护性的利器。相比传统循环，它能以更简洁的方式实现数据转换、派生数组构建及异步处理。掌握其核心在于理解函数式编程中的不可变性原则，避免副作用。在实际开发中，合理搭配 filter、reduce 和 Promise，能让数据处理流程更加直观高效。