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

2019-08-15 admin

在 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 三种方法该如何抉择?

图片描述

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

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

那么在实际的业务开发中,可以考虑使用设置为 undefined 来代替 delete,或者说使用 Map 来代替 object ,例如

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

图片描述

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

[转载]原文链接:https://segmentfault.com/a/1190000020081647

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72574.html

文章标题:# 为什么说在 JS 中要避免使用 delete

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
回到顶部