知識回調(diào)

有關(guān)JavaScript的相關(guān)知識可以前往JavaScript知識專欄查看復(fù)習(xí)！！

場景復(fù)現(xiàn)

在后臺管理系統(tǒng)的項目開發(fā)中，對于后端接口返回的數(shù)據(jù)進(jìn)行處理是一件很重要的事情。有時候返回的值是json格式的數(shù)據(jù)，這個時候我們就需要通過鍵來獲取值，因此本期文章以此為主線，詳細(xì)介紹三種方法獲取數(shù)組對象里面的鍵(key)和值(value) 對象鍵值。

方法一： 使用 Object.keys() 方法獲取 javascript 對象的鍵
方法二：使用 Object.entries(obj) 方法獲取 javascript 對象的鍵
方法三：使用for 循環(huán)獲取 javascript 對象的 key

三種方法獲取數(shù)組對象里的鍵值

javascript 對象是鍵值對的集合。我們需要一個鍵來從 javascript 對象中獲取它的值。鍵值對廣泛用于客戶端-服務(wù)器通信和 JavaScript 編程。我們知道從 JSON 對象中檢索一個值，只要我們有它的鍵。但是如果我們沒有 key 名稱怎么辦？

1、Object.keys()

Object.keys() 函數(shù)返回一個包含 javascript 對象鍵的數(shù)組。
我們將 javascript 對象作為參數(shù)傳遞給 Object.keys() 函數(shù)。
輸出數(shù)組包含的鍵的順序與它們在原始 javascript 對象中的順序相同。
如果我們將數(shù)組傳遞給 Object.keys()，它將返回數(shù)組索引作為輸出。
并且參數(shù)對象帶有索引，那么 Object.keys() 將返回這些索引的數(shù)組。

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"]

• 如果鍵是數(shù)字，Object.keys() 函數(shù)將按排序順序返回數(shù)字鍵的數(shù)組。
• fruitsObj2 具有編號為 0、4、2、3 的鍵。但是當(dāng)我們應(yīng)用 Object.Keys() 函數(shù)時，它返回的鍵是 [“0”, “2”, “3”, “4”]，按排序順序排列。鍵值仍將保持與原始 javascript 對象相同的值映射。
• 例如，fruitsObj2 包含 4: “Orange” 和 2: “Mango”，但 Object.keys(fruitsObj2) 將它們的順序返回為 “2”, “4”。
• 如果我們是 console.log 他們在鍵 2 和 4 上的值，我們會得到正確的值作為輸出。
• 因此，該函數(shù)沒有修改實際鍵值映射中的任何內(nèi)容，即使 Object.keys 按排序順序返回數(shù)組或?qū)ο蟮臄?shù)字鍵。

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

Mango
Orange

2、Object.entries(obj)

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

• 語法：Object.entries(object)
• 參數(shù)：與 Object.keys() 方法相同，Object.entries(obj) 接受javascript object作為參數(shù)。
• 返回值：
  Object.entries(obj) 返回析構(gòu)為數(shù)組的鍵值對。
  返回類型將是一個數(shù)組數(shù)組，每個子數(shù)組包含兩個元素：鍵和值。
  類似于 [[key1, value1], [key2, value2], [key3, value3] … ]。

該函數(shù)保留對象屬性的順序。在幕后的實現(xiàn)中，鍵值對是通過迭代對象屬性形成的。我們使用 JSON.stringify() 來獲取函數(shù)輸出值的可讀字符串版本。

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

3、for 循環(huán)【常用】

我們可以像使用 for-in 組合遍歷數(shù)組一樣遍歷任何 javascript 對象。它遍歷每個參數(shù)，其中i（迭代器）保存對象的 key，而 object[i] 保存與對象中的 key 對應(yīng)的值。

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

• 如果我們只想從對象中提取鍵，我們可以使用迭代器值。我們可以在上面代碼中的 for(let i in obj) 塊中使用 console.log(i)。
• 如果我們在 javascript 對象中有嵌套結(jié)構(gòu)，則可以使用 for(let i in obj) 來獲取鍵。但是，嵌套結(jié)構(gòu)的值將是結(jié)構(gòu)本身。

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"}

以上就是運(yùn)用JavaScript獲取數(shù)組對象里面的鍵和值的三種方法，一般常用的是循環(huán)獲取鍵值。

文章來源地址http://www.zghlxwxcb.cn/news/detail-413856.html

到了這里，關(guān)于JavaScript獲取數(shù)組對象里面的鍵(key)和值(value)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！