為什么說在 JS 中要避免使用 delete

sevi_stuo 發布于2019-08-26 10:48 / 2548人閱讀

摘要：在中操作符用于刪除對象的某個屬性。在運行時會創建隱藏類，這些類附加到每個對象上，以跟蹤其形狀布局。可以很明顯地得出一個結論，設置為。

在 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坦白說在哪

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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