• 您的位置:首頁 >聚焦 >

    Map對象和普通對象的7個區別

    2022-04-03 19:00:40    來源:程序員客棧

    來源 | https://levelup.gitconnected.com/7-differences-between-map-objects-and-plain-objects-9690a78fbc06

    在 JavaScript 中,普通對象和 ES6 的新對象 Map 都可以存儲鍵值對,但是,它們之間有什么區別呢?本文將為您一一揭曉。1、初始化與使用普通對象可以直接使用字面量進行初始化,而 Map 需要 Map() 構造函數進行初始化,如果想要有初始值,則需要傳遞一個數組或其他元素為鍵值對的可迭代對象。這些鍵值對中的每一個都將被添加到一個新的 Map 中。

    const obj = {name: 1,age: 2,};const map = new Map([["name", 1],["age", 2],]);

    與普通對象相比,Map 作為哈希表提供了許多有用的功能。比如判斷一個key是否在hash表中,在map中可以使用has方法輕松判斷,但是在普通對象中可能會增加復雜度。

    另外,set方法可以為Map設置key值,get方法可以獲取value,size屬性可以返回當前Map中key/value對的數量,而plain對象需要手動計算使用 自己的方法等。詳情見MDN。

    2、?密鑰類型

    普通對象只接受字符串和符號作為鍵值,其他類型將被強制轉換為字符串類型,而 Map 可以接受任何類型的鍵值(包括函數、對象或任何原語)。

    const obj = {};const map = new Map();const key = function () {};obj[key] = 1;map.set(key, 1);// { "function () {}": 1 }console.log("obj: ", obj);// Map(1) { [Function: key] => 1 }console.log("map: ", map);

    3、Accidental keys

    普通對象從原型繼承了許多屬性鍵,例如構造函數等。因此,自己的密鑰很可能與原型上的密鑰發生沖突。但是 Map 默認不包含任何鍵,它只包含那些顯式放入的。

    const obj = {};const map = new Map();console.log(obj.constructor); // ? Object() { [native code] }console.log(map.get("constructor")); // undefined

    4、Key order

    雖然現在對普通對象的鍵進行了排序,但情況并非總是如此,而且排序很復雜。例如,如果對象中有鍵需要轉換為字符串,則不保留對象鍵的原始順序。雖然 Map 以簡單的方式排序,但它始終與我們插入的順序相同。

    const obj = {name: 1,age: 2,3: 4,};const map = new Map([["name", 1],["age", 2],[3, 4],]);// The original order is not preserved.// {3: 4, name: 1, age: 2}console.log("obj: ", obj);// Map(3) { "name" => 1, "age" => 2, 3 => 4 }console.log("map: ", map);

    5、迭代

    我們可以使用 for...of 語句或 Map.prototype.forEach 直接迭代 Map 的屬性,而普通對象不能直接迭代。

    const obj = {name: 1,age: 2,};const map = new Map([["name", 1],["age", 2],]);for (const [key, value] of map) {console.log(`${key}: `, value); // name: 1, age: 2}map.forEach((value, key) => {console.log(`${key}: `, value); // name: 1, age: 2});// Plain objects are not iterable directly.// But we can use functions like `Object.keys` to help us.Object.keys(obj).forEach((key) => {console.log(`${key}: `, obj[key]); // name: 1, age: 2});

    6、序列化和解析

    普通對象支持 JSON 序列化,但 Map 默認無法獲取正確數據。

    const obj = {name: 1,age: 2,};const map = new Map([["name", 1],["age", 2],]);console.log(JSON.stringify(obj)); // "{"name":1,"age":2}"console.log(JSON.stringify(map)); // "{}"

    7、性能

    Map 對象在涉及頻繁添加和刪除鍵值對的場景中表現更好,而普通對象沒有優化。

    總結

    那么普通對象應該被 Map 對象替換嗎?

    不,如果我們想在 JSON 和原始數據之間轉換或包含特定的業務邏輯,那么我們應該使用普通對象。因為當我們只想存儲鍵值對和循環操作或不斷添加和刪除屬性時,使用 Map 對象是更好的選擇。

    Map對象雖然也是繼承自底層的Object.prototype,但它為我們提供了很多實用的方法來減輕我們的認知負擔,比普通對象更高級。

    學習更多技能

    請點擊下方公眾號

    關鍵詞: 構造函數 需要手動

    相關閱讀

    BB电子