何时使用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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
js 代码优化点滴记录
Feb 19 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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更新修改excel中的内容实例代码
2014/02/26 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python读取几个G的csv文件方法
2019/01/07 Python
通过shell+python实现企业微信预警
2019/03/07 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python能做哪些生活有趣的事情
2020/09/09 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
企业车辆管理制度
2014/01/24 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
学校课外活动总结
2014/05/08 职场文书
小学教师读书活动总结
2014/07/08 职场文书
婚庆公司计划书
2014/09/15 职场文书
事业单位考察材料范文
2014/12/25 职场文书
公司人事管理制度
2015/08/05 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers