美文网首页
ES6中Map使用场景示例

ES6中Map使用场景示例

作者: 打静爵 | 来源:发表于2019-06-09 22:53 被阅读0次

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键,这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。

场景示例:假设有这么一个数据

const dogs = [
{
    name: 'max',
    size: 'small',
    breed: 'boston terrier',
    color: 'black'
},
{
    name: 'don',
    size: 'large',
    breed: 'labrador',
    color: 'black'
},
{
    name: 'shadow',
    size: 'medium',
    breed: 'labrador',
    color: 'chocolate'
}
]

现在我们想要数组对象可以添加值,删除值及清空数组,用普通对象的方法处理如下:

let filters = {};
function addFilters(filters, key, value) {
    filters[key] = value;
}
function deleteFilters(filters, key) {
    delete filters[key];
}
function clearFilters(filters) {
    filters = {};
    return filters;
}

这里你正在执行三个基本动作:在集合设置键值,删除键值,清除所有键值 (使用了三种不同的范例)。 第一个,设置键值,在对象本身上使用一个方法; 第二个,删除键值对,使用由语言定义的运算符; 第三,清除所有数据,重新分配一个
变量, 它甚至不是对象的动作, 这是可变的重新分配。

相比之下,Map专门设计用于频繁更新键值对,而且内置了具有可预测的名称和操作方法。

let filters = new Map(
[
    ['breed', 'labrador'],
    ['size', 'large'],
    ['color', 'chocolate'],
]
)
filters.get('color');  // 'chocolate'
filters.delete('color');
filters.get('color');  // undefined
filters.clear()
filters.get('color');  // undefined

所以,使用Map方法处理如下:

const petFilters = new Map();
function addFilters(filters, key, value) {
    filters.set(key, value);
}
function deleteFilters(filters, key) {
    filters.delete(key);
}
function clearFilters(filters) {
    filters.clear();
}

可以看到,Map处理写法代码更清晰,与使用对象创建的函数进行比较可以发现:
•始终在Map实例上使用方法。
•创建初始实例后,没有混合使用语言运算符。
•无需创建新实例即可执行简单操作。

另外一个最佳使用场景是在处理网络错误时:

let errors = new Map([
    [400, 'InvalidParameter'],
    [404, 'Not found'],
    [500, 'InternalError']
]);

网络错误返回的错误码是number类型,而对象的键值key只能是string类型,所以在处理时需要将错误码转换为字符串类型才能访问到对应的数据,而Map就免去了这一步。

相关文章

  • ES6中Map使用场景示例

    JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键...

  • es6 map使用场景

    先看效果图 假设后台返回的数据是一个数组对象,前端可以使用map返回一个新的数组 方式一: 方式二: 本次就分享到...

  • RxJava2.0入门系列二:Map操作符源码解析

    一、应用场景 RxJava 中 map 操作符:对数据源发送的数据进行类型转换。 二、代码示例 上面的代码示例中事...

  • Scala 模式匹配

    功能函数中应用模式匹配(重点)比如在map函数中使用 map中使用的话,map后边的()需要变成{} 1、场景:之...

  • map的用法

    Map概念 Map 对象以键值对保存数据。 map相对object的优点 map使用示例 数组的map方法 map...

  • js map对象

    map对象属于ES6的方法1.迭代器生成map基本创建使用new Map()创建对象。同时也剋使用迭代器使用 2 ...

  • 数组去重的几种方法

    1、双层循环: 优点:兼容性最好 2、标记 使用indexOf 使用filter es6 Set es6 Map

  • 从一个对象中取部分属性组成新的对象

    二十. ES6 中 Set 与 Map

  • Js对象obj如何按照键名key排序

    使用es6写法: let newObj = {}; Object. keys(obj). sort(). map(...

  • 帮大家理解ES6中的Map

    帮大家了解ES6中的map:Map 是 ES6 中新增的数据结构,Map 类似于对象,但普通对象的 key 必须是...

网友评论

      本文标题:ES6中Map使用场景示例

      本文链接:https://www.haomeiwen.com/subject/hmloxctx.html