Map对象和普通对象的7个区别
来源 | 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,但它为我们提供了很多实用的方法来减轻我们的认知负担,比普通对象更高级。
学习更多技能
请点击下方公众号
相关阅读
-
世界热推荐:今晚7:00直播丨下一个突破...
今晚19:00,Cocos视频号直播马上点击【预约】啦↓↓↓在运营了三年... -
NFT周刊|Magic Eden宣布支持Polygon网...
Block-986在NFT这样的市场,每周都会有相当多项目起起伏伏。在过去... -
环球今亮点!头条观察 | DeFi的兴衰与...
在比特币得到机构关注之后,许多财务专家预测世界将因为加密货币的... -
重新审视合作,体育Crypto的可靠关系才能双赢
Block-987即使在体育Crypto领域,人们的目光仍然集中在FTX上。随着... -
简讯:前端单元测试,更进一步
前端测试@2022如果从2014年Jest的第一个版本发布开始计算,前端开发... -
焦点热讯:刘强东这波操作秀
近日,刘强东发布京东全员信,信中提到:自2023年1月1日起,逐步为...