跳到主要内容

JavaScript 数组映射

什么是数组映射？​

数组映射是JavaScript中的一种强大功能，它允许你以声明式的方式对数组中的每个元素应用转换，并创建一个包含结果的新数组。在JavaScript中，这主要通过内置的map()方法实现。与使用循环手动转换数组相比，map()方法让代码更简洁、更易读且更有表现力。

备注

map()方法不会修改原始数组，而是返回一个新数组，其中包含对每个元素应用回调函数后的结果。

map() 方法基础语法​

javascript
const newArray = array.map(function(currentValue, index, array) {
    // 返回转换后的元素
});

参数说明：

  • currentValue: 正在处理的当前元素
  • index: (可选) 当前元素的索引
  • array: (可选) 调用 map() 的数组

让我们看一个简单的例子：

javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
    return num * 2;
});

console.log(doubled); // 输出: [2, 4, 6, 8, 10]
console.log(numbers); // 原数组不变: [1, 2, 3, 4, 5]

使用箭头函数简化​

使用ES6箭头函数可以让map()方法的语法更简洁：

javascript
const numbers = [1, 2, 3, 4, 5];

// 箭头函数完整写法
const doubled = numbers.map((num) => {
    return num * 2;
});

// 单参数可以省略括号
const doubled2 = numbers.map(num => {
    return num * 2;
});

// 单行表达式可以省略花括号和return
const doubled3 = numbers.map(num => num * 2);

console.log(doubled3); // 输出: [2, 4, 6, 8, 10]

使用map()的常见场景​

1. 转换对象数组中的属性​

javascript
const students = [
    { name: '张三', score: 85 },
    { name: '李四', score: 92 },
    { name: '王五', score: 78 }
];

// 只提取学生姓名
const studentNames = students.map(student => student.name);
console.log(studentNames); // 输出: ['张三', '李四', '王五']

// 格式化学生信息
const formattedStudents = students.map(student => {
    return `${student.name}的分数是${student.score}分`;
});
console.log(formattedStudents);
// 输出: ['张三的分数是85分', '李四的分数是92分', '王五的分数是78分']

2. 处理字符串数组​

javascript
const words = ['hello', 'world', 'javascript'];

// 将每个单词首字母大写
const capitalizedWords = words.map(word => {
    return word.charAt(0).toUpperCase() + word.slice(1);
});
console.log(capitalizedWords); // 输出: ['Hello', 'World', 'Javascript']

3. 使用索引参数​

javascript
const letters = ['a', 'b', 'c', 'd'];

const indexedLetters = letters.map((letter, index) => {
    return `索引${index}: ${letter}`;
});
console.log(indexedLetters); 
// 输出: ['索引0: a', '索引1: b', '索引2: c', '索引3: d']

在JSX中使用map()​

如果你使用React，map()是渲染列表项的常用方法：

javascript
// React组件示例
function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} - ¥{product.price}
        </li>
      ))}
    </ul>
  );
}

实际应用案例​

案例1：格式化API数据​

假设你从API获取了一些用户数据，但需要在显示之前进行格式化：

javascript
// 从API获取的原始数据
const apiUsers = [
    { id: 1, first_name: "John", last_name: "Doe", email: "john@example.com" },
    { id: 2, first_name: "Jane", last_name: "Smith", email: "jane@example.com" },
    { id: 3, first_name: "Bob", last_name: "Johnson", email: "bob@example.com" }
];

// 格式化数据以便显示
const formattedUsers = apiUsers.map(user => {
    return {
        id: user.id,
        fullName: `${user.first_name} ${user.last_name}`,
        email: user.email,
        displayName: user.first_name.charAt(0) + user.last_name.charAt(0)
    };
});

console.log(formattedUsers);
/* 输出:
[
  { id: 1, fullName: 'John Doe', email: 'john@example.com', displayName: 'JD' },
  { id: 2, fullName: 'Jane Smith', email: 'jane@example.com', displayName: 'JS' },
  { id: 3, fullName: 'Bob Johnson', email: 'bob@example.com', displayName: 'BJ' }
]
*/

案例2：数据可视化前的数据转换​

