js删除对象属性的多种方法举例

 更新时间:2022年12月09日 11:07:49   作者:黑莲烈焰使  
删除属性有很多方法,学到了就在这里记录一下,下面这篇文章主要给大家介绍了关于js删除对象属性的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1.将属性设置为 undefined

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

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

2.使用 delete 操作符

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

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

3.使用对象解构

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

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'] 

4.使用Reflect

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

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

5.删除数组元素

  • delete
delete arr[0];

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

  • splice

会改变原数组。

补充:delete 运算符删除对以前定义的对象属性或方法的引用

不可以删除的如下:

1通过var定义的变量 var a=1;delete a//false

2 声明后的函数 function a(){};delete a//false

3 prototype定义的属性 a.prototype.b=2;delete b//false

4 函数传进来的参数 function(a){delete a//false}

5 内建对象 delete arguments//false

可删除的如下:

1 未定义的变量 b=1;delete b;//true

2 删除对象的属性 var obj={x:1};delete obj.x;//true

总结

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

相关文章

  • 判断li是否有样式的js代码

    判断li是否有样式的js代码

    下面的代码注意实现先判断li是否有样式,如果没有,就添加一个样式,原理呢,就是批量检测li的className属性
    2008-09-09
  • 深入解析JS实现3D标签云的原理与方法

    深入解析JS实现3D标签云的原理与方法

    这篇文章主要介绍了深入解析JS实现3D标签云的原理与方法,结合实例形式详细分析了3D标签云原理、实现技巧与相关操作注意事项,需要的朋友可以参考下
    2019-08-08
  • javascript引用类型指针的工作方式

    javascript引用类型指针的工作方式

    引用类型的值是应用类型的的一个实例,对象是某个特定引用类型的实例。新对象是使用new操作符后跟一个构造函数创建的。下面我们就从一个小例子烂研究下这个问题吧。
    2015-04-04
  • 基于JavaScript实现屏幕滚动效果

    基于JavaScript实现屏幕滚动效果

    这篇文章主要为大家详细介绍了基于JavaScript实现屏幕滚动效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 在JS中如何使用css变量详解

    在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • javascript淡入淡出效果的实现思路

    javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了
    2012-03-03
  • JavaScript必知必会(二) null 和undefined

    JavaScript必知必会(二) null 和undefined

    这篇文章主要介绍了JavaScript必知必会(二) null 和undefined的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 深入理解JavaScript事件机制

    深入理解JavaScript事件机制

    事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解 ,需要的朋友一起学习吧
    2023-04-04
  • 收藏,对比功能的JS部分实现代码

    收藏,对比功能的JS部分实现代码

    非常不错的,收藏效果代码,增加当前页的现实,实现对比
    2008-08-08
  • Webpack提取页面公共资源的实现

    Webpack提取页面公共资源的实现

    本文主要介绍了Webpack提取页面公共资源的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论