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

sevi_stuo 发布于2019-08-26 10:48 / 2545人阅读

摘要：在中操作符用于删除对象的某个属性。在运行时会创建隐藏类，这些类附加到每个对象上，以跟踪其形状布局。可以很明显地得出一个结论，设置为。

在 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、设置为 undefined 、omit 三种方法该如何抉择？

图中显示了，在不同的 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");

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

云服务器 GPU云服务器 delete使用方法 js delete 什么是sql注入如何避免 qq坦白说在哪

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106795.html

Java 实现与 Word 风格相似的菜单

摘要：因为这意味着用户实现功能的时间变少。人类的失误设计过程中要尽量避免用户意外点中不相关的功能。常见的操作会用工具栏来实现，它们被包裹在子菜单中。子菜单可以利用实现，当用户点击其他的子菜单时当前显示的子菜单应从移除。最后一次更新于 2019/07/09 菜单效果演示图 Microsoft WordshowImg(https://segmentfault.com/img/bVbuSpm?w...

JeOam 2019-08-16 18:31 评论0 收藏0
Node.js 热更新（一）

摘要：直到最近在使用微信机器人时，遇到了强烈的需求。增删文件后热更新上面的代码已经不小心实现了增加文件后热更新，因为表示检测的更新，如果增加一个，那么就变成，于是新模块不等于老模块不存在，从而使用注册事件监听器。背景刚思考这个话题的时候，首先想到的是 Vue 或 React 的组件热更新（基于 Webpack HMR），后来又想到了 Lua、Erlang 等语言的热更新，不过在实际开发 ...

LancerComet 2019-08-20 15:41 评论0 收藏0