美文网首页前端直通车
es6全家桶(四)—— Set, Map数据结构

es6全家桶(四)—— Set, Map数据结构

作者: 一个顽固的橙子 | 来源:发表于2017-08-10 14:45 被阅读13次
    图片来自简书

    Set

    先来看下Set的知识结构图

    图片来自简书

    下面主要讲解下set的基本用法和遍历相关的知识点

    Set基本用法

    Set 本身是一个构造函数,用来生成 Set 数据结构。new Set()初始化

    const set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]
    

    Set 实例的方法

    • add(value):添加某个值,返回Set结构本身。
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    • has(value):返回一个布尔值,表示该值是否为Set的成员。
    • clear():清除所有成员,没有返回值。
    s.add(1).add(2).add(2);
    // 注意2被加入了两次
    
    s.size // 2
    
    s.has(1) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false
    

    去除数组重复成员的方法总结

    1. Set 函数初始化
      [...new Set(array)]
    2. Array.from方法可以将 Set 结构转为数组。
      const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);

    Set遍历及其应用

    1. 四个遍历方法
    • keys():返回键名的遍历器
    • values():返回键值的遍历器
    • entries():返回键值对的遍历器
    • forEach():使用回调函数遍历每个成员
    let set = new Set(['red', 'green', 'blue']);
    
    for (let item of set.keys()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.values()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.entries()) {
      console.log(item);
    }
    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]
    
    // forEach()
    let set = new Set([1, 2, 3]);
    set.forEach((value, key) => console.log(value * 2) )
    

    还可以用for...of循环遍历 Set。

    let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set) {
      console.log(x);
    }
    // red
    // green
    // blue
    
    1. 遍历的应用
      结合扩展运算符一起使用,去除数组的重复成员
    let set = new Set(['red', 'green', 'blue']);
    let arr = [...set];
    
    let arr = [3, 5, 2, 2, 5, 5];
    let unique = [...new Set(arr)];
    // [3, 5, 2]
    

    数组的map和filter方法也可以用于Set

    let set =  new Set([1,2,3]);
    set = new Set([...set]).map(x => x * 2));
    // {2, 4, 6}
    
    let set = new Set([1,2,3,4,5]);
    set = new Set([...set].filter(x => (x % 2) == 0 ));
    // {2, 4}
    

    实现并集(Union)、交集(Intersect)和差集(Difference)。

    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    
    // 并集
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}
    
    // 差集
    let difference = new Set([...a].filter(x => !b.has(x)));
    

    WeakSet

    它与 Set 有两个区别。

    首先,WeakSet 的成员只能是对象,而不能是其他类型的值。
    其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用

    Map

    先来看下Map的知识结构图


    图片来自简书

    下面主要介绍下Map的基本用法、遍历方法和与其他数据结构的相互转换

    基本用法

    1. 定义
      Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现,比Object更适合的“键值对”的数据结构。

    2. 实例的属性和操作方法

    • size属性 返回 Map 结构的成员总数。
    • set(key, value)
    • get(key) 找不到key,返回undefined
    • has(key)
    • delete(key 删除失败,返回false。
    • clear() 清除所有成员,没有返回值
    const map = new Map();
    map.set('foo', 'a);
    map.set('bar', 'b);
    map.size // 2
    map.get('foo') // a
    map.clear()
    map.size // 0
    
    const m = new Map();
    m.set(undefined, 'nah');
    m.has(undefined)     // true
    m.delete(undefined)
    m.has(undefined)       // false
    

    遍历方法

    • keys():返回键名的遍历器。
    • values():返回键值的遍历器。
    • entries():返回所有成员的遍历器。
    • forEach():遍历 Map 的所有成员。

    Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。

    const map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    [...map.keys()]
    // [1, 2, 3]
    
    [...map.values()]
    // ['one', 'two', 'three']
    
    [...map.entries()]
    // [[1,'one'], [2, 'two'], [3, 'three']]
    
    [...map]
    // [[1,'one'], [2, 'two'], [3, 'three']]
    
    map.forEach(function(value, key, map) {
      console.log("Key: %s, Value: %s", key, value);
    });
    

    与其他数据结构的互相转换

    • Map 转为数组
      使用扩展运算符(...)
    • 数组 转为 Map
      将数组传入 Map 构造函数,就可以转为 Map。
    new Map([
     [true, 7],
     [{foo: 3}, ['abc']]
    ])
    // Map {
    //   true => 7,
    //   Object {foo: 3} => ['abc']
    // }
    
    • Map 转为对象
      如果所有 Map 的键都是字符串,它可以转为对象。
    function strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k,v] of strMap) {
        obj[k] = v;
      }
      return obj;
    }
    
    const myMap = new Map()
      .set('yes', true)
      .set('no', false);
    strMapToObj(myMap)
    // { yes: true, no: false }
    
    • 对象转为 Map
    function objToStrMap(obj) {
      let strMap = new Map();
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
      }
      return strMap;
    }
    
    objToStrMap({yes: true, no: false})
    // Map {"yes" => true, "no" => false}
    
    • Map 转为 JSON
      Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。
    function strMapToJson(strMap) {
      return JSON.stringify(strMapToObj(strMap));
    }
    
    let myMap = new Map().set('yes', true).set('no', false);
    strMapToJson(myMap)
    // '{"yes":true,"no":false}'
    

    另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。

    function mapToArrayJson(map) {
      return JSON.stringify([...map]);
    }
    
    let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
    mapToArrayJson(myMap)
    // '[[true,7],[{"foo":3},["abc"]]]'
    
    • JSON 转为 Map
    function jsonToStrMap(jsonStr) {
      return objToStrMap(JSON.parse(jsonStr));
    }
    
    jsonToStrMap('{"yes": true, "no": false}')
    // Map {'yes' => true, 'no' => false}
    
    function jsonToMap(jsonStr) {
      return new Map(JSON.parse(jsonStr));
    }
    
    jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
    // Map {true => 7, Object {foo: 3} => ['abc']}
    

    WeakMap

    WeakMap与Map的区别有两点。
    首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名
    其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。

    相关文章

      网友评论

        本文标题:es6全家桶(四)—— Set, Map数据结构

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