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的解决方法
3642 0
Git报错:remote: HTTP Basic: Access denied的解决方法
|
负载均衡 Ubuntu 应用服务中间件
|
测试技术 API
如何用Apifox 发送接口请求?
今天我们就来学习下大部分都要用的API工具的接口测试功能,也是对测试人员来说最实用的功能。
如何用Apifox 发送接口请求?
|
存储 人工智能 Java
java之通过Http下载文件
本文介绍了使用Java实现通过文件链接下载文件到本地的方法,主要涉及URL、HttpURLConnection及输入输出流的操作。
811 0
|
前端开发 JavaScript UED
React 滚动条组件 Scrollbar
本文介绍了在 React 中创建和使用滚动条组件的方法。首先,通过设置 `overflow: auto` 等 CSS 属性实现基础滚动功能。接着,推荐了如 `react-custom-scrollbars` 和 `react-perfect-scrollbar` 等第三方库以增强滚动条的功能与外观。针对常见问题,如样式不一致、无法正常工作及性能瓶颈,提供了相应的解决方案,包括自定义样式、确保容器高度和优化渲染逻辑。最后,强调了避免滚动事件绑定错误和不合理嵌套滚动的重要性,帮助开发者打造流畅、美观的用户界面。
975 16
|
人工智能 Java 数据库
如何保证接口幂等性?
在分布式系统中,接口幂等性至关重要。本文详解其定义、重要性及实现方案,包括唯一索引、Token机制、分布式锁、状态机与版本号机制,并提供最佳实践建议,助你提升系统可靠性与用户体验。
2432 1
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9634 90