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中top的作用深入剖析
Mar 04 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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脚本的10个技巧(7)
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
python调用API实现智能回复机器人
2018/04/10 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
什么是规则表达式
2012/05/03 面试题
监理员的岗位职责
2013/11/13 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
九年级体育教学反思
2014/01/23 职场文书
《都江堰》教学反思
2014/02/07 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
火灾现场处置方案
2014/05/28 职场文书
文化产业实施方案
2014/06/07 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
公司2014年度工作总结
2014/12/10 职场文书