JavaScript删除对象的不必要的属性

目录
  • 示例
    • 方式一：delete 删除
    • 方式二：解构
  • 总结
  • 补充
  • 总结

Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。

业务开发中，我们经常会遇到：基于后端返回接口数据，前端保存到对象 Object 中，前端开发过程中为了一些场景的便利性，需要在该对象中增加相应的属性，但这些属性对于后端没有意义，保存提交时希望删除掉。

真实业务代码：保存前需要删除对应的 *Value 字段

async saveData (type, data) {
  // 提交时删除多余字段
  delete data.isCommonValue
  delete data.isRemoteValue
  await this.$request({
    ...API.EDIT_SERVICE,
    method: type === 'add' ? 'post' : 'put',
    data
  })
}

上述是大家普遍的写法，但部分场景下上述写法并不是最优写法，且可能会带来一些副作用。下面通过 示例 的方式阐述一下：

示例

为了更好的展示上述情况，我们重新编写示例（仅为说明实现）。

let person = {
  id: '001',
  name: 'ligang',
  email: 'xxx@x.com'
}

诉求：在提交给后端时，需要删除 email 字段。

方式一：delete 删除

同上述给到的业务代码处理方式一样

delete person.email
console.log(person)	// {id: '001', name: 'ligang'}

原数据中的相关属性也会删除掉。

Reflect.deleteProperty() 允许用于删除属性，同上述 delete 行为一致。

Reflect.deleteProperty(person, 'email')

方式二：解构

形成新的对象，避免在引用原始对象的地方产生副作用。

let {id, name} = person
let newPerson = {id, name}
console.log(newPerson) // {id: '001', name: 'ligang'}

会和原数据切断引用。对于保留属性个数少，该方式处理简单且易懂；保留属性过多的场景会比较复杂。

let {email, ...newPerson} = person
console.log(newPerson) // {id: '001', name: 'ligang'}

会和原数据切断引用。对于保留属性个数多，该方式处理简单且易懂；保留属性过少的场景会比较复杂。

总结

实际使用中，强烈建议方式二来操作，不要影响原数据。特别是在mvvm框架中，原数据往往是响应式的，delete/deleteProperty 意味着切断“响应关系”，delete 操作之后的数据响应就会有问题。

data () {
  return {
    person: {
      name: 'ligang',
      email: 'x@x.com'
    }
  }
},
methods: {
	deleteProp () {
  	delete this.person.email
    // this.$delete(this.person, 'email')
	},
  addProp () {
  	this.person.email = 'xxx'
    this.$set(this.person, 'address', 'xxx')
  }
}

1.执行 delete 操作，js 对象属性剔除掉了，但页面没有及时响应，可以使用 vue 中的 this.$delete() 确保删除能触发更新视图

2.执行 add 操作，重新添加 email 及 address 属性

1.this.person.email = 'xxx' 并不具备响应式

2.this.$set(this.person, 'address', 'xxx') 具备响应式

补充

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。下述方式都无效！

