美文网首页
<<深入理解ES6>>记:七

<<深入理解ES6>>记:七

作者: 闫小兀 | 来源:发表于2017-11-21 18:29 被阅读15次

    第7章 Set集合和Map集合

    1.问题描述

    var map = Object.create(null), key1 = {}, key2 = {};
    map[key1] = "ylz";
    console.log(map[key2]);
    由于对象属性的键名必须是字符串, 因而代码中的key1和key2将转化为对象对应的默认字符串"[object Object]"
    

    2.ES6中的Set集合
    ES6中新增的Set类型是一种有序列表,其中含有一些相互独立的非重复值,通过Set集合可以快速访问其中的数据, 更有效地追踪各种离散值.

    • 创建Set集合并添加元素
    let set = new Set();
    set.add(5);
    set.add('5');
    console.log(set.size);    // 2
    
    • 通过has()方法可以检测Set集合是否存在某个值
    let set = new Set();
    set.add(5);
    console.log(set.has(5));   // true
    
    • 移除
    set.delete(5);
    
    • Set, 数组互转
    let set = new Set([1, 2, 3, 3, 4]);
        array = [...set];
    console.log(array);      // [1, 2, 3, 4];
    
    • Weak Set集合
    let set = new Set(), key = {};
    set.add(key);
    console.log(set.size);     // 1
    // 移除原始引用
    key = null;
    console.log(set.size);     // 1
    // 重新获取原始引用
    key = [...set][0];
    

    如上实例中, 明明已经删除, 但是Set依然持有引用(Set集合可以被看做强引用的集合), 为了解决这个问题, ES6提出另一种类型: Weak Set集合(弱引用Set集合);

    let set = new WeakSet(),
        key = {};
    set.add(key);    
    console.log(set.has(key));   // true
    set.delete(key);
    console.log(set.has(key));
    
    • 两种Set类型的区别
      • WeakSet实例中,不能向add(), has(), delete()这3个方法传入非对象参数
      • WeakSet集合不能迭代,所以不能被用于for-of循环
      • WeakSet集合不支持forEach();
      • WeakSet集合不支持size属性

    3.ES6中的Map集合
    Set类型可以用来处理列表中的值, 但是不适合用于处理键值对这样的信息结构.ES6添加了Map集合解决类似问题

    • Map集合初始化方法
    let map = new Map(['name', 'ylz'], ['age', 25]);
    map.set('sex', '男');
    console.log(map.has('name'));   // true
    console.log(map.get('name'));   // 'ylz'
    console.log(map.size);   // 'ylz'
    
    • Map集合支持的方法

      • has(key)
      • delete(key)
      • clear()
    • Map集合可以forEach()遍历

    • Weak Map集合

    • 私有对象数据
      尽管Weak Map集合会被大多数开发者用于存储DOM元素, 但是它其实也是很多其他的用途, 其中一个实际应用是存储对象实例的私有数据.

    let Person = (function() {
        let privateData = new WeakMap();
        function Person(name) {
            privateData.set(this, {name: name});
        };
        Person.prototype.getName = function() {
            return privateData.get(this).name
        }
        return Person;
    })()
    

    相关文章

      网友评论

          本文标题:<<深入理解ES6>>记:七

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