Javascript map()方法：index, return break continue, async callback

在这篇文章中，我们将仔细研究JavaScript中的map()方法。具体来说，我们将看看index参数，return，break和continue关键字，以及一个使用async回调函数async callback的例子。

1. 了解map()方法的基本原理

map()方法创建一个新的数组，其结果是对给定数组的每个元素应用一个函数。这使得转换或计算一个数组中的值变得很容易。它不会修改或操作现有的数组，因为它与不可变的数据类型一起工作，这也是函数式编程的基础。

map()方法是作为一个数组的方法被调用的，传递一个回调函数作为参数。回调函数对数组中的每个元素都被执行，返回的结果被放入一个新的数组中。

在代码中，执行语句[1, 2, 3].map(callback)等同于语句[callback(1), callback(2), callback(3)]。

我们来看看一些基本的用法。

const newArray = array.map(callbackFunction);

2. 与forEach(), filter(), and reduce()方法比较

map方法经常与其他数组方法一起使用，比如filter(), forEach(), 和reduce() 方法。每个方法都有不同的方式来处理数组，以达到特定的目的。

forEach()：遍历数组的所有元素并执行给定的回调函数。
reduce()：通过应用一个函数将数组中的值与当前值相结合，将数组中的值汇总成一个单一的值。
filter()：创建一个新的数组，只保留满足指定条件的元素。

更多细节请参见相应的文章。

3. map()方法和return, break, and continue关键字

基于函数式编程的map()方法的工作原理是遍历一个数组的所有元素并返回一个相同长度的新数组。正因为如此，它不支持使用break和continue关键字来暂停或恢复遍历。

然而，如果你不想对某个特定的元素做任何事情，你可以使用return关键字来返回当前元素的值。这与continue关键字类似。

在下面的例子中，如果元素值不是3，则使用return关键字来返回element本身，这样就保留了原来的元素值。

const array = [1, 2, 3, 4, 5];
 
const mappedArray = array.map((element) => {
  if (element === 3) {
    return element * 10; // Return transformed value
  }
  return element; // Return original value
});
 
console.log(mappedArray);
 
// Output: [1, 2, 30, 4, 5]

4. 在回调函数中使用索引和数组参数

map()方法的回调函数不仅提供了访问当前值的引用，还提供了访问任何索引和数组本身的引用。这使你可以定义一个更灵活的回调函数。

const numbers = [10, 20, 30, 40, 50];
 
numbers.map((number, index, array) => {
    return `Index: ${index}, Number: ${number}, Array: ${array}`
});
 
// Output:
// [
//   'Index: 0, Number: 1, Array: 1,2,3,4,5',
//   'Index: 1, Number: 2, Array: 1,2,3,4,5',
//   'Index: 2, Number: 3, Array: 1,2,3,4,5',
//   'Index: 3, Number: 4, Array: 1,2,3,4,5',
//   'Index: 4, Number: 5, Array: 1,2,3,4,5'
// ]

5. map()方法的应用实例

5.1. 转换一个数字数组

下面的例子使用map方法来创建一个新的数组，其中包含给定数字数组中每个元素的平方结果。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
 
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

5.2. 格式化一个字符串数组

这个例子通过将一个字符串数组的每个元素转换为大写字母来创建一个新的数组。

const words = ['hello', 'world', 'javascript'];
const uppercaseWords = words.map(word => word.toUpperCase());
 
console.log(uppercaseWords); // ['HELLO', 'WORLD', 'JAVASCRIPT']

5.3. 映射一个对象的数组

这个例子从一个对象数组的每个元素中提取一个特定的属性并创建一个新的数组。

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const userNames = users.map(user => user.name);
 
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

5.4. 在一个多维数组上使用map()方法

这个例子在一个多维数组上使用嵌套的Map方法。注意第2行中嵌套的Map方法。

const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const squaredMatrix = matrix.map(row => row.map(num => num * num));
 
console.log(squaredMatrix); // [[1, 4, 9], [16, 25, 36], [49, 64, 81]]

6. 异步回调：异步回调函数

你传递给map()方法的回调函数也可以被定义为异步的。异步函数主要用于避免中断主线程行为，如API调用、文件的I/O操作以及对Promise对象的操作。

如果你传递一个异步函数作为回调函数，map()方法的返回值将是一个Promise对象。因此，它必须与async await关键字一起使用，如下所示。

fetchUserData()是一个任意声明的API调用函数，被定义为异步的。 map方法，使用这个函数作为映射函数，管理多个Promise，all方法，管理多个Promise，可以输出从API收到的数据。从API收到的数据。

const fetchUserData = async (id) => {
  // Simulated async operation, fetching user data
  const response = await fetch(`https://api.example.com/users/${id}`);
  return await response.json();
};
 
const userIds = [1, 2, 3];
 
const getUserData = async () => {
  const userData = await Promise.all(userIds.map((id) => fetchUserData(id)));
  console.log(userData);
};
 
getUserData();

7. 使用map()时的常见陷阱

7.1. 防止回调函数返回一个值

map方法的回调函数所返回的值会成为新数组的一个元素. 如果回调函数没有返回一个值，新数组中的相应元素将被设置为undefined。所以在编写代码时，确保有一个返回值是很重要的。

const numbers = [1, 2, 3, 4, 5];
const wrongResult = numbers.map(num => { num * num });
 
console.log(wrongResult); // [undefined, undefined, undefined, undefined, undefined]

7.2. 处理数组中的空元素

如果一个数组中存在一个空元素，map方法将不执行该元素的回调函数。空元素的索引也会被保留在新创建的数组中，其值被设置为undefined。你应该了解这些特性，并在必要时明确实现对空元素的处理。

const sparseArray = [1, , , 4, 5];
const result = sparseArray.map(num => num * 2);
 
console.log(result); // [2, undefined, undefined, 8, 10]

7.3. 不要在map方法的回调函数中修改数组

在map()方法的回调函数里面修改原始数组是不好的做法。这样做会导致意外的行为，也会影响你代码的可读性和可维护性。相反，最好是根据需要创建一个新的数组，并保持原数组和新数组的独立性。

6. 最后的想法

当你在网络开发中需要进行数组转换时，JavaScriptmap()方法是你应该想到的第一个工具。这是一个你每天都可以使用的方法。如果你从这个预览中感受到了map()方法，请查看MDN官方文档 (opens in a new tab)以了解更多。

forEach()filter()