this.$set(this, 'email', '')
this.$set(this.$data, 'email', '')

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • JavaScript如何删除对象的某个属性详析

    1.delete delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = undefined var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; delete myObject.

  • JS删除对象中某一属性案例详解

    代码如下 var obj={ name: 'zhagnsan', age: 19 } delete obj.name //true typeof obj.name //undefined 通过delete操作符, 可以实现对对象属性的删除操作, 返回值是布尔 可以删除其他东西吗 1.变量 var name ='zs' //已声明的变量 delete name //false console.log(typeof name) //String age = 19 //未声明的变量 delete ag

  • javascript动态添加、修改、删除对象的属性与方法详解

    现在介绍如何为一个对象添加.修改或者删除属性和方法.在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object(); 1．添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user

  • js删除对象中的某一个字段的方法实现

    本文主要介绍了js删除对象中的某一个字段的方法实现,分享给大家,具体如下: // 以下方法不改变原来对象 let item = { name:'张三', age:'18', gender:'男' }; console.log(item) // {age: "18",gender: "男",name: "张三"} let { age,...params } = item; console.log(item) // {age: "18&qu

  • js delete 用法(删除对象属性及变量)

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete obj.name; console.log(obj.name); //undefined 2,变量删除 var name = 'lily'; delete name; console.log(name); //lily 直接用delelte删除不了变量 3,删除不了原型链中的变量 fun.proto

  • js删除对象/数组中null、undefined、空对象及空数组方法示例

    js删除对象/数组中null、undefined、空对象及空数组方法示例

    这两天在项目中遇到后台需要传的数据为不能有null,不能有空值,而这个数据又是一个庞大的对象,对组集合,所以写了个方法来解决这个问题.为了兼具所有的种类类型,封装了方法,代码如下: let obj = { a: { a_1: 'qwe', a_2: undefined, a_3: function (a, b) { return a + b; }, a_4: { a_4_1: 'qwe', a_4_2: undefined, a_4_3: function (a, b) { return a +

  • JavaScript删除对象的不必要的属性

    JavaScript删除对象的不必要的属性

    目录 示例 方式一:delete 删除 方式二:解构 总结 补充 总结 Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想. 业务开发中,我们经常会遇到:基于后端返回接口数据,前端保存到对象 Object 中,前端开发过程中为了一些场景的便利性,需要在该对象中增加相应的属性,但这些属性对于后端没有意义,保存提交时希望删除掉. 真实业务代码:保存前需要删除对应的 *Value 字段 async saveData (type, data) { // 提交时删除多余字段 delete

  • JavaScript 判断对象中是否有某属性的常用方法

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined.当然,这里的"不存在"指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值. // 创建对象 let test = {name : 'lei'} // 获取对象的自身的属性 test.name //"lei" test["name&q

  • javascript检测对象中是否存在某个属性判断方法小结

    检测对象中属性的存在与否可以通过几种方法来判断. 1.使用in关键字该方法可以判断对象的自有属性和继承来的属性是否存在. 复制代码 代码如下: var o={x:1}; "x" in o; //true,自有属性存在 "y" in o; //false "toString" in o; //true,是一个继承属性 2.使用对象的hasOwnProperty()方法 该方法只能判断自有属性是否存在,对于继承属性会返回false. 复制代码 代码如

  • Javascript Object对象类型使用详解

    目录 1. 生成方法 2. 操作属性 2.1 读取 2.2 赋值 2.3 删除 2.4 遍历 2.5 判断属性是否存在 3. with 语句 总结 1. 生成方法 对象是javaScript中的一种数据类型,它是key-value的合集,是无序的 const obj = { name: 'ian',age: 21}; //key使用变量 const gender = 'gender'; const obj = { [gender]: 'male'}; 对象的key必须符合标识符的规则,写的时候k

  • JavaScript中对象property的删除方法介绍

    JavaScript中,可以使用delete操作符来删除对象中的property: 复制代码 代码如下: var t = {a:42, b:26}; console.log(t);//Object {a=42, b=26} delete t.a; console.log(t);//Object {b=26} 这种property删除操作的局限性在于:delete操作符只能删除对象自身所有的property,无法删除其从prototype对象处继承而来的property.如果想删除prototyp

  • JavaScript prototype对象的属性说明

    一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢?对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法

  • javascript RegExp 对象属性与方法和应用

    JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数,语法为:new RegExp("pattern"[,"flags"]). 使用RegExp的隐式构造函数,采用纯文本格式:/pattern/[flags]. pattern部分为要使用的正则表达式模式文本,是必须的.在第一种方式中,pattern部分以JavaScri

  • javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

    本文实例讲述了javascript数组对象常用api函数.分享给大家供大家参考,具体如下: 1. concat() 连接两个或多个数组,并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a); //[1,2,3] console.log(b); //[1,2,3,6,7] 2. join(str) 把数组的所有元素用str分隔,默认逗号分隔 var a = [1,2,3] var b = a.join('|'); console.

  • javascript window对象属性整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

随机推荐