何时使用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 相关文章推荐
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jquery.post用法示例代码
Jan 03 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 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实现采集中国天气网未来7天天气
2014/10/15 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python入门之井字棋小游戏
2020/03/05 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
大学在校生求职信范文
2013/11/21 职场文书
中学生运动会入场词
2014/02/12 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
刘胡兰观后感
2015/06/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书