javaScript删除对象属性的几种方法总结

 更新时间:2023年06月10日 11:09:26   作者:十六Code  
这篇文章主要给大家介绍了关于javaScript删除对象属性的几种方法的相关资料,它们在不同场景下有不同的应用,需要根据实际情况选择最合适的删除方法,文中通过实例代码介绍的非常详细,下面需要的朋友可以参考下

删除js中对象中属性

1.使用delete运算符

例:

1) 使用点属性访问器删除:

delete object.property;

在属性访问器上应用delete运算符时,运算符会从对象中删除相应的属性:

const obj = {name: '十六个人博客',url: 'rwlok.com'};
delete obj.url;
console.log(obj); // { name: '十六个人博客' }

2) 使用方括号属性访问器删除:

delete object['property'];// orconst name = 'dynamicProperty';
delete object[name];

使用delete运算符删除属性是可变的,因为它会改变原始对象。

如果要删除的属性名称是动态确定的,则可以使用方括号语法:

const obj = {  name: '十六个人博客',  url: 'rwlok.com'};
const name = 'url';
delete obj[name];
console.log(obj); // { name: '十六个人博客' }

2.使用rest解构对象

1) 属性名称已知:

const { property, ...restObject } = object;

应用解构和rest语法后,restObject将包含与object相同的属性,只是没有删除的属性。

const obj= {
  name: '十六个人博客',
  url: 'rwlok.com'
};
const { url, ...objRest } = obj;
console.log(objRest); // { name: '十六个人博客' }
console.log(obj); // { name: '十六个人博客',url: 'rwlok.com' }

2) 属性名称是动态的:

const name = 'property';
const { [name]: removedProperty, ...restObject } = object;

如果要删除的属性名称是动态确定的,则可以使用动态属性名称解构语法:

const obj = {  name: '十六个人博客',  url: 'rwlok.com'};
const name = 'url';
const { [name]: removedProperty, ...objRest } = obj;
console.log(objRest); // { name: '十六个人博客' }

rest结构方法还可以一次性删除多个属性:

const obj = {
  name: '十六个人博客',
  url: 'rwlok.com',
  title: '卡卡测速网', 
};
const { url, title, ...objRest } = obj;
console.log(objRest); // { name: '十六个人博客' }

附:通过赋值得到方式

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => {
  if (key !== prop) {
    object[key] = car[key]
  }
  return object
}, {})

总结

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

相关文章

  • JavaScript中一个奇葩的IE浏览器判断方法

    JavaScript中一个奇葩的IE浏览器判断方法

    在写原生的Javascript的时候,因为IE的JS引擎与标准浏览器的JS引擎之间总有那么些差异,所以经常会去判断是否是IE浏览器
    2014-04-04
  • 200行代码实现blockchain 区块链实例详解

    200行代码实现blockchain 区块链实例详解

    这篇文章主要介绍了200行代码实现blockchain 区块链的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-03-03
  • JavaScript用select实现日期控件

    JavaScript用select实现日期控件

    这篇文章主要介绍了JavaScript用select实现日期控件的相关资料,需要的朋友可以参考下
    2015-07-07
  • javascript设计模式 – 观察者模式原理与用法实例分析

    javascript设计模式 – 观察者模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js如何计算斐波那契数列第n项的值

    js如何计算斐波那契数列第n项的值

    这篇文章主要介绍了js如何计算斐波那契数列第n项的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • ECharts仪表盘实例代码(附源码下载)

    ECharts仪表盘实例代码(附源码下载)

    大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用
    2016-02-02
  • JS设置获取cookies的方法

    JS设置获取cookies的方法

    这篇文章主要介绍了JS设置获取cookies的方法,有需要的朋友可以参考一下
    2014-01-01
  • javascript实现加载xml文件的方法

    javascript实现加载xml文件的方法

    这篇文章主要介绍了javascript实现加载xml文件的方法,涉及JavaScript针对xml文件对象的相关加载与获取操作实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js实现文章文字大小字号功能完整实例

    js实现文章文字大小字号功能完整实例

    这篇文章主要介绍了js实现文章文字大小字号功能的实现方法,可根据用户习惯调整显示文字的大小.详细讲述了实现这一功能的完整步骤.是非常实用的技巧,需要的朋友可以参考下
    2014-11-11
  • JavaScript中关于字符串替换与截取的知识点汇总

    JavaScript中关于字符串替换与截取的知识点汇总

    在日常开发中,经常遇到针对字符串的替换、截取,知识点比较碎容易混淆,所以本文为大家整理了一下相关的知识点,希望对大家有所帮助
    2023-05-05

最新评论