假设你要为数据可视化处理销售数据：

javascript
const monthlySales = [
    { month: "1月", sales: 1000 },
    { month: "2月", sales: 1500 },
    { month: "3月", sales: 1200 },
    { month: "4月", sales: 1800 }
];

// 将销售额转换为百分比格式（相对于最大值）
const maxSales = Math.max(...monthlySales.map(item => item.sales));

const salesPercentages = monthlySales.map(item => {
    return {
        month: item.month,
        sales: item.sales,
        percentage: Math.round((item.sales / maxSales) * 100)
    };
});

console.log(salesPercentages);
/* 输出:
[
  { month: '1月', sales: 1000, percentage: 56 },
  { month: '2月', sales: 1500, percentage: 83 },
  { month: '3月', sales: 1200, percentage: 67 },
  { month: '4月', sales: 1800, percentage: 100 }
]
*/

map()方法与其他数组方法的组合​

map()方法经常与其他数组方法组合使用，形成数据处理管道：

javascript
const prices = [123.45, 67.89, 99.99, 45.55, 200];

// 先过滤出大于100的价格，然后格式化为人民币表示法
const formattedExpensivePrices = prices
    .filter(price => price > 100)
    .map(price => `¥${price.toFixed(2)}`);

console.log(formattedExpensivePrices); 
// 输出: ['¥123.45', '¥200.00']

map()与forEach()的区别​

初学者常常混淆map()和forEach()方法：

javascript
const numbers = [1, 2, 3, 4, 5];

// map() 返回新数组
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// forEach() 不返回任何值，仅执行操作
const result = numbers.forEach(num => num * 2);
console.log(result); // undefined
提示

使用map()当你需要转换数组并保存结果。 使用forEach()当你只想对每个元素执行操作但不需要返回值。

常见错误和最佳实践​

避免的错误：​

javascript
// ❌ 不要在map()中进行不必要的副作用操作
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => {
    console.log(num); // 不必要的副作用
    return num * 2;
});

// ❌ 不要使用map()仅为了副作用而不使用返回值
numbers.map(num => {
    doSomething(num); // 应该用forEach代替
});

// ❌ 不要在不需要返回值时使用map()
const newArray = numbers.map(num => {
    someGlobalVariable += num; // 不好的实践
});

最佳实践：​

javascript
// ✅ 保持map()函数纯净
const doubled = numbers.map(num => num * 2);

// ✅ 链式调用时保持可读性
const processedData = data
    .filter(item => item.active)
    .map(item => ({
        id: item.id,
        name: item.name.toUpperCase()
    }))
    .sort((a, b) => a.name.localeCompare(b.name));

性能考虑​

对于大型数组，map()的性能影响需要考虑：

javascript
const largeArray = Array(1000000).fill(0).map((_, i) => i);

// 避免嵌套的map操作
// ❌ 不推荐
const result1 = largeArray.map(x => x * 2).map(x => x + 1);

// ✅ 推荐
const result2 = largeArray.map(x => x * 2 + 1);

总结​

JavaScript的map()方法是处理和转换数组的强大工具。它提供了一种函数式编程方法，使你能够：

  • 创建包含转换后元素的新数组
  • 保持原始数组不变（不可变性）
  • 编写简洁易读的代码
  • 构建可组合的数据转换管道

掌握map()方法是迈向JavaScript高级编程的重要一步，它不仅提升代码质量，还可以简化复杂数据处理流程。

练习题​

  1. 将数组[1, 2, 3, 4, 5]中的每个数字转换为其平方。
  2. 将字符串数组["apple", "banana", "cherry"]转换为包含每个字符串长度的数组。
  3. 将对象数组[{id: 1, value: 10}, {id: 2, value: 20}, {id: 3, value: 30}]转换为id到value的映射对象。
  4. 创建一个函数，该函数接受一个数字数组和一个乘数，返回每个数字乘以该乘数后的新数组。
学习建议

尝试在实际项目中使用map()方法，尤其是处理API数据或准备UI显示数据时。将其与其他数组方法（如filter()、reduce()）结合使用，可以大大提高你处理数据的能力！