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

相关文章
|
负载均衡 Ubuntu 应用服务中间件
|
10月前
|
存储 人工智能 Java
java之通过Http下载文件
本文介绍了使用Java实现通过文件链接下载文件到本地的方法,主要涉及URL、HttpURLConnection及输入输出流的操作。
698 0
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
8824 90
|
11月前
|
人工智能 Java 数据库
如何保证接口幂等性?
在分布式系统中,接口幂等性至关重要。本文详解其定义、重要性及实现方案,包括唯一索引、Token机制、分布式锁、状态机与版本号机制,并提供最佳实践建议,助你提升系统可靠性与用户体验。
2207 1
|
12月前
|
人工智能 监控 算法
Go语言GC:三色标记法工程启示
本文深入探讨了Go语言中垃圾回收(GC)机制的性能影响及优化策略。首先分析了GC可能成为性能瓶颈的原因,如延迟敏感场景下的服务响应时间突增问题。接着介绍了三色标记法的核心概念与工作流程,以及并发GC面临的挑战和写屏障的作用。文章还详细讲解了Go GC的完整流程,并提供了多种工程实践启示,包括减少分配频率、预分配内存、避免过度使用指针、合理设置GOGC参数以及监控GC指标等优化方法。最后总结了GC优化的核心策略,帮助开发者构建更高效、可靠的Go应用。
289 5
|
存储 Python
Python 实现单向链表,和单向链表的反转
链表是一种数据结构,每个节点存储相邻节点的位置信息。单链表中的节点仅存储下一节点的位置。通过Python实现单链表,定义`ListNode`类并关联节点可创建链表。例如,创建A->B->C的链表后,可通过反转函数`reverse`将链表反转为CBA。代码展示了如何实现和操作单链表。
338 6
Python 实现单向链表,和单向链表的反转
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
14761 5
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1774 2

热门文章

最新文章