js删除对象属性

简介: 本文介绍了JavaScript中删除对象属性及数组元素的多种方法,包括设置属性为undefined、使用delete操作符、对象解构、Reflect.deleteProperty方法以及数组的delete和splice操作。每种方法均有示例代码及关键特性说明,适用于不同场景下的属性或元素删除需求,帮助开发者更高效地处理对象和数组的操作。

1.将属性设置为 undefined

属性本身仍将存在于对象中,它还会改变原始对象。

css

体验AI代码助手

代码解读

复制代码

const pet = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' }; 
 pet.gender = undefined; Object.keys(pet); // ['species', 'age', 'name', 'gender'] 123456789

2.使用 delete 操作符

delete 将完全从对象中删除属性,会导致原始对象的发生改变,但速度很慢。

css

体验AI代码助手

代码解读

复制代码

const pet = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' }; 
 delete pet.gender; Object.keys(pet); // ['species', 'age', 'name'] 123456789
  • delete操作符移除对象指定属性,删除成功返回true,否则返回false。
  • 删除的属性不存在,delete不会起任何作用 ,但是仍会返回true。
  • 如果原型链有同名属性,只会删除自身的属性。
  • delete不能删除全局作用域函数以及作用域中用let或const声明的属性。
  • delete可以删除对象的函数。
  • 不可设置属性不能被删除。比如Math、Array、Object内置对象属性以及使用Object.defineProperty()方法设置的属性。

3.使用对象解构

通过用展开运算符(…)可以将需要省略特定属性的对象解构到新对象。这个技巧在需要删除多个属性时特别有用,并且不会更改原始对象。

css

体验AI代码助手

代码解读

复制代码

const pet = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' }; 
 const { gender, ...newPet } = pet; Object.keys(pet); // ['species', 'age', 'name', 'gender'] Object.keys(newPet); // ['species', 'age', 'name'] 12345678910

4.使用Reflect

ES6新增的方法,Reflect.deleteProperty(对象,属性名),返回一个布尔值。

css

体验AI代码助手

代码解读

复制代码

const pet = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' }; 
 Reflect.deleteProperty(pet, 'gender')Object.keys(pet); // ['species', 'age', 'name'] 123456789

5.删除数组元素

  • delete

ini

体验AI代码助手

代码解读

复制代码

delete arr[0];1

删除后数组长度不变,原索引下元素变为null。

  • splice

会改变原数组。


转载来源:https://juejin.cn/post/7275576074591141940

相关文章
|
开发工具 数据安全/隐私保护 git
Git报错:remote: HTTP Basic: Access denied的解决方法
Git报错:remote: HTTP Basic: Access denied的解决方法
3711 0
Git报错:remote: HTTP Basic: Access denied的解决方法
|
负载均衡 Ubuntu 应用服务中间件
|
8月前
|
前端开发 JavaScript API
.NET 权限系统(RBAC)怎么设计?直接可复用
本文基于RBAC模型,详解.NET Core + Vue权限系统实战:涵盖SQL Server数据库设计、JWT认证与动态权限校验、菜单/按钮级前端控制,提供开箱即用方案,助你快速构建安全、可维护的企业级权限体系。(239字)
566 3
|
前端开发 JavaScript UED
React 滚动条组件 Scrollbar
本文介绍了在 React 中创建和使用滚动条组件的方法。首先,通过设置 `overflow: auto` 等 CSS 属性实现基础滚动功能。接着,推荐了如 `react-custom-scrollbars` 和 `react-perfect-scrollbar` 等第三方库以增强滚动条的功能与外观。针对常见问题,如样式不一致、无法正常工作及性能瓶颈,提供了相应的解决方案,包括自定义样式、确保容器高度和优化渲染逻辑。最后,强调了避免滚动事件绑定错误和不合理嵌套滚动的重要性,帮助开发者打造流畅、美观的用户界面。
1051 16
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
10014 90
|
人工智能 Java 数据库
如何保证接口幂等性?
在分布式系统中,接口幂等性至关重要。本文详解其定义、重要性及实现方案,包括唯一索引、Token机制、分布式锁、状态机与版本号机制,并提供最佳实践建议,助你提升系统可靠性与用户体验。
2640 1
|
Web App开发 前端开发 JavaScript
《前端定位探秘:fixed定位的深度剖析与transform的神秘影响》
本文深入探讨了CSS中fixed定位的原理及其与祖先元素transform属性的交互关系。fixed定位通常以视口为参考,使元素固定于屏幕特定位置,广泛用于导航栏、悬浮按钮等场景。然而,当祖先元素应用了transform(如平移、旋转、缩放)时,会创建新的堆叠上下文和包含块,导致fixed定位元素的参照系从视口切换到该祖先元素,从而改变其行为。
589 18
|
人工智能 Java 数据库连接
接口设计,接口返回信息,当账号不存在时候,应该返回200还是500,是直接返回R.fail()还是throw exception
本文探讨了Java接口设计中账号不存在时返回状态码(200、404或500)及处理方式(直接返回R.fail()或抛出异常)的选择。200适用于业务逻辑允许的情况,通过响应体告知客户端;404符合RESTful原则,表示资源未找到;500用于服务器内部错误。返回信息可使用R.fail()封装统一响应,或在异常情况下抛出异常并全局捕获。实际开发需依据业务需求与规范决定最佳方案。
585 5
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
1003 59