如何使用JavaScript的.map()方法在数组元素前添加baby并输出

你的代码里有两个关键问题导致无法得到预期结果：

• 回调函数中，你在模板字符串里引用了整个animals数组，而不是当前遍历到的单个元素
• 参数命名为baby容易造成语义混淆，改成animal更直观

正确代码实现 #

const animals = ['panda', 'turtle', 'giraffe', 'hippo', 'sloth', 'human'];

// 完整写法
const babyAnimals = animals.map((animal) => {
  return `baby ${animal}`;
});

// 箭头函数隐式返回的简化写法（可选）
// const babyAnimals = animals.map(animal => `baby ${animal}`);

console.log(babyAnimals);
// 输出: ['baby panda', 'baby turtle', 'baby giraffe', 'baby hippo', 'baby sloth', 'baby human']

关键原理说明 #

.map() 方法的核心逻辑是：遍历原数组的每一个元素，对每个元素执行你传入的回调函数，将回调的返回值收集为一个新数组返回。回调函数的第一个参数就是当前正在处理的单个元素，你需要针对这个元素做拼接操作，而不是原数组本身。

内容的提问来源于stack exchange，提问作者helloworldio