在 es6 中使用 map 映射嵌套数组答案

【问题标题】：Mapping nested arrays using map in es6在 es6 中使用 map 映射嵌套数组
【发布时间】：2018-09-29 13:17:17
【问题描述】：

我正在尝试使用 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 } ]

谁能帮我映射嵌套数组？

【问题讨论】：

你期望这是什么[ { detail: undefined }, { detail: undefined } ]？
你使用的是list.map，应该是list1.map(..., for list2
list 是什么？
使用应该使用list1而不是list。

标签： javascript arrays object ecmascript-6

【解决方案1】：

尝试关注

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);

【讨论】：

【解决方案2】：

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

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);

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

问题在于list2 内的每个details 的color properties 都嵌套在arrays 内。

要暴露他们：说arrays必须是flattened。

arrays 的Arrays 可以是flattened，简单地使用Array.prototype.concat() 和Function.prototype.apply() 就像这样：

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

请参阅下面的实际示例。

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

// Details.
const details = input.map(car => car.details)

// Colors.
const colors = [].concat.apply([], details).map(({color}) => ({detail: color}));

// Proof.
console.log('Details', details)
console.log('Colors', colors)

【讨论】：

【解决方案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);

【讨论】：

【解决方案6】：

您的代码的问题是：

list 中的错字。您想改用 list1。
在list1 中，details 是一个数组。所以需要根据索引来获取颜色。

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);

【讨论】：