为什么 array.map 返回 undefined - Javascript

在 JavaScript 中，array.map() 是一个非常有用的数组方法，它用于创建一个新数组，新数组的元素是通过调用提供的回调函数来处理原始数组的每个元素得到的。然而，有时候我们可能会遇到 array.map() 返回 undefined 的情况，这可能会让开发者感到困惑。

原因

array.map() 返回 undefined 的原因通常是因为回调函数没有显式地返回任何值。回调函数应该对每个元素进行处理并返回一个新的值作为新数组的元素。如果回调函数没有返回值，那么默认情况下它会返回 undefined。

以下是一个示例代码片段，演示了 array.map() 返回 undefined 的情况：

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

const newNumbers = numbers.map((number) => {
  number * 2;
});

console.log(newNumbers); // 输出 [undefined, undefined, undefined, undefined, undefined]

在上面的例子中，回调函数没有使用 return 语句返回任何值，因此它返回 undefined，最终导致新数组的元素都是 undefined。

解决方法

要解决 array.map() 返回 undefined 的问题，我们需要确保回调函数始终返回一个值。这可以通过添加 return 语句来实现，以明确指定回调函数的返回值。

以下是修改后的示例代码片段，确保回调函数返回一个值：

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

const newNumbers = numbers.map((number) => {
  return number * 2;
});

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

在上面的例子中，回调函数使用 return 语句返回了每个元素乘以2的结果，这样就得到了一个正确的新数组。

简化写法

在 JavaScript 中，对于只包含一行返回语句的箭头函数，我们可以省略大括号和 return 语句。因此，对于简单的计算，我们可以使用更简化的写法：

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

const newNumbers = numbers.map(number => number * 2);

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

在上面的例子中，回调函数使用简化的箭头函数语法，并直接返回了每个元素乘以2的结果。

总结起来，array.map() 返回 undefined 的原因通常是由于回调函数没有显式地返回任何值。通过确保回调函数返回一个值，我们可以解决这个问题，并获得正确的新数组。