Почему этот код возвращает массив неопределенных значений вместе с другими значениями?

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

Вы ничего не возвращаете из функции, поэтому в последней строке записывается массив неопределенных элементов, созданных обратным вызовом функции карты.

Answer 3

Это потому, что вы ничего не возвращаете из обратного вызова, переданного 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 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);