何时使用Map来代替普通的JS对象
1. Map 接受任何类型的键
如前所述，如果对象的键不是string或symbol，JS 将隐式地将其转换为字符串。
幸运的是，map的键类型没有问题
const numbersMap = new Map(); numbersMap.set(1, 'one'); numbersMap.set(2, 'two'); [...numbersMap.keys()]; // => [1, 2]
1和2是numbersMap中的键，这些键的类型（数字）保持不变。
可以在mpa中使用任何键类型:数字、布尔值、字符串和symbol。
const booleansMap = new Map(); booleansMap.set(true, "Yep"); booleansMap.set(false, "Nope"); [...booleansMap.keys()]; // => [true, false]
booleansMap使用booleans作为键，没有问题。相反，布尔键在普通对象中不起作用。
来突破一下想象:是否将整个对象作为map的键，答案：可以的。
对象作为键
假设你需要存储一些与对象相关的数据，而不需要将这些数据附加到对象本身。使用普通对象是不可能的。
解决方法是使用对象-值元组数组：
const foo = { name: 'foo' };
const bar = { name: 'bar' };
const kindOfMap = [
[foo, 'Foo related data'],
[bar, 'Bar related data']
]
kindOfMap是一个数组，包含对象和关联值的对。
这种方法最大的问题是按键访问值的复杂度O(n)，咱们必须遍历整个数组才能通过键获得所需的值。
function getByKey(kindOfMap, key) {
for (const [k, v] of kindOfMap) {
if (key === k) {
return v;
}
}
return undefined;
}
getByKey(kindOfMap, foo); // => 'Foo related data'
WeakMap(Map的一个专门版本)不需要这么麻烦就能做到上面的事情:它只接受对象作为键。
Map和Weakmap之间的主要区别是，Weakmap允许对键对象进行垃圾收集，从而防止内存泄漏。
好了，用WeakMap重构上面的代码就变得很简单了：
const foo = { name: 'foo' };
const bar = { name: 'bar' };
const mapOfObjects = new WeakMap();
mapOfObjects.set(foo, 'Foo related data');
mapOfObjects.set(bar, 'Bar related data');
mapOfObjects.get(foo); // => 'Foo related data'
与Map相反，WeakMap只接受对象作为键，并少了一些方法。
2. map 对键名没有限制
JS 中的任何对象都从原型对象继承属性，普通对象也是如此。
如果重写从原型继承的属性，则可能会破坏依赖这些原型属性的代码：
function isPlainObject(value) {
return value.toString() === '[object Object]';
}
const actor = {
name: 'Harrison Ford',
toString: 'Actor: Harrison Ford'
};
// Does not work!
isPlainObject(actor); // TypeError: value.toString is not a function
在对象参与者上定义的属性toString覆盖从原型继承的toString()方法。这中断了isObject()，因为它依赖于toString()方法。
检查普通对象从原型继承的属性和方法的列表, 避免使用这些方法名定义自定义属性。
例如，假设有一个管理某些自定义字段的用户界面。 用户可以通过指定名称和值来添加自定义字段：
将定制字段的状态存储到普通对象中会很方便：
const userCustomFields = {
'color': 'blue',
'size': 'medium',
'toString': 'A blue box'
};
但是用户可能会选择一个自定义字段名称，例如toString（如示例中所示），构造函数等，这可能会破坏咱们的对象。
不要使用用户输入的值作为普通对象上键。
map没有这个问题，键值名称不受限制：
function isMap(value) {
return value.toString() === '[object Map]';
}
const actorMap = new Map();
actorMap.set('name', 'Harrison Ford');
actorMap.set('toString', 'Actor: Harrison Ford');
// Works!
isMap(actorMap); // => true
不管actorMap有一个名为toString的属性，toString()方法都可以正常工作。
3. map 是可迭代
为了遍历普通对象的属性，必须使用其他的辅助静态函数，如Object.keys()或Object.entries():
const colorsHex = {
'white': '#FFFFFF',
'black': '#000000'
};
for (const [color, hex] of Object.entries(colorsHex)) {
console.log(color, hex);
}
// 'white' '#FFFFFF'
// 'black' '#000000'
Object.entries(colorsHex)返回从对象提取的键值对数组。
但是，map本身是可迭代的：
const colorsHexMap = new Map();
colorsHexMap.set('white', '#FFFFFF');
colorsHexMap.set('black', '#000000');
for (const [color, hex] of colorsHexMap) {
console.log(color, hex);
}
// 'white' '#FFFFFF'
// 'black' '#000000'
colorsHexMap是可迭代。可以在任何接受迭代的地方使用它:for()循环，展开运算符[...map]。
map提供了返回可迭代方法：map.keys()遍历键，map.values()遍历值
4. map 的大小
普通对象的另一个问题是，您无法立马知道它包含的属性的数量。
const exams = {
'John Smith': '10 points',
'Jane Doe': '8 points',
};
Object.keys(exams).length; // => 2
要确定exams的大小，必须通过所有键来确定它们的数量。
map 提供了 size 属性，表示属性的数量。
const examsMap = new Map([ ['John Smith', '10 points'], ['Jane Doe', '8 points'], ]); examsMap.size; // => 2
确定map的属性的数量更加简单：examsMap.size。
以上就是何时使用Map来代替普通的JS对象的详细内容，更多关于JS对象的资料请关注我们其它相关文章！
相关推荐
-
JS自定义对象实现Java中Map对象功能的方法
本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容! 这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码 代码如下: /** *
-
js中遍历Map对象的简单实例
实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j
-
js中生成map对象的方法
复制代码 代码如下: var Map = function(){ this._entrys = new Array(); this.put = function(key, value){ if (key == null || key == undefined) { return; } var index = this._getIndex(key); if (index == -1) { var entry = new Object(); entry.key = key; entry.value
-
JAVA中JSONObject对象和Map对象之间的相互转换
1.由json字符串转换成Map对象 如json字符串:{"contend":[{"bid":"22","carid":"0"},{"bid":"22","carid":"0"}],"result":100,"total":2} 下面直接附代码: //json字符串 String json
-
Java 把json对象转成map键值对的方法
工具方法: 本文的目的是把json串转成map键值对存储,而且只存储叶节点的数据 maven 引用jar包版本: <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20090211</version> </dependency> 工具类: package com.baofoo.admin.test; /
-
js中遍历Map对象的方法
js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件
-
将JSON字符串转换成Map对象的方法
页面向后台action传递一个json字符串,需要将json字符串转换成Map对象 public Map<String, String> toMap(Object object) { Map<String, String> data = new HashMap<String, String>(); // 将json字符串转换成jsonObject JSONObject jsonObject = JSONObject.fromObject(object); Iterato
-
javascript实现Java中的Map对象功能的实例详解
javascript 自定义对象实现Java中的Map对象功能 Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容! 这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: /** * @version 1.0 * @author cuisuqia
-
Js遍历键值对形式对象或Map形式的方法
最近在项目中使用ajax返回的是一个map对象,怎么遍历这个map对象?去网上查了好多,真正有用很少,终于让我想起自己以前一个需要遍历key=Value形式的对象,想了想这种方式,应该也对于map适用吧.所以试了下,成功了!记录下来以备后用. 在JS中如何遍历key=value键值对,对象的数据(也可以是map形式). for ( var key in changes) { //通过遍历对象属性的方法,遍历键值对,获得key,然后通过 对象[key]获得对应的值 name = key; valu
-
何时使用Map来代替普通的JS对象
1. Map 接受任何类型的键 如前所述,如果对象的键不是string或symbol,JS 将隐式地将其转换为字符串. 幸运的是,map的键类型没有问题 const numbersMap = new Map(); numbersMap.set(1, 'one'); numbersMap.set(2, 'two'); [...numbersMap.keys()]; // => [1, 2] 1和2是numbersMap中的键,这些键的类型(数字)保持不变. 可以在mpa中使用任何键类型:数字.布尔
-
JSON与js对象序列化实例详解
本文实例讲述了JSON与js对象序列化.分享给大家供大家参考,具体如下: JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语言无关,它可以用于在现在所有的编程语言编写的应用程序之间进行数据交换.是一种文本格式,比较容易读写. JSON是一个容纳"名/值"对的无序集合,名字可以是任意字符串,值可以使任意的JSON类型的值.大多数编程语言都有
-
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new
-
js对象属性名驼峰式转下划线的实例代码
一.题目示例: 思路: 1.匹配属性名字符串中的大写字母和数字 2.通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置 3.判断大写字母的位置是否为首位置以及lastIndex是否为0,为0则表示匹配结束 4.将存放位置的数组进行从小到大排序,排序后将属性名按照字符串的slice方法切割并使用下划线重组 5.遍历对象的属性名并使用函数改变为新的命名,从新赋值到新的对象上(也可以使用改变对象的ES6新语法) 6.注意,每次在调用函数后,需要清空之前存放位置的数组 二.实现代码 le
-
JS对象数组去重的3种方法示例及对比
目录 一.去重前后数据对比 二.使用方法 1.使用filter和Map 2.使用reduce 3.使用for循环 三.2400条数据,三种方法处理时间对比 总结 一.去重前后数据对比 // 原数据是这样的 // 去重后数据是这样的 [{ [{ "goodsId": "1", "goodsId": "1", "quota": 12, "quota": 12, "skuId&quo
-
详解JS对象遍历的顺序问题
可能有些同学听过在 JavaScript 中遍历对象顺序不固定的这一说法.事实上,这个说法不是特别准确. 对待遍历顺序,对象有一套自己既定的规则,在此规则下呢,对象的遍历顺序会受插入元素顺序的影响,但是不完全受插入元素先后顺序的影响.如果您有「必须按插入元素顺序遍历」的场景,可以考虑使用 Map. 遍历对象的方法有很多种,我们经常会使用的有 for...in ,除此之外,还有: Object.keys Object.entries Obejct.getOwnerProPertyNames Ref
-
JS对象与JSON格式数据相互转换
目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递
-
JS对象的深度克隆方法示例
本文实例讲述了JS对象的深度克隆方法.分享给大家供大家参考,具体如下: js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象. 尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的! 我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现! 我整理了两种深度克隆对象的方法,供大家参考! 首先var 一个假数据 复制代码 代码如下: var schedule = {"status"
-
js对象的复制继承实例
本文实例讲述了js对象的复制继承.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script type="text/javascript"> Object.prototype.extend = function(obj){ //在函数里,把obj属性复制到自身 for(var k in obj){ if(obj.hasOwnProperty(k)){ if(this[k] == undefined){ this[k] = obj[k];
-
javascript遍历json对象的key和任意js对象属性实例
使用 keys 方法获取该对象的属性和方法: function Pasta(grain, width, shape) { this.grain = grain; this.width = width; this.shape = shape; this.toString = function () { return (this.grain + ", " + this.width + ", " + this.shape); } } var spaghetti = new