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


Posted in Javascript onJanuary 11, 2021

本文主要介绍了js删除对象中的某一个字段的方法实现,分享给大家,具体如下:

// 以下方法不改变原来对象
   let item = {
    name:'张三',
    age:'18',
    gender:'男'
   };
   console.log(item) // {age: "18",gender: "男",name: "张三"}


   let { age,...params } = item;
   console.log(item) // {age: "18",gender: "男",name: "张三"}
   console.log(typeof params.age) // undefined
   console.log(params) // {gender: "男",name: "张三"}

   // 以下方法会直接改变对象
   let item1 = {
    name:'张三',
    age:'18',
    gender:'男'
   };
   console.log(item1) // {age: "18",gender: "男",name: "张三"}
   delete item1.name;
   console.log(typeof item1.name) // undefined
   console.log(item1) // // {age: "18",gender: "男"}

与通常的看法不同,delete操作符与直接释放内存无关。内存管理 通过断开引用来间接完成的,查看内存管理页可了解详情。

delete 操作符会从某个对象上移除指定属性。成功删除的时候会返回 true,否则返回 false。

但是,以下情况需要重点考虑:

如果你试图删除的属性不存在,那么delete将不会起任何作用,但仍会返回true
如果对象的原型链上有一个与待删除属性同名的属性,那么删除属性之后,对象会使用原型链上的那个属性(也就是说,delete操作只会在自身的属性上起作用)
任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。
这样的话,delete操作不能删除任何在全局作用域中的函数(无论这个函数是来自于函数声明或函数表达式)
除了在全局作用域中的函数不能被删除,在对象(object)中的函数是能够用delete操作删除的。
任何用let或const声明的属性不能够从它被声明的作用域中删除。
不可设置的(Non-configurable)属性不能被移除。这意味着像Math, Array, Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除。

下面的代码块给出了一个简单的例子:

var Employee = {
 age: 28,
 name: 'abc',
 designation: 'developer'
}

console.log(delete Employee.name);  // returns true
console.log(delete Employee.age);  // returns true

// 当试着删除一个不存在的属性时
// 同样会返回true
console.log(delete Employee.salary); // returns true

不可配置属性

当一个属性被设置为不可设置,delete操作将不会有任何效果,并且会返回false。在严格模式下会抛出语法错误(SyntaxError)。

var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});

console.log(delete Employee.name); // returns false

var, let以及const创建的不可设置的属性不能被delete操作删除。

var nameOther = 'XYZ';

// 通过以下方法获取全局属性:
Object.getOwnPropertyDescriptor(window, 'nameOther');

// 输出: Object {value: "XYZ",
//         writable: true,
//         enumerable: true,
//         configurable: false}

// 因为“nameOther”使用var关键词添加,
// 它被设置为不可设置(non-configurable)
delete nameOther;  // return false

在严格模式下,这样的操作会抛出异常。

严格模式与非严格模式的对比

在严格模式下,如果对一个变量的直接引用、函数的参数或者函数名使用delete操作,将会抛出语法错误(SyntaxError)。因此,为避免严格模式下的语法错误,必须以delete object.property或delete object['property']的形式使用delete运算符。

Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, });
Object.defineProperty(globalThis, 'variable2', { value: 10, configurable: false, });

console.log(delete variable1); // true

// SyntaxError in strict mode.
console.log(delete variable2); // false
function func(param) {
 // SyntaxError in strict mode.
 console.log(delete param); // false
}

// SyntaxError in strict mode.
console.log(delete func); // false

任何使用var声明的变量都会被标记为不可设置的。在下面的例子中,salary是不可设置的以及不能被删除的。在非严格模式下,下面的delete操作将会返回false。

function Employee() {
 delete salary;
 var salary;
}

Employee();

让我们来看看相同的代码在严格模式下会有怎样的表现。会抛出一个语法错误( SyntaxError)而不是返回false。
"use strict";

function Employee() {
 delete salary; // SyntaxError
 var salary;
}

// 相似的,任何对任何函数
// 直接使用delete操作将会抛出语法错误。

function DemoFunction() {
 //some code
}

delete DemoFunction; // SyntaxError

示例

// 在全局作用域创建 adminName 属性
adminName = 'xyz';

// 在全局作用域创建 empCount 属性
// 因为我们使用了 var,它会标记为不可配置。同样 let 或 const 也是不可配置的。
var empCount = 43;

EmployeeDetails = {
 name: 'xyz',
 age: 5,
 designation: 'Developer'
};

// adminName 是全局作用域的一个属性。
// 因为它不是用 var 创建的,所在可以删除。
// 因此,它是可配置的。
delete adminName;    // 返回 true

// 相反,empCount 是不可配置的,
// 因为创建它时使用了 var。
delete empCount;    // 返回 false

// delete 可用于删除对象的属性
delete EmployeeDetails.name; // 返回 true

// 甚至属性不存在,它也会返回 "true"
delete EmployeeDetails.salary; // 返回 true

// delete 对内建静态属性不起作用
delete Math.PI; // 返回 false

// EmployeeDetails 是全局作用域的一个属性。
// 因为定义它的时候没有使用 "var",它被标记为可配置。
delete EmployeeDetails;  // 返回 true

function f() {
 var z = 44;

 // delete 对局部变量名不起作用
 delete z;   // 返回 false
}

delete 和原型链

在下面的示例中,我们删除一个对象的自己的属性,而原型链上具有相同名称的属性可用:

function Foo() {
 this.bar = 10;
}

Foo.prototype.bar = 42;

var foo = new Foo();

// 返回 true,因为删除的是 foo 对象的自身属性
delete foo.bar;

// foo.bar 仍然可用,因为它在原型链上可用。
console.log(foo.bar);  //42

// 从原型上删除属性
delete Foo.prototype.bar; //true

// 由于已删除“ bar”属性,因此不能再从Foo继承它。
console.log(foo.bar);  //undefined

删除数组元素

当你删除一个数组元素时,数组的长度不受影响。即便你删除了数组的最后一个元素也是如此。

当用 delete 操作符删除一个数组元素时,被删除的元素已经不再属于该数组。下面的例子中用 delete 删除了 trees[3]。

var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
  // 这里不会执行
}

如果你想让一个数组元素继续存在但是其值是 undefined,那么可以使用将 undefined 赋值给这个元素而不是使用 delete。下面的例子中,trees[3] 被赋值为 undefined,但该元素仍然存在。

var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
  // 这里会被执行
}

如果你想通过改变数组的内容来移除一个数组元素,请使用splice() 方法。在下面的例子中,通过使用splice(),将trees[3]从数组中移除。

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
trees.splice(3,1);
console.log(trees); // ["redwood", "bay", "cedar", "maple"]

到此这篇关于js删除对象中的某一个字段的文章就介绍到这了,更多相关js删除对象中的某一个字段内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
iview实现动态表单和自定义验证时间段重叠
Jan 10 #Javascript
JavaScript canvas实现文字时钟
Jan 10 #Javascript
JS代码实现页面切换效果
Jan 10 #Javascript
原生JavaScript实现购物车
Jan 10 #Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 #Javascript
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
JS实现留言板功能
2017/06/17 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python如何给你的程序做性能测试
2020/07/29 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
舞蹈教育学专业自荐信
2014/06/15 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
入党团支部推荐意见
2015/06/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
python析构函数用法及注意事项
2021/06/22 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