脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS删除对象某个属性

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

 更新时间：2025年07月21日 10:12:18   作者：十方来财  
在JavaScript编程中我们经常需要操作对象,包括给对象添加属性、删除属性以及修改属性的值,这篇文章主要介绍了在JS中删除对象的某个属性常见的几种方案,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在 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删除对象某个属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于iScroll实现下拉刷新和上滑加载效果

    基于iScroll实现下拉刷新和上滑加载效果

    这篇文章主要为大家详细介绍了基于iScroll实现下拉刷新和上滑加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 实例浅析js的this

    实例浅析js的this

    本文通过做几个简单的对照实验，根据这几个对照实验的结果，帮助大家理解js的this用法。下面就跟小编一起来看看吧
    2016-12-12
  • js判断上传文件的类型和大小示例代码

    js判断上传文件的类型和大小示例代码

    上传文件的类型和大小可以js进行判断，在本文有个不错的示例，适合初学者，感兴趣的朋友可以参考下
    2013-10-10
  • Javascript多种浏览器兼容写法分析

    Javascript多种浏览器兼容写法分析

    随着以Firefox为代表的第三方浏览器的兴起，我们做的网站也不能再JUST IE了，如果把原来的一些javascript代码放到IE以外的浏览器的话，往往都不能正常运行或出错，所以这里介绍一下怎么改进我们的JS，让它能更加规范，更加具有兼容性。
    2008-09-09
  • 使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

    使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

    这篇文章主要介绍了使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转),其实主要用到的就是 CSS3 的效果：边框圆角、阴影，3D变换，实现代码超级简单，需要的朋友可以参考下
    2018-10-10
  • JS动画效果代码3

    JS动画效果代码3

    用js实现的动画效果
    2008-04-04
  • js中的referrer返回上一页使用介绍

    js中的referrer返回上一页使用介绍

    js中的referrer想必大家并不陌生吧，在本文将为大家详细介绍其是如何使用的，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-09-09
  • 获取offsetTop和offsetLeft值的js代码(兼容)

    获取offsetTop和offsetLeft值的js代码(兼容)

    offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的，为了实现值的准确获取，本文采用js代码实现下，有需求的朋友可以参考下哈
    2013-04-04
  • 详细总结Javascript中的焦点管理

    详细总结Javascript中的焦点管理

    相信大家都知道焦点作为javascript中的一个重要功能，基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍，有需要的朋友们可以参考借鉴。
    2016-09-09
  • Js中FileReader读取文件内容方法详解(async/await)

    Js中FileReader读取文件内容方法详解(async/await)

    这篇文章主要给大家介绍了关于Js中FileReader读取文件内容(async/await)的相关资料,FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它,需要的朋友可以参考下
    2023-11-11

最新评论