首頁 > web前端 > js教程 > 主體

JavaScript:如何從物件中刪除與給定鍵對應的鍵值對?

PHPz
發布: 2023-08-22 15:53:12
轉載
3290 人瀏覽過

JavaScript:如何從物件中刪除與給定鍵對應的鍵值對?

在JavaScript中,可以建立物件來儲存數據,以鍵值對的形式。可以使用點表示法(obj.key)或括號表示法(obj["key"])來存取物件中的資料。請參考下面的範例−

let obj = { key1: "value1", key2: "value2", key3: "value" };
登入後複製
我們可以從物件中刪除與給定鍵對應的鍵值對,但是在刪除之前,我們需要確保物件存在這些鍵 在本教程中,我們將介紹3種方法。

使用delete運算子

delete運算子用於刪除物件的屬性。 delete運算子不會刪除變數本身,只會刪除變數的值。

範例

請參考下面的範例 -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let obj = { key1: "value1", key2: "value2", key3: "value3" };
      delete obj.key2;
      document.getElementById("result").innerHTML = JSON.stringify(obj);
      console.log(obj)
   </script>
</body>
</html>
登入後複製

從上面的範例可以看出,delete操作符只刪除值的

key and not the key itself.

Below is the line by line explanation of the above code −

key和不是key本身。

以下是對上述程式碼逐行解釋 −

let obj = { key1: "value1", key2: "value2", key3: "value3" };
登入後複製
登入後複製

我們已經建立了一個包含3個鍵值對的物件。

delete obj.key2;
登入後複製

delete運算子用於刪除鍵值對,其中鍵為「key2」。

console.log(obj);
登入後複製
登入後複製

上述程式碼在控制台的輸出將是:{ key1: "value1", key3: "value3" } 你可以看到,鍵為「key2」的鍵值對已從物件中刪除。

使用filter()方法

filter()方法用於從現有陣列建立一個新陣列。請參考下面的範例:

範例




   Examples

<script> let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; }; let newObj = Object.keys(obj) .filter(key => key != "key2") .reduce((acc, key) => { acc[key] = obj[key]; return acc; }, {}); document.getElementById("result").innerHTML = JSON.stringify(newObj); console.log(newObj) </script>
登入後複製

從上面的範例可以看出,filter()方法只刪除了值的 the key and not the key itself.

Below is the line by line explanation of the above code:

關鍵是關鍵本身。

以下是對上述程式碼逐行解釋:

let obj = { key1: "value1", key2: "value2", key3: "value3" };
登入後複製
登入後複製

我們已經建立了一個包含3個鍵值對的物件。

let newObj = Object.keys(obj)
.filter(key => key != "key2")
.reduce((acc, key) => {
   acc[key] = obj[key];
   return acc;
}, {});
登入後複製

Object.keys()方法用來建立一個包含物件鍵的陣列 filter()方法用於從現有數組建立一個新數組。關鍵是 與“key2”相比較。如果不相等,則將鍵值對新增至新數組中 reduce()方法用於將陣列縮減為一個物件。

console.log(newObj);
登入後複製
上述程式碼的輸出將會是:

{ key1: "value1", key3: "value3" }

。正如您所看到的, 被刪除的鍵為“key2”的鍵值對已從物件中刪除。

使用for…in迴圈

for…in迴圈用於遍歷物件的屬性。

範例

請參考以下範例−




   Examples

<script> let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; }; for (let key in obj) { if (key == "key2") { delete obj[key]; } } document.getElementById("result").innerHTML = JSON.stringify(obj); console.log(obj) </script>
登入後複製

從上面的範例可以看出,for…in迴圈只刪除鍵的值 and not the key itself.

Below line by-line explanation of the above code:

並不是密鑰本身。

以下是對上述程式碼逐行解釋:

let obj = {key1: "value1", key2: "value2", key3: "value3"};
登入後複製

我們已經建立了一個包含3個鍵值對的物件。

for (let key in obj) {
   if (key == "key2") {
      delete obj[key];
   }
}
登入後複製

使用for…in迴圈來遍歷物件的屬性。 key變數用於儲存物件的鍵。如果鍵是“key2”,則從物件中刪除鍵值對。

console.log(obj);
登入後複製
登入後複製
上述程式碼的輸出將會是:

{ key1: "value1", key3: "value3" }

。正如您所看到的, 被刪除的鍵名為“key2”的鍵值對已從物件中刪除。

結論

在本教程中,我們介紹了3種方法來刪除與鍵值對相對應的鍵值對 給定一個物件的鍵。刪除操作符,for...in迴圈和filter()方法。

以上是JavaScript:如何從物件中刪除與給定鍵對應的鍵值對?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板