在JS中删除对象的某个属性的几种方案总结

更新时间：2025年03月13日 09:52:47 作者：成都市-高级Java开发-空

这篇文章主要介绍了在JS中删除对象的某个属性的几种方案,分别是使用delete操作符、解构赋值、Object.fromEntries()、Reflect.deleteProperty()以及如何在集合对象中应用这些方法,需要的朋友可以参考下

前言

在 JavaScript 中，如果你想删除一个对象的某个属性，可以使用 delete 操作符。下面是一个简单的示例：

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// 删除 'age' 属性
delete obj.age;

console.log(obj); // { name: 'Alice', city: 'New York' }

delete 操作符会从对象中删除指定的属性。如果属性存在，它会删除该属性并返回 true，如果属性不存在，返回 true，但对象保持不变。注意，delete 不能删除对象的不可配置属性，比如由 Object.defineProperty 设置的属性。

除了 delete 操作符，还有几种方式可以“移除”对象的某个属性，下面是几种常见的方法：

1. 使用解构赋值（创建一个新对象）

如果你不想修改原始对象，可以使用解构赋值来创建一个新对象，排除掉某个属性。

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// 使用解构赋值来排除 'age' 属性
const { age, ...newObj } = obj;

console.log(newObj); // { name: 'Alice', city: 'New York' }

这种方法会创建一个新的对象 newObj，不包含 age 属性，原始对象 obj 不会被改变。

2. 使用 Object.fromEntries() 和 Object.entries()

你还可以通过 Object.entries() 将对象转换为键值对数组，然后使用 filter 函数排除掉需要删除的属性，最后用 Object.fromEntries() 将结果转换回对象。

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// 删除 'age' 属性
const newObj = Object.fromEntries(
  Object.entries(obj).filter(([key]) => key !== 'age')
);

console.log(newObj); // { name: 'Alice', city: 'New York' }

这种方法也是创建了一个新的对象，不会修改原始对象。

3. 使用 Reflect.deleteProperty()（ES6）

Reflect.deleteProperty() 是 delete 操作符的一个替代方法，它的行为更加一致，并且返回布尔值，表示是否删除成功。

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// 使用 Reflect.deleteProperty 删除 'age' 属性
Reflect.deleteProperty(obj, 'age');

console.log(obj); // { name: 'Alice', city: 'New York' }

这种方法会修改原始对象，并返回删除操作的结果（true 或 false）。

总结

delete 是最常见的删除属性的方式，但它会直接修改原始对象。
解构赋值和 Object.entries() 方法创建了新对象，适合不修改原始对象的场景。
Reflect.deleteProperty() 是 delete 的替代方法，具有更一致的行为。

选择哪种方式取决于你的需求，尤其是是否需要保持原始对象不变。

如果你有一个集合对象（例如一个数组），并且你想删除其中每个对象的某个属性

可以使用 map() 方法结合 delete 或其他方式来操作每个对象。

下面是几种实现方式的示例：

1. 使用 map() 和 delete

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// 删除每个对象的 'age' 属性
array.forEach(obj => {
  delete obj.age;
});

console.log(array);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

这里我们直接遍历每个对象，使用 delete 删除 age 属性。注意，这会修改原始对象。

2. 使用 map() 和解构赋值（创建新对象）

如果你不想修改原始对象，可以使用 map() 和解构赋值来创建一个新对象并删除指定属性。

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// 删除每个对象的 'age' 属性
let newArray = array.map(({ age, ...rest }) => rest);

console.log(newArray);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

这种方法不会修改原始的 array，而是返回一个新的数组 newArray，其中每个对象都没有了 age 属性。

3. 使用 map() 和 Object.fromEntries()（适合复杂对象）

如果对象较复杂，可以用 Object.entries() 和 Object.fromEntries() 结合 map() 来删除属性。

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// 删除每个对象的 'age' 属性
let newArray = array.map(obj =>
  Object.fromEntries(Object.entries(obj).filter(([key]) => key !== 'age'))
);

console.log(newArray);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

这种方式是通过转换为键值对数组，过滤掉不需要的属性，再转换回对象，适用于更复杂的操作。

4. 使用 map() 和 Reflect.deleteProperty()（修改原对象）

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// 使用 Reflect.deleteProperty 删除每个对象的 'age' 属性
array.forEach(obj => {
  Reflect.deleteProperty(obj, 'age');
});

console.log(array);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

这种方法与 delete 类似，但是使用 Reflect.deleteProperty() 来删除属性。它也会修改原始对象。

总结

使用 delete 或 Reflect.deleteProperty() 会直接修改原始对象。
使用 map() 和解构赋值或 Object.fromEntries() 可以避免修改原始数组，返回一个新的数组。
选择哪种方法取决于是否需要修改原始数组。

到此这篇关于在JS中删除对象的某个属性的几种方案的文章就介绍到这了,更多相关JS删除对象某个属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript实现获取服务器时间
本文给大家总结了一下使用javascript来获取服务器时间的几种方法和思路，十分的简单明了，有需要的小伙伴可以参考下
2015-05-05
浅谈JavaScript Math和Number对象
这篇文章主要简单介绍了JavaScript Math和Number对象的相关资料,需要的朋友可以参考下
2015-01-01
Bootstrap 网格系统布局详解
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。这篇文章主要介绍了Bootstrap 网格系统布局,需要的朋友可以参考下
2017-03-03
bootstrap多种样式进度条展示
这篇文章主要为大家展示了bootstrap多种样式进度条，默认进度条、条纹进度条等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
javascript+css实现俄罗斯方块小游戏
这篇文章主要为大家详细介绍了javascript+css实现俄罗斯方块小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
基于JavaScript+HTML编写一个日期选择插件
在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期,在本篇文章中,我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件,这个日期选择插件是比较考验Js基本功的,需要的朋友可以参考下
2023-10-10
解决layui的input独占一行的问题
今天小编就为大家分享一篇解决layui的input独占一行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
必备的JS调试技巧汇总
试想一下：出现了某个bug，有人用几分钟就搞定了，有人用了半天或者一天都找不到原因所在。你愿意当前者还是后者呢？想当前者的就请好好看完本篇文章吧。文中涉及较多Gif演示动画请注意。
2016-07-07
微信小程序学习笔记之文件上传、下载操作图文详解
这篇文章主要介绍了微信小程序学习笔记之文件上传、下载操作,结合实例形式分析了微信小程序图片文件传输的原理、步骤及后台php操作相关实现技巧,并结合图文形式予以详细说明,需要的朋友可以参考下
2019-03-03
JavaScript学习笔记之创建对象
在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象，需要的朋友参考下吧
2016-03-03