为什么此代码返回未定义值的数组以及其他值？

Question

我正在映射一个数组并使用switch语句来console.log一些字符串。它记录了所有字符串，但也记录了一个数组：[undefined, undefined, undefined]。我不确定为什么它会记录未定义值的数组。是因为map返回一个新的值数组，在这种情况下，我是从现有数组中删除值并将它们转换为字符串？

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  console.log(name + ' console!')
  switch (name) {
    case 'joe':
      console.log(name + ' is cool!');
      break;
    case 'paul':
      console.log(name + ' smells!');
      break
    case 'chris':
      console.log(name + ' is cheap!')
      break;
  }
})

console.log(statements);

Answer 1

.map接受一个数组并返回一个新数组，该数组由在原始数组的每个项上调用回调函数组成。你的回调函数没有返回任何东西，所以statements数组的计算结果为[undefined, undefined, undefined]。

.map在这里不合适，因为你不需要映射数组。请改用forEach，省略statements变量：

const arr = ['joe', 'paul', 'chris']

arr.forEach((name) => {
  console.log(name + ' console!')
  switch (name) {
    case 'joe':
      console.log(name + ' is cool!');
      break;
    case 'paul':
      console.log(name + ' smells!');
      break
    case 'chris':
      console.log(name + ' is cheap!')
      break;
  }
})

您还可以考虑完全避免使用switch，因为它不必要地冗长且容易出错 - 请使用对象：

const arr = ['joe', 'paul', 'chris']

const nameStrs = {
  joe: 'is cool',
  paul: 'smells',
  chris: 'is cheap'
};
arr.forEach((name) => {
  console.log(`${name} ${nameStrs[name]}`);
})

如果你确实想为数组中的每个项构建一个响应数组，那么除了记录值之外，还要使用.map并在回调结束时返回值：

const arr = ['joe', 'paul', 'chris'];

const nameStrs = {
  joe: 'is cool',
  paul: 'smells',
  chris: 'is cheap'
};
const statements = arr.map((name) => {
  const statement = `${name} ${nameStrs[name]}`;
  console.log(statement);
  return statement;
});
console.log(statements);

Answer 2

这是因为您没有从传递给map()的回调中返回任何内容。如果你想在函数的最后用is cool,...值return返回数组。

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  let res;
  switch (name) {
    case 'joe':
      res = name + ' is cool!';
      break;
    case 'paul':
      res = name + ' smells!'
      break;
    case 'chris':
      res = name + ' is cheap!';
      break;
  }
  console.log(res);
  return res;
})

console.log(statements);

Answer 3

您没有从函数返回任何内容，因此最后一行记录由map函数的回调构造的未定义元素数组。

Answer 4

您正在记录字符串而不是返回值。 map()期望返回值如下：

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  switch (name) {
    case 'joe':
      return name + ' is cool!';
    case 'paul':
      return name + ' smells!';
    case 'chris':
      return name + ' is cheap!';
  }
})

console.log(statements);