文章目錄
- 1.Number運算操作
- 2.空位陣列行為差異
- 3.Object和Map的選擇對比
- 記憶體占用
- 插入性能
- 查找速度
- 洗掉性能
- 4.WeakMap特性
- 5.可計算屬性
- 6.new.target
- 7.作用域鏈相關
- 8.dom元素事件階段
1.Number運算操作
Javascript浮點值采用得是IEEE-754雙精度標準模型，因此是占用8個位元組的記憶體空間,因為設計精度問題,所以不能測驗特定的浮點值,比如:0.1+0.2 != 0.3，具體的計算流程和原因可以參考這篇Number型別詳解博客 ，js高程第四版有說存盤整形值比浮點值的記憶體空間減少一半,但javascript數值只有Number型別,并且Number型別遵循IEEE-754雙精度標準，按理說不該有記憶體上的占用區別,此疑問留待解決，
2.空位陣列行為差異
ES6新增的方法和迭代器與早期ECMAScript版本中存在的方法行為不同，導致對空位陣列的處理行為不一致，ES6的新增方法會將空位元素當作undefine，ES6之前的方法會忽略空位，因此實踐中避免使用陣列空位，如果確實需要空位，采用顯示設定undefine值代替，
3.Object和Map的選擇對比
對于多數Web開發任務來說，選擇Object還是Map只是個人偏好問題，影響不大，不過，對于在乎記憶體和性能的開發者來說，物件和映射之間確實存在顯著的差別，
記憶體占用
Object和Map的工程級實作在不同瀏覽器間存在明顯差異，但存盤單個鍵/值對所占用的記憶體數量都會隨鍵的數量線性增加，批量添加或洗掉鍵/值對則取決于各瀏覽器對該型別記憶體分配的工程實作，不同瀏覽器的情況不同，但給定固定大小的記憶體，Map大約可以比Object多存盤50%的鍵/值對，
插入性能
向Object和Map中插入新鍵/值對的消耗大致相當，不過插入Map在所有瀏覽器中一般會稍微快一點兒，對這兩個型別來說，插入速度并不會隨著鍵/值對數量而線性增加，如果代碼涉及大量插入操作，那么顯然Map的性能更佳，
查找速度
與插入不同，從大型Object和Map中查找鍵/值對的性能差異極小，但如果只包含少量鍵/值對，則Object有時候速度更快，在把Object當成陣列使用的情況下（比如使用連續整數作為屬性），瀏覽器引擎可以進行優化，在記憶體中使用更高效的布局，這對Map來說是不可能的，對這兩個型別而言，查找速度不會隨著鍵/值對數量增加而線性增加，如果代碼涉及大量查找操作，那么某些情況下可能選擇Object更好一些，
洗掉性能
使用delete洗掉Object屬性的性能一直以來飽受詬病，目前在很多瀏覽器中仍然如此，為此，出現了一些偽洗掉物件屬性的操作，包括把屬性值設定為undefined或null，但很多時候，這都是一種討厭的或不適宜的折中，而對大多數瀏覽器引擎來說，Map的delete()操作都比插入和查找更快，如果代碼涉及大量洗掉操作，那么毫無疑問應該選擇Map，
4.WeakMap特性
weakMap只能使用物件作為"弱鍵"，由于弱鍵的特性，當鍵值沒有參考時，會被垃圾回收，"弱鍵"即便有參考,但參考在程式運行中不會被呼叫,也會被回收，
5.可計算屬性
可計算屬性，可以在物件字面量中完成動態屬性賦值，中括號包圍的物件屬性鍵告訴運行時將其作為JavaScript運算式而不是字串來求值：
const nameKey = 'name';
const ageKey = 'age';
const jobKey = 'job';
let person = {
[nameKey]: 'Matt',
[ageKey]: 27,
[jobKey]: 'Software engineer'
};
6.new.target
抽象基類通過new.target可以實作，new.target保存通過new關鍵字呼叫的類或函式，通過在實體化時檢測new.target是不是抽象基類，可以阻止對抽象基類的實體化:
// 抽象基類
class Vehicle {
constructor() {
console.log(new.target);
if (new.target === Vehicle) {
throw new Error('Vehicle cannot be directly instantiated');
}
}
}
// 派生類
class Bus extends Vehicle {}
new Bus(); // class Bus {}
new Vehicle(); // class Vehicle {}
// Error: Vehicle cannot be directly instantiated
7.作用域鏈相關
函式執行時，每個執行背景關系中都會有一個包含其中變數的物件，全域背景關系中的叫變數物件，它會在代碼執行期間始終存在，而函式區域背景關系中的叫活動物件，只在函式執行期間存在，定義函式時，就會為它創建作用域鏈，預裝載全域變數物件，并保存在內部的[[Scope]]中，在呼叫這個函式時，會創建相應的執行背景關系，然后通過復制函式的[[Scope]]來創建其作用域鏈，接著會創建函式的活動物件（用作變數物件）并將其推入作用域鏈的前端，作用域鏈越長，則查找變數所需的時間也越多，因此應該注意盡量減短作用域鏈的長度，
8.dom元素事件階段
DOM事件流分為3個階段：事件捕獲、到達目標和事件冒泡，事件捕獲最先發生，為提前攔截事件提供了可能，然后，實際的目標元素接收到事件，最后一個階段是冒泡，最遲要在這個階段回應事件，大多數支持DOM事件流的瀏覽器實作了一個小小的拓展，雖然DOM2 Events規范明確捕獲階段不命中事件目標，但現代瀏覽器都會在捕獲階段在事件目標上觸發事件，最終結果是在事件目標上有兩個機會來處理事件，addEventListener方法的第三個引數Boolean值是指定事件注冊的階段,默認為false，注冊到冒泡階段,true注冊到捕獲階段，一般都添加到冒泡階段,除非事件需要攔截，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290286.html
標籤：其他