• 通过增删改查对比Array,Map,Set,Object的使用成本和实现方式


    1.Array 和 Map 对比

    { // array and map 增 查 改 删
        let map = new Map();
        let arr = [];
    
        //
        map.set('a', 1);
        arr.push({'a': 1});
        console.log('add', map, arr); // add Map(1) {"a" => 1}  [{a: 1}]
    
        //
        let map_exist = map.has('a');
        let arr_exist = arr.find(item => item.a);
        console.log('exist', map_exist, arr_exist); // exist true {a: 1}
    
        //
        map.set('a', 2);
        arr.forEach(item => item.a ? item.a = 2 : '');
        console.log('mod', map, arr); // mod Map(1) {"a" => 2} [{a: 2}]
    
        // 删除
        map.delete('a');
        let index = arr.findIndex(item=>item.a);
        arr.splice(index, 1);
        console.log('del', map, arr); // del Map(0) {} []
    }

    2.Set 和 Array 对比

    { // Set and array
        let set = new Set();
        let arr = [];
        let o = {a: 1};
    
        //
        set.add(o);
        arr.push(o);
        console.info('add', set, arr); // add Set(1) {{a: 1}} [{a: 1}]
    
        //
        let set_exist = set.has(o);
        let arr_exist = arr.find(item => item.a);
        console.log('exist', set_exist, arr_exist); // exist true {a: 1}
    
        // 改  Set存储对象的时候存储的是引用,所以修改时直接修改数据元素
        set.forEach(item=>item.a? item.a =2:'');
        arr.forEach(item => item.a ? item.a = 2 : '');
        console.info('mod', set, arr); // mod Set(1) {{a: 2}} [{a: 2}]
    
        //
        set.forEach(item=>item.a? set.delete(item):'');
        let index = arr.findIndex(item => item.a);
        arr.splice(index, 1);
        console.log('del', set, arr); // del Set(0) {} []
    }

    3. Map 和 Set 和 Object 对比

    { // map set object 注意对比使用成本和实现方式
        let item = {a: 1};
        let map = new Map();
        let set = new Set();
        let obj = {};
    
        //
        map.set('a', 1);
        set.add(item);
        obj['a'] = 1;
        console.log('add', map, set, obj); // add Map(1) {"a" => 1} Set(1) {{a: 1}} {a: 1}
    
        //
        console.log({
            map_exist: map.has('a'),
            set_exist: set.has(item),
            obj_exist: 'a' in obj
        }); // {map_exist: true, set_exist: true, obj_exist: true}
    
        //
        map.set('a', 2);
        item.a = 2; // set不参与,因为对象存储的是个引用,直接修改元素,没有存储数据元素item可使用forEach遍历修改
        obj.a = 2;
        console.log('mod', map, set, obj); // mod Map(1) {"a" => 2} Set(1) {{a: 2}} {a: 2}
    
        //
        map.delete('a');
        set.delete(item);
        delete obj.a;
        console.log('del', map, set, obj); // del Map(0){}  Set(0){}  {}
    }

    4.总结(基于es6):

    从语义上map最好,set需要依赖一个数据元素item语义上和map差不多,使用成本上map优先。
    综上所述:在开发过程中涉及数据结构时能使用map不使用数组,考虑数据唯一性时使用set,放弃使用数组和object作为数据存储。
  • 相关阅读:
    博客园页面设置(转载)
    正则表达式30分钟入门教程 (转载)
    如何写出优雅的代码
    centos7 nginx+php5.6+mysql安装与配置
    git 进阶
    js 异步解决方案
    行动派
    unicode 与 utf-8
    bower command not found--windows
    click事件细节
  • 原文地址:https://www.cnblogs.com/codebook/p/10559491.html
Copyright © 2020-2023  润新知