JavaScript 嵌套映射（）

Question

我有一個數組：

const array = [
  {name: "abc", numbers:[1,2]},
  {name: "def", numbers:[3,4]}
];

我想使用.map()返回一個新數組，例如：

[
  {name:"abc", number:1},
  {name:"abc", number:2},
  {name:"def", number:3},
  {name:"def", number:4}
]

我應該怎么辦？

Answer 1

使用forEach而不是map會更高效。

正如@MohammadUsman 的好答案所示，必須先將 map 的map平，然后才能獲得所需的結果。 使用forEach （不返回任何內容），您可以直接將 append 到 output 數組：

 const data = [ { name: "abc", numbers: [1,2] }, { name: "def", numbers: [3,4] } ]; var result = []; data.forEach( ({ numbers, ...rest }) => numbers.forEach( n => result.push(Object.assign({number: n}, rest ))) ); console.log(result);

Answer 2

您可以使用.map()遍歷輸入數組，並使用Object.assign()生成新的 object，最后使用.flat()將數組展平以獲得所需的 Z78E6221F6393D1356681DB398F4。

 const data = [ { name: "abc", numbers: [1,2] }, { name: "def", numbers: [3,4] } ]; const result = data.map( ({ numbers, ...rest }) => numbers.map(n => Object.assign({number: n}, rest )) ).flat(); console.log(result);

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

Answer 3

您可以直接使用帶有新對象內部映射的Array#flatMap並獲取對象數組。

 const array = [{ name: "abc", numbers:[1, 2] }, { name: "def", numbers:[3, 4] }], result = array.flatMap(({ name, numbers }) => numbers.map(number => ({ name, number }))); console.log(result);

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

Answer 4

如果flatmap .reduce 在您的情況下它更快。 每個元素只進行一次迭代。

 const array = [ { name: "abc", numbers: [1, 2] }, { name: "def", numbers: [3, 4] }, ]; const results = array.reduce((r, item) => { r = r.concat(item.numbers.map((number) => ({ name: item.name, number }))); return r; }, []); console.log(results)

Answer 5

如果您准備使用 jquery，這是一個簡單的解決方案...

const array = [
               {name: "abc", numbers:[1,2]},
               {name: "def", numbers:[3,4]}
              ];

var newArray = [];
$.each(array, function(k,v){
  var strName = v.name;
    $.each(v.numbers, function(key,value){
        newArray.push({name: strName, number: value});
  });
});


console.log(newArray);