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

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

(1) delete操作符移除对象指定属性,删除成功返回true,否则返回false。
(2) 删除的属性不存在,delete不会起任何作用 ,但是仍会返回true。
(3) 如果原型链有同名属性,只会删除自身的属性。
(4)delete不能删除全局作用域函数以及作用域中用let或const声明的属性。
(5)delete可以删除对象的函数。
(6)不可设置属性不能被删除。比如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];

delete:删除后数组长度不变,原索引下元素变为null。
splice:会改变原数组。

注意:不可以删除的如下:

(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
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript对象方法有很多,以下是一些常用的方法: 1. Object.keys(obj):返回对象的所有属性名组成的数组。 ```javascript const obj = { a: 1, b: 2, c: 3 }; const keys = Object.keys(obj); // ['a', 'b', 'c'] ``` 2. Object.values(obj):返回对象的所有属性值组成的数组。 ```javascript const obj = { a: 1, b: 2, c: 3 }; const values = Object.values(obj); // [1, 2, 3] ``` 3. Object.entries(obj):返回对象的所有键值对组成的二维数组。 ```javascript const obj = { a: 1, b: 2, c: 3 }; const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]] ``` 4. obj.hasOwnProperty(prop):判断对象是否有某个属性。 ```javascript const obj = { a: 1, b: 2, c: 3 }; obj.hasOwnProperty('a'); // true obj.hasOwnProperty('d'); // false ``` 5. Array.isArray(arr):判断一个对象是否是数组。 ```javascript const arr = [1, 2, 3]; Array.isArray(arr); // true ``` 6. arr.push(item):向数组末尾添加一个元素。 ```javascript const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] ``` 7. arr.pop():从数组末尾删除一个元素。 ```javascript const arr = [1, 2, 3]; arr.pop(); // [1, 2] ``` 8. arr.shift():从数组头部删除一个元素。 ```javascript const arr = [1, 2, 3]; arr.shift(); // [2, 3] ``` 9. arr.unshift(item):向数组头部添加一个元素。 ```javascript const arr = [1, 2, 3]; arr.unshift(0); // [0, 1, 2, 3] ``` 10. arr.slice(start, end):返回从数组中指定位置开始到结束的元素组成的新数组。 ```javascript const arr = [1, 2, 3, 4, 5]; const newArr = arr.slice(1, 4); // [2, 3, 4] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值