在JavaScript中从对象中删除一个属性的2种方法

一个JavaScript对象是一个属性的集合，每个属性都有一个名称和一个值。

javascript

const employee = {
  name: 'John Smith',
  position: 'Sales Manager',
};

user 这个变量包含一个描述雇员的对象。该对象包含2个描述雇员数据的属性：name 和position 。

然而，有时候，你需要从一个对象中删除属性。例如，你如何从employee 对象中删除position 属性？

让我们来看看在JavaScript中如何从一个对象中删除属性的2种常见方法--使用delete 操作符（可变的方式）和对象重构结合对象重构（不可变的方式）。

1.删除操作符

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

A）使用点状属性访问器删除。

javascript

delete object.property;   

B)使用方形的制动器属性访问器进行删除。

javascript

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

当在一个属性访问器上应用delete 操作符时，该操作符会从对象中删除相应的属性。

javascript

const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

最初，employee 有两个属性：name 和position 。

但是在对position 属性应用delete 操作符后。delete employee.position，该属性被从对象中移除。就这么简单。

使用delete 操作符的属性移除是可变的，因为它变异（又称改变、修改）了原始对象。

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

javascript

const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

delete employee[name] 删除名称包含在name 变量中的属性。

2.使用rest语法的对象重构

另一种删除属性的方法是使用对象析构和rest语法，但要以不可变的方式，而不改变原始对象。

这个想法很简单：对你想删除的属性进行对象析构，其余的属性收集到一个rest对象中。

A) 属性名称是已知的。

javascript

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

B) 属性名是动态的。

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

在应用了析构和rest语法后，restObject 将包含与object 相同的属性，只是没有被移除的属性。

例如，让我们从employee 对象中删除属性position 。

const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const { position, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }
console.log(employee); 
// { name: 'John Smith',position: 'Sales Manager' }

语句const { position, ...employeeRest } = employee 解构了employee 对象，并将属性收集到一个rest对象employeeRest ，但不包括position 属性。

使用rest语法的对象解构是一种不可改变的属性移除方式：原始的employee 对象并没有被改变。相反，一个新的对象employeeRest ，它包含了employee 的所有属性，但不包括被删除的position 。

如果要删除的属性名是动态确定的，那么你可以使用动态属性名析构语法。

const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
const { [name]: removedProperty, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

const { [name]: removedProperty, ...employeeRest } = employee 让你通过收集属性（但不包括被删除的一个）到 employeeRest对象来删除一个具有动态名称的属性。

有趣的是，你可以使用重构和其他语法一次删除多个属性。

javascript

const employee = {
  name: 'John Smith',
  position: 'Sales Manager',
  experience: 6, // years
};
const { position, experience, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

const { position, experience, ...employeeRest } = employee 已经一次删除了2个属性：position 和 experience。

3.总结

在JavaScript中，有2种常见的方法可以从一个对象中删除属性:

第一种可变的方法是使用delete object.property 操作符。

第二种方法是调用对象解构和传播语法，这是不可变的，因为它不会修改原始对象。const {property, ...rest} = object.