卡卡網(wǎng)

有時候，出于需要，我們要從JS的對象中刪除某個屬性，有多個方法可以實(shí)現(xiàn)此目的，本文將通過具體實(shí)例來介紹兩種方法，JS從對象中刪除某個屬性。

• 方法一：使用delete運(yùn)算符
• 方法二：使用rest解構(gòu)對象

一、使用delete運(yùn)算符

delete是 JavaScript 中的一種特殊運(yùn)算符，用于從對象中刪除屬性。它的單個操作數(shù)通常接受一個屬性訪問器來指示要刪除的屬性：

1)  使用點(diǎn)屬性訪問器刪除：

delete object.property;

2)  使用方括號屬性訪問器刪除：

delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

在屬性訪問器上應(yīng)用delete運(yùn)算符時，運(yùn)算符會從對象中刪除相應(yīng)的屬性：

const webkaka = {
name: '卡卡網(wǎng)',
url: 'www.howtostagehomes.com'
};
delete webkaka.url;
console.log(webkaka); // { name: '卡卡網(wǎng)' }

輸出：

最初，webkaka有 2 個屬性：name和url。

但是在delete對屬性url應(yīng)用運(yùn)算符后：delete webkaka.url，該屬性將從對象中刪除。

使用delete運(yùn)算符刪除屬性是可變的，因?yàn)樗鼤淖冊紝ο蟆?/p>

如果要刪除的屬性名稱是動態(tài)確定的，則可以使用方括號語法： 

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'www.howtostagehomes.com'
};
const name = 'url';
delete webkaka[name];
console.log(webkaka); // { name: '卡卡網(wǎng)' }

輸出：

delete webkaka[name]刪除名稱包含在name變量中的屬性。

二、使用rest語法進(jìn)行對象解構(gòu)

另一種刪除屬性的方法，是使用rest語法進(jìn)行對象解構(gòu)。

這個想法很簡單：將對象解構(gòu)為要刪除的屬性，其余屬性收集到一個 rest 對象中。

1)  屬性名稱已知：

const { property, ...restObject } = object;

2)  屬性名稱是動態(tài)的：

const name = 'property';
const { [name]: removedProperty, ...restObject } = object;

應(yīng)用解構(gòu)和rest語法后，restObject將包含與object相同的屬性，只是沒有刪除的屬性。 

例如，讓我們從webkaka對象中刪除url屬性：

const webkaka= {
  name: '卡卡網(wǎng)',
  url: 'www.howtostagehomes.com'
};
const { url, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網(wǎng)' }
console.log(webkaka); // { name: '卡卡網(wǎng)',url: 'www.howtostagehomes.com' }

輸出

該語句const { url, ...webkakaRest } = webkaka解構(gòu)webkaka對象并將屬性收集到一個剩余對象webkakaRest中，而不包括url屬性。

使用 rest 語法進(jìn)行對象解構(gòu)是一種不可變的屬性刪除方式：原始webkaka對象不會發(fā)生變異。它創(chuàng)建了一個新對象webkakaRest，其中包含webkaka的所有屬性，但不包含已刪除的url。

如果要刪除的屬性名稱是動態(tài)確定的，則可以使用動態(tài)屬性名稱解構(gòu)語法： 

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'www.howtostagehomes.com'
};
const name = 'url';
const { [name]: removedProperty, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網(wǎng)' }

輸出

const { [name]: removedProperty, ...webkakaRest } = webkaka讓我們通過將屬性（但已刪除一個）收集到webkakaRest對象中來刪除具有動態(tài)名稱的屬性。

我們可以使用解構(gòu)和rest語法一次刪除多個屬性：

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'www.howtostagehomes.com',
  title: '卡卡測速網(wǎng)', 
};
const { url, title, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡網(wǎng)' }

輸出

const { url, title, ...webkakaRest } = webkaka 一次刪除了兩個屬性：url、title。

三、總結(jié)

在 JavaScript 中，有兩種常用方法可以從對象中刪除屬性。

第一種可變方法是使用delete object.property運(yùn)算符。

第二種方法是不可變的，因?yàn)樗粫薷脑紝ο?，它是調(diào)用對象解構(gòu)和擴(kuò)展語法： const {property, ...rest} = object。

注意：第二種方法是ES6語法，在IE中無效。

屬性訪問器

屬性訪問器提供了兩種方式用于訪問一個對象的屬性，它們分別是點(diǎn)號和方括號。

示例：

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

描述

我們可以將對象看做是一個關(guān)聯(lián)數(shù)組（或者：映射、字典、哈希表、查詢表）。這個數(shù)組中的鍵就是這個對象中屬性的名稱。通常，當(dāng)我們提及一個對象的屬性時，會對屬性與方法之間做個對比。然而，屬性與方法之間的區(qū)別并不大。一個方法就是一個可以被調(diào)用的屬性而已，例如一個指向函數(shù) Function 實(shí)例的引用可以作為對象屬性的值。

訪問對象屬性有兩種方式：點(diǎn)號表示法和方括號表示法。

點(diǎn)號表示法

get = object.property;
object.property = set;

以上代碼中，property必須是一個有效的 JavaScript 標(biāo)識符，例如，一串字母數(shù)字字符，也包括下劃線及美元符號，但不能以數(shù)字作為開頭。比如，object.$1是合法的，而 object.1是無效不合法的。

document.createElement('pre');

在上述代碼塊中，document中存在一個名為"createElement"的方法并且被調(diào)用了。

方括號表示法

get = object[property_name];
object[property_name] = set;

property_name 是一個字符串。該字符串不一定是一個合法的標(biāo)識符；它可以是任意值，例如，"1foo"，"!bar!"，甚至是 " "（一個空格）。

括號之前允許有空格。

document ['createElement']('pre');

標(biāo)簽: 對象  屬性  刪除屬性