使用 Array.map()，從 key:value 對象數組中提取值

Question

我已經能夠使用以下代碼從對象數組中提取特定鍵列表的值。

let keys = ['name', 'age'];
let employees = [
  {name: 'Matt', employeeID: 123, performance: 'good', age: 21},
  {name: 'Brian', employeeID: 321, performance: 'average', age: 32},
  {name: 'David', employeeID: 456, performance: 'best', age: 35},
  {name: 'Kevin', employeeID: 654, performance: 'poor', age: 38},
  {name: 'Barrack', employeeID: 789, performance: 'super', age: 47},

];

let extracted = employees.map(object => keys.map(element => object[element]));
console.log(extracted); //result is [[Matt, 21.0], [Brian, 32.0], [David, 35.0], [Kevin, 38.0], [Barrack, 47.0]]

我很難從概念上理解如何使用彼此嵌套的兩個Array.map()方法來工作。 有人可以告訴我這實際上是如何工作的嗎？ 例如，如果我只想使用一個Array.map()方法來重新創建上面的內容，我最終會得到一個仍然包含key:value對的截斷對象數組。

let truncated = employees.map(({name, age, ...rest}) => ({name, age}));
console.log(truncated); //result is [{age=21.0, name=Matt}, {age=32.0, name=Brian}, {age=35.0, name=David}, {name=Kevin, age=38.0}, {age=47.0, name=Barrack}]

Answer 1

在employees.map()的第一次迭代中， object是 object

{name: 'Matt', employeeID: 123, performance: 'good', age: 21}

然后我們執行keys.map() 。

在第一次迭代中， element是'name' ，我們返回object[element] ，即'Matt' 。 在第二次迭代中， element是'age' ，我們返回object[element] ，即21 。 map()將這些結果合並到數組['Matt', 21]中。

然后，我們對employees數組中的每個 object 重復上述操作，並列出所有這些結果。 這會產生一個 arrays 的數組。

Answer 2

你最終得到一個嵌套數組，因為兩個maps都返回 arrays。你的“內部” map返回一個基於keys數組的值數組，然后返回到“外部” map ，它迭代了每個 object 的數組，它也返回一個數組。

 // Create a new array by mapping over each object employees.map(object => { // For each key in the keys array return a // new array of only those values of the // properties of the object that match the key return keys.map(element => object[element]); });

Answer 3

數組 map 采用元素數組並使用提供的函數轉換每個元素 -

// input
[1,3,5,7].map(a => a + 10)

輸入	一個=>一個+ 10	output
1	1 + 10	11
3	3 + 10	13
5	5 + 10	15
7	7 + 10	17

// output
[11,13,15,17]

現在我們用一個更簡化的視圖來看待它——

// in       // out
[           [ 
  1,  // =>   11,
  3,  // =>   13,
  5,  // =>   15,
  7,  // =>   17
]           ]

現在使用您的對象通過一定程度的嵌套來擴展它 -

[
  {
    name: 'Matt',          // [            [
    employeeID: 123,       //   "name", =>   "Matt",
    performance: 'good',   //   "age"        21
    age: 21                // ]            ]
  },
  {
    name: 'Brian',          // [            [
    employeeID: 321,        //  "name", =>    "Brian",
    performance: 'average', //  "age"         32
    age: 32                 // ]            ]
  },
  {
    name: 'David',          // [            [
    employeeID: 456,        //  "name", =>    "David",
    performance: 'best',    //  "age"         35
    age: 35                 // ]            ]
  },
  {
    name: 'Kevin',          // [            [
    employeeID: 654,        //  "name", =>    "Kevin",
    performance: 'poor',    //  "age"         38
    age: 38                 // ]            ]
  },
  {
    name: 'Barrack',        // [            [
    employeeID: 789,        //  "name", =>    "Barrack",
    performance: 'super',   //  "age"         47
    age: 47                 // ]            ]
  }
]

[
  [
    "Matt",
    21
  ],
  [
    "Brian",
    32
  ],
  [
    "David",
    35
  ],
  [
    "Kevin",
    38
  ],
  [
    "Barrack",
    47
  ]
]

[
  ["Matt",21],
  ["Brian",32],
  ["David",35],
  ["Kevin",38],
  ["Barrack",47]
]

Answer 4

 let keys = ['name', 'age']; let employees = [ {name: 'Matt', employeeID: 123, performance: 'good', age: 21}, {name: 'Brian', employeeID: 321, performance: 'average', age: 32}, {name: 'David', employeeID: 456, performance: 'best', age: 35}, {name: 'Kevin', employeeID: 654, performance: 'poor', age: 38}, {name: 'Barrack', employeeID: 789, performance: 'super', age: 47}, ]; let extracted = employees.flatMap(object => keys.map(element => object[element])); console.log(extracted);

您正在尋找的應該是flatMap