合并兩個具有共享值的陣列

我有兩個物件陣列：

let employees = [
  { name: 'Jason', job_id: '101' },
  { name: 'Sarah', job_id: '102' },
  { name: 'Jack', job_id: '102' }
]

let jobs = [
  { job_id: '101', position: 'Designer' },
  { job_id: '102', position: 'Developer' }
]

我是否可以使用 vanilla javascript 將這些陣列合并為一個，如下所示：

let employees = [
  { name: 'Jason', job_id: [job_id: '101', position: 'Designer'] },
  { name: 'Sarah', job_id: [job_id: '102', position: 'Developer'] },
  { name: 'Jack', job_id: [job_id: '102', position: 'Developer'] }
]

以下是我現在所擁有的。它確實給了我正確的結果，但是如果可能的話，我寧愿不使用嵌套回圈。

employees.forEach(employee => {
  for (let index = 0; index < jobs.length; index  ) {
    if (employee.job_id == jobs[index].job_id) {
      employee.job_id= jobs[index];
    }
  }
})

uj5u.com熱心網友回復：

任務不是很復雜，所以我將嘗試通過現場演示做出簡單的回答。

這里的想法是遍歷employees陣列，然后構造一個具有所需結構的物件，然后將其推入最終陣列。

最終陣列上的每個物件都將具有以下屬性：

• name：等于employees陣列上的名稱（每次迭代）
• job：為了讓事情更清楚，我會使用job而不是job_id（你在你想要的結果中使用它）。job是一個物件， 包含
  • id:job_id來自employees陣列
  • positionjobs:陣列中的相應位置。

為了得到上述結果，我們將使用reduce構建最終陣列的方法。

另一個任務是根據employees 表position從jobs陣列中獲取相應的 ,。job_id為此，我們將使用find回傳在jobs陣列中找到的第一個匹配項的方法。

話雖如此，讓我們來一個現場演示（演示有一些有用的評論）：

const employees = [{
      name: 'Jason',
      job_id: '101'
    },
    {
      name: 'Sarah',
      job_id: '102'
    },
    {
      name: 'Jack',
      job_id: '102'
    }
  ],
  jobs = [{
      job_id: '101',
      position: 'Designer'
    },
    {
      job_id: '102',
      position: 'Developer'
    }
  ],
  /** 
   * "res" is the resulting array after performing the needed operations 
   * "reduce" method loops through the "employees" array and populates the "res" array along the way
   */
  res = employees.reduce((a, c) => {
    /**
     * a: the accumulator, it holds the last value from the previous iteration. Initially it equals to an empty array "[]" (see 3rd argument passed to the "reduce" method)
     * c: is the current element from the "employees" array on each iteration
     */

    /** adds an object that follows the intended structure to the final array */
    a.push({
      name: c.name,
      job: {
        id: c.job_id,
        /** 
         * find the respective "position" based on the "job_id" of the current element of element of the "employees" arrray 
         * el: holds the element from "jobs" array on each iteration of the "find" method
         * the condition is once we find an elemnt having "job_id" equals to the current element (i mean "c" parameter) "job_id" then return that object's "position" attribute
         * once we found the "position" we simply save it on the object we're constructing
         */
        position: jobs.find(el => el.job_id == c.job_id).position
      }
    });
    /** return the array so that the next iteration of "reduce" can do its work */
    return a;
  }, []);

/** print the result */
console.log(res);

上面的演示絕對不是完成事情的唯一方法，當然有一些奇特的ES6方法可以做到這一點，尤其是在構造物件時。為了簡單起見，我不會使用那些花哨/復雜的技巧來使事情盡可能簡單易懂。

reduce在 MDN 上了解有關該方法的更多資訊。

find在 MDN 上了解有關該方法的更多資訊。

標籤：javascript 数组

上一篇：選擇一個間隔為7天的日期后如何獲取下一個日期

下一篇：返回列表