使用map()处理对象数组时无法访问新数组，报错musicData[i]未定义

错误原因 #

• 没必要在map回调里嵌套for循环，map本身就是用来遍历数组生成新数组的方法，多此一举还引入了bug。
• 循环条件用了i <= musicData.length，数组索引范围是0到length-1，当i等于数组长度时，musicData[i]就是undefined，直接触发报错。
• map的回调函数没有返回值，最终albumSalesStrings会是一个全为undefined的数组。

修正后的代码 #

const musicData = [
{ artist: 'Adele', name: '25', sales: 1731000 },
{ artist: 'Drake', name: 'Views', sales: 1608000 },
{ artist: 'Beyonce', name: 'Lemonade', sales: 1554000 },
{ artist: 'Chris Stapleton', name: 'Traveller', sales: 1085000 },
{ artist: 'Pentatonix', name: 'A Pentatonix Christmas', sales: 904000 },
{ artist: 'Original Broadway Cast Recording', 
  name: 'Hamilton: An American Musical', sales: 820000 },
{ artist: 'Twenty One Pilots', name: 'Blurryface', sales: 738000 },
{ artist: 'Prince', name: 'The Very Best of Prince', sales: 668000 },
{ artist: 'Rihanna', name: 'Anti', sales: 603000 },
{ artist: 'Justin Bieber', name: 'Purpose', sales: 554000 }
];

const albumSalesStrings = musicData.map(album => {
  return `${album.name} by ${album.artist} sold ${album.sales} copies`;
});

console.log(albumSalesStrings);

代码说明 #

• map遍历数组时，会把当前元素（每个专辑对象）传递给回调函数，直接访问对象的name、artist、sales属性即可。
• 使用ES6模板字符串（``）拼接内容，比传统的+号更简洁易读。
• 每个迭代返回格式化后的字符串，map会自动将这些结果收集为新数组，赋值给albumSalesStrings，完全满足需求。

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