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

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]}`);
})

如果您 did 想要为数组中的每个项目构造一个响应数组，则除了记录日志记录的内容外，还应使用.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);