卡卡網(wǎng)

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

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

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

delete是 JavaScript 中的一種特殊運(yùn)算符，用于從對(duì)象中刪除屬性。它的單個(gè)操作數(shù)通常接受一個(gè)屬性訪問(wèn)器來(lái)指示要?jiǎng)h除的屬性：

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

delete object.property;

2)  使用方括號(hào)屬性訪問(wèn)器刪除：

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

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

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

輸出：

最初，webkaka有 2 個(gè)屬性：name和url。

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

使用delete運(yùn)算符刪除屬性是可變的，因?yàn)樗鼤?huì)改變?cè)紝?duì)象。

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用方括號(hào)語(yǔ)法： 

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

輸出：

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

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

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

這個(gè)想法很簡(jiǎn)單：將對(duì)象解構(gòu)為要?jiǎng)h除的屬性，其余屬性收集到一個(gè) rest 對(duì)象中。

1)  屬性名稱已知：

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

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

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

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

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

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

輸出

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

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

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用動(dòng)態(tài)屬性名稱解構(gòu)語(yǔ)法： 

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

輸出

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

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

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

輸出

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

三、總結(jié)

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

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

第二種方法是不可變的，因?yàn)樗粫?huì)修改原始對(duì)象，它是調(diào)用對(duì)象解構(gòu)和擴(kuò)展語(yǔ)法： const {property, ...rest} = object。

注意：第二種方法是ES6語(yǔ)法，在IE中無(wú)效。

屬性訪問(wèn)器

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

示例：

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"

語(yǔ)法

object.property
object['property']

描述

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

訪問(wèn)對(duì)象屬性有兩種方式：點(diǎn)號(hào)表示法和方括號(hào)表示法。

點(diǎn)號(hào)表示法

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

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

document.createElement('pre');

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

方括號(hào)表示法

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

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

括號(hào)之前允許有空格。

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

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