卡卡网

有时候，出于需要，我们要从JS的对象中删除某个属性，有多个方法可以实现此目的，本文将通过具体实例来介绍两种方法，JS从对象中删除某个属性。

• 方法一：使用delete运算符
• 方法二：使用rest解构对象

一、使用delete运算符

delete是 JavaScript 中的一种特殊运算符，用于从对象中删除属性。它的单个操作数通常接受一个属性访问器来指示要删除的属性：

1)  使用点属性访问器删除：

delete object.property;

2)  使用方括号属性访问器删除：

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

在属性访问器上应用delete运算符时，运算符会从对象中删除相应的属性：

const webkaka = {
name: '卡卡网',
url: 'www.webkaka.com'
};
delete webkaka.url;
console.log(webkaka); // { name: '卡卡网' }

输出：

最初，webkaka有 2 个属性：name和url。

但是在delete对属性url应用运算符后：delete webkaka.url，该属性将从对象中删除。

使用delete运算符删除属性是可变的，因为它会改变原始对象。

如果要删除的属性名称是动态确定的，则可以使用方括号语法： 

const webkaka = {
  name: '卡卡网',
  url: 'www.webkaka.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.webkaka.com'
};
const { url, ...webkakaRest } = webkaka;
console.log(webkakaRest); // { name: '卡卡网' }
console.log(webkaka); // { name: '卡卡网',url: 'www.webkaka.com' }

输出

该语句const { url, ...webkakaRest } = webkaka解构webkaka对象并将属性收集到一个剩余对象webkakaRest中，而不包括url属性。

使用 rest 语法进行对象解构是一种不可变的属性删除方式：原始webkaka对象不会发生变异。它创建了一个新对象webkakaRest，其中包含webkaka的所有属性，但不包含已删除的url。

如果要删除的属性名称是动态确定的，则可以使用动态属性名称解构语法： 

const webkaka = {
  name: '卡卡网',
  url: 'www.webkaka.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.webkaka.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');

标签: 对象  属性  删除属性