ES6中使用map处理嵌套数组时出现undefined问题求助

你的问题主要出在两个关键点上：

1. 变量名笔误 #

你定义了遍历结果为list1，但后续处理时写的是list.map——这里应该改为list1.map，不然会直接抛出list is not defined的错误，估计是你手滑打错了变量名。

2. 嵌套数组的访问逻辑错误 #

list1的每个元素是数组类型（比如[{ color: 'red' }]），而不是单个对象。当你直接访问details.color时，本质是在给数组对象读取color属性，数组本身没有这个属性，所以自然返回undefined。

针对不同场景的解决方案 #

场景一：每个details数组仅包含一个元素

如果能确定每个car.details里只会有一个颜色对象，直接访问数组的第一个元素即可：

const results = [ { id: 1, details: [ { color: "red" } ] }, { id: 2, details: [ { color: "blue" } ] }]
const list1 = results.map(car => car.details);
// 修正变量名 + 访问数组第一个元素的color属性
const list2 = list1.map(detailsArr => { 
  return { detail: detailsArr[0].color }; 
});

console.log(list1); // [[{ color: 'red' }], [{ color: 'blue' }]]
console.log(list2); // [{ detail: 'red' }, { detail: 'blue' }]

场景二：每个details数组可能包含多个元素

如果details里可能有多个颜色对象，想要把所有颜色都提取出来，可以用flatMap一步完成嵌套数组的展开与映射：

const results = [ 
  { id: 1, details: [ { color: "red" }, { color: "pink" } ] }, 
  { id: 2, details: [ { color: "blue" }, { color: "lightblue" } ] }
]
// flatMap会先展开嵌套数组，再对每个子元素做映射
const list2 = results.flatMap(car => {
  return car.details.map(detail => {
    return { detail: detail.color };
  });
});

console.log(list2); 
// 输出：[{ detail: 'red' }, { detail: 'pink' }, { detail: 'blue' }, { detail: 'lightblue' }]

也可以分两步处理，先扁平化嵌套数组再映射：

const list1 = results.map(car => car.details);
const flattenedDetails = list1.flat(); // 把嵌套数组展开为一维数组
const list2 = flattenedDetails.map(detail => {
  return { detail: detail.color };
});
// 结果和flatMap方案完全一致

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