美文网首页
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使用场景示例

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