Question

我正在尝试使用map来遍历嵌套数组。

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
})

const list2 = list.map(details => {
   return {
     detail: details.color
} 
});

console.log(list1);
console.log(list2);

List1显示正常：

[ [ { color: 'red' } ], [ { color: 'blue' } ] ]

然而，对于list2，我得到以下内容：

[ { detail: undefined }, { detail: undefined } ]

有人可以帮我映射嵌套数组吗？

Answer 1

尝试以下

＆＃13;

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
});

// assuming there was a typo here it should be list1
const list2 = list1.map(details => { 
   return {
     detail: details[0].color // details is an array
   } 
});

console.log(list1);
console.log(list2);

＆＃13;

Answer 2

您需要映射内部数组值并将它们连接到单个数组。

＆＃13;

var results = [{ id: 1, details: [{ color: "red" }] }, { id: 2, details: [{ color: "blue" }] }],
    list1 = results.map(({ details }) =>  details);
    list2 = list1.reduce(
        (r, details) => r.concat(details.map(({ color: detail }) => ({ detail }))),
        []
    );

console.log(list2);
console.log(list1);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

Answer 3

您使用的list变量名list1不正确，然后在map内需要访问每个details数组的对象list1 }：

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
})

const list2 = list1.map(details => {
   return {
     detail: details[0].color
} 
});

console.log(list1);
console.log(list2);

Answer 4

您的代码存在以下问题：

list中的错字。您想改用list1。
在list1中，details是一个数组。所以你需要在索引的基础上获得颜色。

＆＃13;

const results = [{
    id: 1,
    details: [{
      color: "red",
    }]
  },
  {
    id: 2,
    details: [{
      color: "blue",
    }]
  }
]

const list1 = results.map(car => car.details);
const list2 = list1.map(details => ({ detail: details[0].color }));
console.log(list1);
console.log(list2);

＆＃13;

Answer 5

You forgot the dynamic index of the array.    
const results = [
      {
          id: 1,
          details: [
              {
                    color: "red",
              }
          ]
      },
      {
          id: 2,
          details: [
          {
              color: "blue",
              }
          ]
      }]

      const list1 = results.map((car, i) => { 
        return car[i].details;
      })

      const list2 = list.map((details, i) => {
        return {
          detail: details[i].color
      } 
      });

      console.log(list1);
      console.log(list2);

Answer 6

问题是color中每个properties的{{1}} details都嵌套在list2中。

要公开他们：说arrays必须是arrays。

flattened的{{1}} Arrays可以arrays简洁地使用Array.prototype.concat()和Function.prototype.apply()，如下所示：

flattened

请参阅下面的实例。

＆＃13;

const flattened = [].concat.apply([], [[1, 2], [3, 4]]) // [1, 2, 3, 4]

＆＃13;

使用es6

6 个答案: