JavaScript 物件實戰用法

發表於 分類於
學習如何在 JavaScript 中處理物件，包括根據條件過濾和排序物件的實用方法，讓你的程式碼更加靈活與高效。

物件找相對應的值

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
const betItems = {
  bank: {
    abbr: "B",
    detail: 0,
    id: 2,
    odds: 1,
    switch: true,
    win: false,
  },
  big: {
    abbr: "BG",
    detail: 500,
    id: 2,
    odds: 1,
    switch: true,
    win: false,
  }
};

const filteredItems = Object.keys(betItems).reduce((acc, val) => 
  (betItems[val]['detail'] > 0 ? acc : {
    ...acc,
    [val]: betItems[val]
  }), 
{});

console.log(filteredItems);

物件排序

首先，使用 Object.entries() 方法將物件轉換成二維陣列。接著，使用 Array.sort() 方法依據第二個元素進行排序，最後透過 Object.fromEntries() 方法將排序後的二維陣列轉換回物件形式。

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
const obj = {
  banana: 2,
  apple: 4,
  pear: 1,
};

const obj2 = {
  banana: {
    key: 2,
  },
  apple: {
    key: 4,
  },
  pear: {
    key: 1,
  }
};

// 將物件轉換成二維陣列
const arr = Object.entries(obj); // [ ["banana", 2], ["apple", 4], ["pear", 1] ]
const arr2 = Object.entries(obj2);

// 依照第二個元素（數字）進行排序
arr.sort((a, b) => a[1] - b[1]); // [ ["pear", 1], ["banana", 2], ["apple", 4] ]
arr2.sort((a, b) => a[1].key - b[1].key);

// 將排序後的二維陣列轉換回物件形式
const sortedObj = Object.fromEntries(arr); // { pear: 1, banana: 2, apple: 4 }
const sortedObj2 = Object.fromEntries(arr2);

console.log(sortedObj);
console.log(sortedObj2);