何时使用Map来代替普通的JS对象


Posted in Javascript onApril 29, 2021

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()方法。

检查普通对象从原型继承的属性和方法的列表, 避免使用这些方法名定义自定义属性。

例如,假设有一个管理某些自定义字段的用户界面。 用户可以通过指定名称和值来添加自定义字段:

何时使用Map来代替普通的JS对象

将定制字段的状态存储到普通对象中会很方便:

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对象的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
jquery实现网页定位导航
Aug 23 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
You might like
php&mysql 日期操作小记
2012/02/27 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
django url到views参数传递的实例
2019/07/19 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
销售部主管岗位职责
2013/12/18 职场文书
新书吧创业计划书
2014/01/31 职场文书
电气工程自动化求职信
2014/03/14 职场文书
大跃进口号
2014/06/16 职场文书
篮球社团活动总结
2014/06/27 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python