zoukankan      html  css  js  c++  java
  • 新增数据结构 Set、Map

    一、新增数据结构 Set

    1. Set 数据 的特点

    • Set 数据 类型为 object

    • Set 数据 结构类似数组,可遍历

    • Set 数据 只存在 (或者说键名、键值是相同)

    let a = 1;
    let b = {key: 'bb'};
    let set = new Set([a, b]);
    
    console.log(set);  // 如下图
    

    • Set 数据 内的成员是 唯一的

      • 内部作:强等于 === 判断

      • NaN等于自身(也就是说,一个Set类型的数据,最多只能有一个 NaN)

      • 判断对象的唯一性:向 Set 中添加对象时,判断 对象是否指向同一块内存地址,且内存中存储的数据是否一致

    let a = {a: 1};
    let b = {b: 1};
    let c = 2;
    let d = 2;
    
    let set = new Set([a, b, c, d]);
    
    console.log(set.size);  // 3
    

    2. Set 数据 的创建: new Set() (有强相等的成员,不会重复添加)

    • Set 本身是一个构造函数,用来生成 Set 数据结构

    • 参数: 数组 / 伪数组 或 不传

    • 创建时:有强相等的成员,不会重复添加

    const set = new Set([1, 2, 3, 4, 4]);
    console.log(set.size);  // 4
    
    const dom = document.querySelectorAll('div');
    const set = new Set(dom);
    console.log(dom);
    

    3. Set 实例 属性

    • Set.prototype.constructor:构造函数,默认就是Set函数

    • Set.prototype.size:返回Set实例的成员总数

    4. Set 实例 操作方法(向 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(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false
    
    • Array.from 方法可以将 Set 结构转为数组
    const items = new Set([1, 2, 3, 4, 5, 6, 7]);
    const array = Array.from(items);
    
    console.log(array); // [1, 2, 3, 4, 5]
    

    5. Set 实例 遍历方法

    Set 数据 默认可遍历(默认调用 Set 实例的 value 方法)
    let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set) {
      console.log(x);   // // red  、 green  、 blue
    }
    
    keys( ) 、values( ) 、entries( ):返回键名的遍历器
    // keys方法和values方法的行为完全一致 【只包含键值】
    
    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
    }
    
    // entries方法返回的遍历器,【同时包括键名和键值】,所以每次输出一个数组,它的两个成员完全相等
    for (let item of set.entries()) {
        console.log(item);      // ["red", "red"] 、 ["green", "green"] 、 ["blue", "blue"]
    }
    
    forEach( ):使用回调函数遍历每个成员
    • Set 结构的实例与数组一样,也拥有 forEach 方法,用于对每个成员执行某种操作,没有返回值

    • forEach 方法还可以有第二个参数,表示绑定处理函数内部的this对象

    • Set 结构中:键 和 值 是一样的

    set = new Set([1, 4, 9]);
    set.forEach((value, key) => console.log(key + ' : ' + value))
    // 1 : 1
    // 4 : 4
    // 9 : 9
    

    6. Set 数据 遍历的应用

    • 扩展运算符[...arr]内部使用for...of循环,所以也可以用于 Set 结构
    数组去重: 扩展运算符 和 Set 结合
    • 应用:数组去重
      • 方式一: [...new Set(array)]

      • 方式二: Array.from(new Set(array))

    // 方法一:
    const set = new Set([1, 2, 3, 4, 4 , 5, 5]);
    const result = [...set];
    
    console.log(result);    // [1, 2, 3, 4, 5]
    
    // 方法二:
    const set = new Set([1, 2, 3, 4, 4 , 5, 5]);
    const result = Array.from(set);
    
    console.log(result);    // [1, 2, 3, 4, 5]
    
    实现 并集、交集、差集:数组方法 和 Set 结合
    <script>
        let a1 = [1, 2, 3, 4];
        let a2 = [3, 4, 5, 6];
    
        let set1 = new Set(a1);
        let set2 = new Set(a2);
    
        let union = new Set([...set1, ...set2]);        // 并集
    
        let intersect = [...set1].filter((item) => {    // 交集
            return set2.has(item);
        });
    
        let difference = [...set1].filter((item) => {   // 差集
            return !set2.has(item);
        });
    
        console.log([...union]);    // 并集   [1, 2, 3, 4, 5, 6]
        console.log(intersect);     // 交集   [3, 4]
        console.log(difference);    // 差集   [1, 2]
    </script>
    

    7. 改变 Set 数据 中的成员:目前只能间接改变(先变为数组,再变回Set)

    // 方法一
    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(val => val * 2));
    // set的值是2, 4, 6
    
    // 方法二
    let set = new Set([1, 2, 3]);
    set = new Set(Array.from(set, val => val * 2));
    // set的值是2, 4, 6
    

    二、 新增数据结构 WeakSet

    参考

    三、 新增数据结构 Map

    1. Map 数据 的特点

    • Map 数据 类型为 object

    • Map 数据 结构类似数组,可遍历

    • Map 数据 存在 键 - 值;且键可以是 任意类型(弥补了ES5中对象的键只能是字符串)

    2. 创建 Map 对象:new Map()

    • Map 本身是一个构造函数,用来生成 Map 数据结构

    • 可接受参数: 二维数组(内层数组是:键值对数组['aa', 1]

      • 参数:任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构
    const map = new Map([
        ['name', '张三'],
        ['title', 'Author']
    ]);
    
    console.log(map.size); // 2
    

    3. Map 实例 属性

    • Map.prototype.constructor:构造函数,默认就是Map函数

    • Map.prototype.size:返回Map实例的成员总数

    const map = new Map();
        
    map.set(['a'], 555);
    map.set('b', 666);
    
    console.log(map.get(['a'])); // undefined
    console.log(map.get('b')); // 666
    

    4. Map 操作方法

    • set(key, value):设置键值对,返回 Map 结构(若 存在 严格相等,则旧值被新值覆盖);可链式写法

    • get(key):获取 key 对应的值(若 找不到 key,则返回undefined

    • has(key)用来查找键名;判断 key 是否存在,返回 布尔值

    • delete(key):删除,返回布尔值,是否删除成功

    • clear():清空 Map 内所有值,无返回值

    5. Map 遍历方法

    Map 数据 默认可遍历(默认调用 Map 实例的 value 方法)
    const map = new Map([
        ['a', 1], ['b', 2]
    ]);
    
    for(let item of map) {
        console.log(item);  // ['a', 1] ['b', 2]
    }
    
    keys():返回 键名 的遍历器
    const map = new Map([
        ['a', 1], ['b', 2]
    ]);
    
    for(let item of map.keys()) {
        console.log(item);  // a b
    }
    
    values():返回 键值 的遍历器。
    const map = new Map([
        ['a', 1], ['b', 2]
    ]);
    
    for(let item of map.values()) {
        console.log(item);  // 1 2
    }
    
    entries():返回所有成员的遍历器
    const map = new Map([
        ['a', 1], ['b', 2]
    ]);
    
    for(let item of map.entries()) {
        console.log(item);  // ['a', 1] ['b', 2]
    }
    
    for(let [key, value] of map.entries()) {
        console.log(key);  // a b
    }
    
    forEach():遍历 Map 的所有成员
    const map = new Map([
        ['a', 1],
        ['b', 2]
    ]);
    
    
    map.forEach((item, index) => {
        console.log(item); // 1 2
        console.log(index); // a b
    });
    

    6. 扩展运算符 获取 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']]
    

    7. 改变 Map 数据 中的成员:目前只能间接改变(先变为数组,再变回Map)

    const map0 = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');
    
    const map1 = new Map(
      [...map0].filter(([k, v]) => k < 3)
    );
    // 产生 Map 结构 {1 => 'a', 2 => 'b'}
    

    8. Map 转换

    Map 转成 数组
    数组 转成 Map
    Map 转成 对象
    对象 转成 Map
    Map 转成 JSON
    JSON 转成 Map

    五、 新增数据结构 WeakMap

    1. WeakMap 数据

    • WeakMap结构与Map结构类似,也是用于生成键值对的集合

    2. WeakMap与Map的区别(一)

    • WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名

    3. WeakMap与Map的区别(二)

    • WeakMap 的成员都是弱引用,随时可能消失(不会被计入垃圾回收机制)

    4. WeakMap 的作用

    • 作用一:储存DOM节点(不用担心这些节点从文档移除时,会引发内存泄漏)

      • 如果使用Set存储DOM节点,由于Set对成员的引用是计入“引用计数”的,所以从文档中移除节点后,垃圾回收器还是没有办法回收节点的内存,只有你显式地在Set中删除节点后节点的内存才会被回收
    • 作用二:实现私有属性

  • 相关阅读:
    职业规划——第1.0章、模拟面试的小记(一)
    菜鸟VUER学习记——零0章、打开新的大门
    职业规划——第0章、哇,原来需要的这么多
    经营自己,愈发强大——《软技能——代码之外的生存指南》读后感
    如何阅读一本书
    Java开发规范
    JVM堆和栈的区别
    2016年7月书单推荐
    web性能优化——代理(nginx)
    web性能优化——浏览器相关
  • 原文地址:https://www.cnblogs.com/zxvictory/p/8716985.html
Copyright © 2011-2022 走看看