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

Posted 2023-02-22

【中文标题】在 es6 中使用 map 映射嵌套数组

【英文标题】：Mapping nested arrays using map in es6

【发布时间】：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。

【参考方案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);