|
|
|
|
|
|
【實例】演示2種方法JS從對象中刪除屬性
作者:admin 時間:2022-5-10 17:2:1 瀏覽:有時候，出于需要，我們要從JS的對象中刪除某個屬性，有多個方法可以實現此目的，本文將通過具體實例來介紹兩種方法，JS從對象中刪除某個屬性。
一、使用delete運算符
delete是 JavaScript 中的一種特殊運算符，用于從對象中刪除屬性。它的單個操作數通常接受一個屬性訪問器來指示要刪除的屬性：
1) 使用點屬性訪問器刪除：
delete object.property;
2) 使用方括號屬性訪問器刪除：
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];
在屬性訪問器上應用delete運算符時，運算符會從對象中刪除相應的屬性：
const webkaka = {
name: '卡卡網',
url: 'www.cuckooft.com'
};
delete webkaka.url;
console.log(webkaka); // { name: '卡卡網' }輸出：
最初，webkaka有 2 個屬性：name和url。
但是在delete對屬性url應用運算符后：delete webkaka.url，該屬性將從對象中刪除。
使用delete運算符刪除屬性是可變的，因為它會改變原始對象。
如果要刪除的屬性名稱是動態確定的，則可以使用方括號語法：
const webkaka = {
name: '卡卡網',
url: 'www.cuckooft.com'
};
const name = 'url';
delete webkaka[name];
console.log(webkaka); // { name: '卡卡網' }輸出：
delete webkaka[name]刪除名稱包含在name變量中的屬性。
二、使用rest語法進行對象解構
另一種刪除屬性的方法，是使用rest語法進行對象解構。
這個想法很簡單：將對象解構為要刪除的屬性，其余屬性收集到一個 rest 對象中。
1) 屬性名稱已知：
const { property, ...restObject } = object;2) 屬性名稱是動態的：
const name = 'property';
const { [name]: removedProperty, ...restObject } = object;
應用解構和rest語法后，restObject將包含與object相同的屬性，只是沒有刪除的屬性。
例如，讓我們從webkaka對象中刪除url屬性：
const webkaka= {
name: '卡卡網',
url: 'www.cuckooft.com'
};
const { url, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網' }
console.log(webkaka); // { name: '卡卡網',url: 'www.cuckooft.com' }輸出
該語句const { url, ...webkakaRest } = webkaka解構webkaka對象并將屬性收集到一個剩余對象webkakaRest中，而不包括url屬性。
使用 rest 語法進行對象解構是一種不可變的屬性刪除方式：原始webkaka對象不會發生變異。它創建了一個新對象webkakaRest，其中包含webkaka的所有屬性，但不包含已刪除的url。
如果要刪除的屬性名稱是動態確定的，則可以使用動態屬性名稱解構語法：
const webkaka = {
name: '卡卡網',
url: 'www.cuckooft.com'
};
const name = 'url';
const { [name]: removedProperty, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網' }輸出
const { [name]: removedProperty, ...webkakaRest } = webkaka讓我們通過將屬性（但已刪除一個）收集到webkakaRest對象中來刪除具有動態名稱的屬性。
我們可以使用解構和rest語法一次刪除多個屬性：
const webkaka = {
name: '卡卡網',
url: 'www.cuckooft.com',
title: '卡卡測速網',
};
const { url, title, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網' }輸出
const { url, title, ...webkakaRest } = webkaka 一次刪除了兩個屬性：url、title。
三、總結
在 JavaScript 中，有兩種常用方法可以從對象中刪除屬性。
第一種可變方法是使用delete object.property運算符。
第二種方法是不可變的，因為它不會修改原始對象，它是調用對象解構和擴展語法： const {property, ...rest} = object。
注意：第二種方法是ES6語法，在IE中無效。
屬性訪問器
屬性訪問器提供了兩種方式用于訪問一個對象的屬性，它們分別是點號和方括號。
示例：
const person1 = {};
person1['firstname'] = 'Mario';
person1['lastname'] = 'Rossi';
console.log(person1.firstname);
// expected output: "Mario"
const person2 = {
firstname: 'John',
lastname: 'Doe'
};
console.log(person2['lastname']);
// expected output: "Doe"輸出
> "Mario"
> "Doe"
語法
object.property
object['property']
描述
我們可以將對象看做是一個關聯數組（或者：映射、字典、哈希表、查詢表）。這個數組中的鍵就是這個對象中屬性的名稱。通常，當我們提及一個對象的屬性時，會對屬性與方法之間做個對比。然而，屬性與方法之間的區別并不大。一個方法就是一個可以被調用的屬性而已，例如一個指向函數 Function 實例的引用可以作為對象屬性的值。
訪問對象屬性有兩種方式：點號表示法和方括號表示法。
點號表示法
get = object.property;
object.property = set;
以上代碼中，property必須是一個有效的 JavaScript 標識符，例如，一串字母數字字符，也包括下劃線及美元符號，但不能以數字作為開頭。比如，object.$1是合法的，而 object.1是無效不合法的。
document.createElement('pre');在上述代碼塊中，document中存在一個名為"createElement"的方法并且被調用了。
方括號表示法
get = object[property_name];
object[property_name] = set;
property_name 是一個字符串。該字符串不一定是一個合法的標識符；它可以是任意值，例如，"1foo"，"!bar!"，甚至是 " "（一個空格）。
括號之前允許有空格。
document ['createElement']('pre');
