为什么说在 JS 中要避免使用 delete

软件模
• 阅读 7325

在 JavaScript 中 delete 操作符用于删除对象的某个属性。例如

const person = {
    name: 'sudada',
    gender: 'female'
}

delete person.name

console.log(person.name) // undefined

与最直观的语义不同,使用 delete 操作符并不会直接释放内存,而是说它会使得 V8(Javascript)引擎中的 hidden class 失效,将该 object 变为一个通用的 slow object,这就使得执行速度有了很明显的降低。

hidden class:由于 JavaScript 是一种动态编程语言,属性可进行动态的添加和删除,这意味着一个对象的属性是可变的,大多数的 JavaScript 引擎(V8)为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类,这些类附加到每个对象上,以跟踪其形状/布局。这样可以优化属性访问时间。

参考:

http://debuggable.com/posts/u...:4c7e81e4-1330-4398-8bd2-761bcbdd56cb

https://stackoverflow.com/que...

那么如果不使用 delete ,我们如何删除对象的属性?

最有效的方式,应该是将不需要的属性设置为 undefined ,例如

const person = {
    name: 'sudada',
    gender: 'female'
}

person.name = undefined // 删除 name 属性

或者你也可以考虑使用 Spread Operator for objects,例如

const person = {
    name: 'sudada',
    gender: 'female'
}
const omit = (prop, { [prop]: _, ...rest }) => rest;
const newObj = omit('name', person); // 删除 name 属性
关于 Spread Operator for objects 的参考:https://juejin.im/post/5c35bd...

那么 delete、设置为 undefinedomit 三种方法该如何抉择?

为什么说在 JS 中要避免使用 delete

图中显示了,在不同的 Javascript 内核下,三种方法的效率(每秒执行数)。可以很明显地得出一个结论,设置为 undefined > delete > omit

实例地址:https://jsperf.com/removing-v...

但是设置为 undefined,得到的结果为

{
    name: undefined,
    gender: 'female'
}

有时需要额外的操作,例如

JSON.parse(JSON.stringify(person))
// 或者
Object.keys(person).reduce((pre, cur) => {
    const value = person[cur]
    return value === undefined ? pre : {...pre, [cur]: value}
}, {})

这样效率会大幅度地降低,所以在实际业务中可以考虑使用 Map 来代替 object ,例如

let map = new Map([['a', 1]])
let obj = { a: 1 };
// 执行
delete obj.a;
map.delete('a');

为什么说在 JS 中要避免使用 delete

从图中,可以很明显的得出 map.delete 优于 delete

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
4年前
java8新特性
Stream将List转换为Map,使用Collectors.toMap方法进行转换背景:User类,类中分别有id,name,age三个属性。List集合,userList,存储User对象1、指定keyvalue,value是对象中的某个属性值。 Map<Integer,StringuserMap1userList.str
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
4年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Stella981 Stella981
4年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
4年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这