獲取 JavaScript 物件的鍵

1. 使用 Object.keys() 方法獲取 javascript 物件的鍵
2. 使用 Object.entries(obj) 方法獲取 javascript 物件的鍵
3. 使用 for 迴圈獲取 javascript 物件的 key

javascript 物件是鍵值對的集合。我們需要一個鍵來從 javascript 物件中獲取它的值。鍵值對廣泛用於客戶端-伺服器通訊和 JavaScript 程式設計。我們知道從 JSON 物件中檢索一個值，只要我們有它的鍵。但是如果我們沒有 key 名稱怎麼辦？我們如何從 Javsscript 物件中獲取它的值？讓我們看看從 javascript 物件中獲取鍵的幾種方法。

使用 Object.keys() 方法獲取 javascript 物件的鍵

Object.keys() 函式返回一個包含 javascript 物件鍵的陣列。我們將 javascript 物件作為引數傳遞給 Object.keys() 函式。輸出陣列包含的鍵的順序與它們在原始 javascript 物件中的順序相同。如果我們將陣列傳遞給 Object.keys()，它將返回陣列索引作為輸出。並且引數物件帶有索引，那麼 Object.keys() 將返回這些索引的陣列。請參考以下程式碼以瞭解 Object.keys() 函式的用法和行為。

var fruitsArr1 = ['Apple', 'Orange', 'Mango', 'Banana'];
var fruitsObj2 = {0: 'Apple', 4: 'Orange', 2: 'Mango', 3: 'Banana'};
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));

輸出：

["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]

如果鍵是數字，Object.keys() 函式將按排序順序返回數字鍵的陣列。fruitsObj2 具有編號為 0、4、2、3 的鍵。但是當我們應用 Object.Keys() 函式時，它返回的鍵是 ["0", "2", "3", "4"]，按排序順序排列。鍵值仍將保持與原始 javascript 物件相同的值對映。例如，fruitsObj2 包含 4: "Orange" 和 2: "Mango"，但 Object.keys(fruitsObj2) 將它們的順序返回為 "2", "4"。如果我們是 console.log 他們在鍵 2 和 4 上的值，我們會得到正確的值作為輸出。因此，該函式沒有修改實際鍵值對映中的任何內容，即使 Object.keys 按排序順序返回陣列或物件的數字鍵。參考以下程式碼。

console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);

輸出：

Mango
Orange

使用 Object.entries(obj) 方法獲取 javascript 物件的鍵

Object.entries(obj) 方法多種多樣，比 Object.keys() 函式更靈活。它將整個物件拆分為小陣列。每個陣列由 [key, value] 形式的鍵值對組成。使用 Object.keys()，我們只得到一個物件的鍵，但是使用 Object.entries(obj)，我們可以得到一個物件中的所有條目，包括 keys 和它們的 values . Object.entries(obj) 不是常用的方法。在大多數情況下，我們需要從物件中獲取鍵。藉助 keys 可以輕鬆獲得相應的值。

語法

Object.entries(object)

引數

與 Object.keys() 方法相同，Object.entries(obj) 接受 javascript object 作為引數。

返回值

Object.entries(obj) 返回析構為陣列的鍵值對。返回型別將是一個陣列陣列，每個子陣列包含兩個元素：鍵和值。類似於 [[key1, value1], [key2, value2], [key3, value3] ... ]。該函式保留物件屬性的順序。在幕後的實現中，鍵值對是通過迭代物件屬性形成的。請參考以下程式碼以更好地理解 Object.entries() 函式的行為。我們使用 JSON.stringify() 來獲取函式輸出值的人類可讀字串版本。

var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));

輸出：

"[["id","1"],["name","mango"],["color","yellow"]]"

我們可以以另一種方式使用 Object.entries()。我們可以遍歷 javascript 物件並記錄屬性鍵及其值。該方法如以下程式碼片段所示。

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}

輸出：

id: 1
name: mango
color: yellow

如果我們有興趣從 Object.entries() 函式中單獨獲取 key，我們可以記錄 key 並丟棄值部分。

使用 for 迴圈獲取 javascript 物件的 key

我們可以使用簡單的 for 迴圈從物件中獲取鍵嗎？它不是 for 迴圈的眾所周知的特性。我們可以像使用 for-in 組合遍歷陣列一樣遍歷任何 javascript 物件。它遍歷每個引數，其中 i（迭代器）儲存物件的 key，而 object[i] 儲存與物件中的 key 對應的值。讓我們看看下面的程式碼來更好地理解這個概念。

var obj = {'id': '1', 'name': 'mango', 'color': 'green'};
for (let i in obj) {
  console.log(i);       // key
  console.log(obj[i]);  // value against the key
}

輸出：

id
1
name
mango
color
green

var a = {
  'id': '1',
  'name': 'mango',
  'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
  console.log(i);
  console.log(a[i]);
}

輸出：

id
1
name
mango
color
{name: "yellow", appearance: "bright"}