在 JavaScript 中从对象中删除属性
Moataz Farid
2023年10月12日
-
在 JavaScript 中使用
delete运算符从对象中删除一个属性 -
在 JavaScript 中使用
underscore库删除对象的属性 -
使用
spread语法从 JavaScript ECMAScript 6 中的对象中删除属性
本教程将解释我们如何通过多种方法从 JavaScript 对象中删除一个属性。我们将演示使用 ECMAScript 6 中的 delete 运算符、重赋值机制、underscore 库和 spread 语法。
在 JavaScript 中使用 delete 运算符从对象中删除一个属性
删除任何对象的任何属性的一种方法是 delete 运算符。这个运算符将属性从对象中删除。例如，我们有一个对象 myObject，其属性为 id、subject 和 grade，我们需要删除 grade 属性。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
// delete the grade property
delete myObject.grade
console.log('Updated object: ', myObject)
输出：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object: {id: "12345", subject: "programming"}
在 JavaScript 中使用 underscore 库删除对象的属性
在 JavaScript 中，有一个库可以帮助从对象中删除一个属性，但又不更新原始对象，这个库就是 underscore 库。该库提供了两个重要的函数 _.pick() 和 _.omit()。
_.omit() 函数可以从对象中删除给定的属性，并返回更新后的副本。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var updatedObject = _.omit(myObject, 'grade')
console.log('Updated object with omit() : ', updatedObject)
console.log('Original object after update:', myObject);
输出：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with omit() : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}
_.pick() 函数只包含对象的给定属性，而忽略所有其他属性，并从该对象返回更新后的副本。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var updatedObject = _.pick(myObject, 'id', 'subject')
console.log('Updated object with pick() : ', updatedObject)
console.log('Original object after update:', myObject);
输出：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with pick() : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}
我们可以从这里导入库。
使用 spread 语法从 JavaScript ECMAScript 6 中的对象中删除属性
ECMAScript 6 中的 JavaScript spread 语法提供了一种非常优雅的方法，可以在不改变原对象的情况下，从 JavaScript 对象中删除给定的属性，但返回新更新的对象。
当我们使用 spread 语法时，它将看起来就像我们把原始对象分成两个变量。其中一个将是删除的属性。另一个变量将持有原始对象的副本，但不包括那个移除的对象。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var {grade, ...myUpdatedObject} = myObject;
console.log('The removed \'grade\' property : ', grade)
console.log('Updated object : ', myUpdatedObject)
console.log('Original object after update:', myObject);
输出：
Original object: {id: "12345", subject: "programming", grade: "A"}
The removed 'grade' property : A
Updated object : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}