Vue

javascript 將兩個陣列合併

Part1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let arr1 = [
    { id: "abdc1234", date: "2023-10-17" },
    { id: "abdc1235", date: "2023-10-18" }
];

let arr2 = [
    { id: "abdc1234", name: "lara" },
    { id: "abdc1235", name: "sara" }
];

let arr3 = arr1.map((item, i) => Object.assign({}, item, arr2[i]));
console.log(arr3);


[
{
  "id": "abdc1234",
  "date": "2023-10-17",
  "name": "lara"
}, 
{
  "id": "abdc1235",
  "date": "2023-10-18",
  "name": "sara"
}]

參考資料
javascrit map() 遍歷產生一個陣列
Object.assign() 枚舉

Part2 for迴圈與查找相同id 新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let arr1 = [
    { id: "abdc1234", date: "2023-10-17" },
    { id: "abdc1235", date: "2023-10-18" }
];

let arr2 = [
    { id: "abdc1234", name: "lara" },
    { id: "abdc1235", name: "sara" }
];

let merged = [];

for(let i=0; i<arr1.length; i++) {
  merged.push({
   ...arr1[i], 
   ...(arr2.find((itmInner) => itmInner.id === arr1[i].id))}
  );
}


console.log(merged);

[
{
  "id": "abdc1234",
  "date": "2023-10-17",
  "name": "lara"
},
{
  "id": "abdc1235",
  "date": "2023-10-18",
  "name": "sara"
}]

參考資料
javascrit map() for()
push() 添加一個或多個元素至陣列的末端
find()

Part3 for迴圈與擴展運算子的合併

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let arr1 = [
    { id: "abdc1234", date: "2023-10-17" },
    { id: "abdc1235", date: "2023-10-18" }
];

let arr2 = [
    { id: "abdc1234", name: "lara" },
    { id: "abdc1235", name: "sara" }
];
let merged = [];

for(let i=0; i<arr1.length; i++) {
  merged.push({
   ...arr1[i], 
   ...arr2[i]
  });
}

console.log(merged)
[
{
  "id": "abdc1234",
  "date": "2023-10-17",
  "name": "lara"
},
{
  "id": "abdc1235",
  "date": "2023-10-18",
  "name": "sara"
}]

參考資料
javascrit map() for()
javascript(ES6)擴展運算子 Spread Operator