map()简介
map() 方法创建一个新数组，其中填充了对调用数组中每个元素调用所提供函数的结果。它是一种函数式编程技术，允许您将数组的每个元素转换为新元素，从而生成新数组而不修改原始数组。
语法
let newarray = array.map(function callback(currentvalue, index, array) {
// return element for newarray
}, thisarg);
或者，使用箭头函数：
let newarray = array.map((currentvalue, index, array) => {
// return element for newarray
});
参数
-
callback：生成新数组元素的函数，采用三个参数：
- currentvalue：当前正在处理的元素。
- index （可选）：当前元素的索引。
- 数组 （可选）：调用了数组映射。
- thisarg （可选）：执行回调时用作 this 的值。
返回值
一个新数组，每个元素都是回调函数的结果。
map() 的工作原理
- 不变性：map() 不会修改原始数组。
- 逐元素转换：将回调函数应用于每个元素。
- 返回一个新数组：将结果收集到一个新数组中。
示例
a.映射数字
示例：将数组中的每个数字乘以 2。
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); console.log(doubled); // output: [2, 4, 6, 8, 10]
b.变换字符串
示例：将字符串数组转换为大写。
const fruits = ['apple', 'banana', 'cherry']; const upperfruits = fruits.map(fruit => fruit.touppercase()); console.log(upperfruits); // output: ['apple', 'banana', 'cherry']
c.提取对象属性
示例：从对象数组中提取特定属性。
const users = [
{ id: 1, name: 'alice' },
{ id: 2, name: 'bob' },
];
const names = users.map(user => user.name);
console.log(names); // output: ['alice', 'bob']
d.映射对象数组
示例：转换数组中的每个对象。
const products = [
{ productid: 1, price: 100 },
{ productid: 2, price: 200 },
];
const discountedproducts = products.map(product => ({
...product,
price: product.price * 0.9,
}));
console.log(discountedproducts);
// output:
// [
// { productid: 1, price: 90 },
// { productid: 2, price: 180 },
// ]
map() 和 foreach() 之间的区别
-
地图()：
- 返回一个新数组。
- 当您想要转换每个元素并收集结果时使用。
-
foreach()：
- 返回未定义。
- 当您想要执行副作用（例如，记录日志、修改外部变量）并且不需要新数组时使用。
foreach() 示例:
const numbers = [1, 2, 3]; numbers.foreach(number => console.log(number * 2)); // output: 2, 4, 6
将 map() 与箭头函数结合使用
箭头函数提供了编写回调函数的简洁语法。
示例：
const numbers = [1, 2, 3]; const squared = numbers.map(n => n * n); console.log(squared); // output: [1, 4, 9]
typescript 中的 map()
typescript 为 javascript 添加了静态类型，这有助于在编译时捕获错误。
立即学习“Java免费学习笔记（深入）”；
95Shop可以免费下载使用，是一款仿醉品商城网店系统，内置SEO优化，具有模块丰富、管理简洁直观，操作易用等特点，系统功能完整，运行速度较快，采用ASP.NET(C#)技术开发，配合SQL Serve2000数据库存储数据，运行环境为微软ASP.NET 2.0。95Shop官方网站定期开发新功能和维护升级。可以放心使用！ 安装运行方法 1、下载软件压缩包； 2、将下载的软件压缩包解压缩，得到we
a.输入注释
您可以指定数组中元素的类型和返回类型。
示例：
const numbers: number[] = [1, 2, 3]; const strings: string[] = numbers.map((num: number): string => num.tostring()); console.log(strings); // output: ['1', '2', '3']
b.通用类型
您可以定义通用函数来处理任何类型。
示例：
function identitymap(array: t[]): t[] { return array.map(element => element); } const result = identitymap ([1, 2, 3]); console.log(result); // output: [1, 2, 3]
常见用例
- 转换数据：将数据从一种形式转换为另一种形式。
- 提取值：从对象中提取特定字段。
- 组合数据：根据现有数据创建新数组。
- 计算：对每个元素执行计算。
高级主题
a.将 map() 与其他数组方法链接
你可以将map()与其他数组方法链接起来，如filter()、reduce()等
示例：
const numbers = [1, 2, 3, 4, 5, 6]; const evendoubled = numbers .filter(n => n % 2 === 0) .map(n => n * 2); console.log(evendoubled); // output: [4, 8, 12]
b.处理异步操作
map() 不处理回调内的异步操作。如果需要执行异步操作，请考虑使用 promise.all() 和 map()。
示例：
const urls = ['url1', 'url2', 'url3'];
const fetchPromises = urls.map(url => fetch(url));
Promise.all(fetchPromises)
.then(responses => {
// Handle responses
})
.catch(error => {
// Handle errors
});
最佳实践
- 不要使用 map() 产生副作用：如果不需要新数组，请使用 foreach()。
- 避免修改原始数组：map() 不应改变原始数组或其元素。
- 返回值：确保你的回调函数返回一个值；否则，新数组将包含未定义的元素。
- 使用箭头函数来保持简洁：它们使您的代码更短且更具可读性。
结论
理解 map() 函数对于 javascript 和 typescript 中的有效数组操作至关重要。这是一种多功能方法，可让您干净高效地转换数据。记住map():
- 创建一个新数组。
- 对每个元素应用一个函数。
- 不修改原始数组。
通过掌握map()，您将编写更简洁、更实用的代码，从而获得更好的可维护性和可读性。
感谢您的阅读。如果你喜欢这个内容，请随时请我喝杯咖啡：
https://buymeacoffee.com/kellyblaire
