理解 map() 的核心作用:不可变转换
掌握 map() 的语法、参数与返回值
能够在实际开发中用于数据格式化、对象映射、字符串处理等场景
区分 map() 与 forEach()、filter() 等数组方法的使用边界
避免常见误区(如忽略返回值、误用于副作用操作)
map() 方法map() 是 ES5 引入的高阶函数,用于对数组中的每个元素执行一个转换函数,并返回一个全新数组,原数组保持不变。
核心特性:
不修改原数组
返回新数组
跳过空槽(empty slots)
必须有返回值(否则对应位置为
undefined)
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] — 原数组未变const newArray = arr.map((element, index, array) => {
// 返回新值
});示例:使用全部参数
const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.map((fruit, idx, arr) => {
return `${idx + 1}. ${fruit} (共 ${arr.length} 项)`;
});
console.log(result);
// [
// "1. apple (共 3 项)",
// "2. banana (共 3 项)",
// "3. cherry (共 3 项)"
// ]// 求平方根
const squares = [1, 4, 9, 16];
const roots = squares.map(Math.sqrt);
console.log(roots); // [1, 2, 3, 4]
Math.sqrt本身接受一个参数,可直接作为回调传入。
const users = ['Alice', 'Bob', 'Charlie'];
const userObjects = users.map((name, index) => ({
id: index + 1,
username: name,
isActive: true
}));
console.log(userObjects);
// [
// { id: 1, username: "Alice", isActive: true },
// { id: 2, username: "Bob", isActive: true },
// ...
// ]const word = "Coder";
// 将字符串转为字符数组并处理
const charsWithSuffix = Array.from(word).map(char => char + '!');
// 或使用 call(如原文示例)
// const charsWithSuffix = Array.prototype.map.call(word, char => char + '!');
console.log(charsWithSuffix); // ['C!', 'o!', 'd!', 'e!', 'r!']注意:字符串不是数组,但可通过
Array.from()或call使其兼容map。
const stringNumbers = ['10', '20', '30'];
// 转为整数
const integers = stringNumbers.map(str => parseInt(str));
console.log(integers); // [10, 20, 30]
// 更安全的方式(避免 parseInt 的进制陷阱)
const safeIntegers = stringNumbers.map(str => Number(str));提示:
parseInt('10', index)在map中可能因第二个参数(index)被误认为进制而报错,建议显式只传一个参数。
map() vs 其他数组方法错误用法示例(应避免)
// 错误:用 map 做副作用(无返回值)
arr.map(item => {
console.log(item); // 副作用
// 忘记 return → 新数组全是 undefined
});
// 正确:用 forEach
arr.forEach(item => console.log(item));const data = [1, 2, 3, 4, 5];
const result = data
.map(x => x * 2)
.filter(x => x > 5)
.map(x => `Number: ${x}`);
console.log(result); // ["Number: 6", "Number: 8", "Number: 10"]注意:map 本身是同步的
// map 不等待 Promise
const urls = ['url1', 'url2'];
const promises = urls.map(url => fetch(url)); // 返回 Promise 数组
// 配合 Promise.all 使用
Promise.all(promises).then(responses => {
// 处理所有响应
});以下代码输出什么?为什么?
const arr = [1, 2, 3];
const newArr = arr.map(parseInt);
console.log(newArr);如何使用 map() 将一个用户对象数组转换为仅包含 name 和 email 的新数组?