ES6之Set和Map数据结构知识点总结（二）

Love The Way You Lie 2022-05-28 12:07 150阅读 0赞

接下来，我们来聊聊ES6 中的Set和Map数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

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

Set结构的属性

*  Set.prototype.constructor：构造函数，默认就是Set函数
 *  Set.prototype.size：返回Set实例的成员总数。

Set 结构的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

*  add(value)：添加某个值，返回Set结构本身。
 *  delate(value)：删除某个值，返回一个布尔值，表示删除是否成功
 *  has(value)：返回一个布尔值，表示该值是否为Set的成员
 *  clear()：清空所有成员，没有返回值

Set结构的遍历方法有：

*  keys()：返回键名的遍历器
 *  values()：返回键值的遍历器
 *  entries()：返回键值对的遍历器
 *  forEach()：使用回调函数遍历每个成员

注意：由于Set结构没有键名，只有键值（可以说键名和键值相同），所以keys()方法和values()方法遍历结果完全一致

需要特别指出的是，Set的遍历顺序就是插入顺序。比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。

嗯、看代码吧，毕竟代码比什么都有说服力

var arr=[1,2,4,3,23,2,3];
        const set = new Set(arr);
        for(let i of set.keys()){
            console.log(i);
        }//1,2,4,3,23

var arr=[1,2,4,3,23,2,3];
        const set = new Set(arr);
        for(let i of set.values()){
            console.log(i);
        }//1,2,4,3,23

从上面两个例子，我们可以证实上面的观点：1、Set成员的值都是唯一的，没有重复的，即便我们插入的有重复的值，它也会自动过滤掉2、Set的插入顺序就是遍历顺序3、Set的keys()方法和values()方法的遍历结构完全一致

var arr=[1,2,4,3,23,2,3];
        const set = new Set(arr);
        for(let i of set.entries()){
            console.log(i);
        }//[1,1],[2,2],[4,4],[3,3],[23,23]

上面的结果显示，entries()方法返回的遍历器，同时包括键名和键值，所以每一次输出一个数组，它的两个成员完全相等。

Set结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法

Set.prototype[Symbol.iterator] === Set.prototype.values
    // true

这意味着，可以省略values方法，直接用for...of循环遍历Set。

const set = new Set(arr);
        for(let i of set){
            console.log(i);
        }//1,2,4,3,23

forEach()方法，用于对每个成员执行某种操作，没有返回值。参数就是一个处理函数，该函数的参数与数组的forEach一样，依次为键值、键名、集合本身，另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象

var arr=[1,2,4,3,23,2,3];
        const set = new Set(arr);
       set.forEach(function(value,key,set){
           console.log(value+key);
       });//2,4,8,6,46

从上面的实例中我们应该已经发现，Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。嗯、看个例子

var aLi = document.getElementsByTagName('li');
        const set = new Set(aLi);
       console.log(set.size);//6

从这个实例中我们发现，其实Set函数的参数也接受类似数组的对象。

注意：在Set内部，两个NaN是相等的（虽然在），另外两个对象总是不相等的

上面代码向Set实例添加了两个NaN，但是只能加入一个，这表明，在Set内部，两个NaN是相等的，同时，即便我们添加的两个都是空对象，在Set内部也认为它们是两个不同的值（其实这个不难理解，就是引用不同呗）

**Map数据结构**

我们知道JavaScript对象，本质上时键值对的集合（Hash结构），但是只能用字符串当做键，为了解决这个问题，Es6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键，也就是说，Object提供了“字符串—值”的对应，Map数据结构提供了“值—值”的对应，是一种更完善的Hash结构。

Map的属性和方法

Map的属性和方法和Set的属性和方法很相似，嗯，看看就知道了

*  Map的属性size：size属性返回Map结构的成员总数

Map的方法有：

*  set(key,value);//set方法设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就生成该键。set方法返回的是当前的Map对象，因此可以采用链式的写法
 *  get(key):get方法读取key对应的键值，如果找不到key，返回undefined。
 *  has(key)：has方法返回一个布尔值，表示某个键是否在当前Map对象之中
 *  delete(key):delete方法删除某个键，返回true。如果删除失败，返回false。
 *  clear()：clear方法清除所有成员，没有返回值

Map的遍历方法：

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

注意：和Set数据结构一样的是，Map的遍历顺序就是插入顺序。

Map构造函数接受数组作为参数

事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。

const set = new Set([
      ['foo', 1],
      ['bar', 2]
    ]);
    const m1 = new Map(set);
    m1.get('foo') // 1
    
    const m2 = new Map([['baz', 3]]);
    const m3 = new Map(m2);
    m3.get('baz') // 3

上面代码中，我们分别使用 Set 对象和 Map 对象，当作Map构造函数的参数，结果都生成了新的 Map 对象。

如果对同一个键多次赋值，后面的值将覆盖前面的值。

const map = new Map();
    
    map
    .set(1, 'aaa')
    .set(1, 'bbb');
    
    map.get(1) // "bbb"

上面代码对键1连续赋值两次，后一次的值覆盖前一次的值

嗯、看代码吧，代码可以说明一切

var map= new Map();
        map.set("a",1);
        map.set({},"aaa");
        map.set(123,"aa").set(undefined,"ss");
        console.log(map.get("a"));//1
        console.log(map.get({}));//undefined
        console.log(map.get(123));//aa
        console.log(map.get(undefined));//ss

从上面的代码中我们需要注意的是：1、set方法是可以采用链式操作的，这个我们上面已经说过了2、我们从上面的例子中可以看到，虽然我们在上面设置了set(\{\},"aaa");但是get(\{\})，结果为undefined，那是因为，虽然set和get方法，表面上针对同一个键，但实际上这是两个值，因为内存地址是不一样的，因此get方法无法读取该键，返回undefined

所以，Map的键实际上时跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性y与原作者的属性同名。

如果Map的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格（包括数据类型和值）相等，Map将其视为一个键，布尔值true和字符串true则是两个不同的键，另外，undefined和null也是两个不同的键。虽然NaN不严格等于自身，但Map将其视为同一个键

var map= new Map();
        map.set("a",1);
        map.set({},"aaa");
        map.set(123,"aa").set(undefined,"ss");
        for(const i of map.values()){
            console.log(i);
        }//1,aaa,aa,ss

嗯，上面的三个例子没啥可说的，和Set的很相似嘛

主要看看下面的

var map= new Map();
        map.set("a",1);
        map.set({},"aaa");
        map.set(123,"aa").set(undefined,"ss");
        for(const i of map.entries()){
            console.log(i[0],i[1]);
        }

或者

var map= new Map();
        map.set("a",1);
        map.set({},"aaa");
        map.set(123,"aa").set(undefined,"ss");
        for(const[i,j] of map.entries()){
            console.log(i,j);
        }

或者

var map= new Map();
        map.set("a",1);
        map.set({},"aaa");
        map.set(123,"aa").set(undefined,"ss");
        for(const[i,j] of map){
            console.log(i,j);
        }

这三种方法的结果都一样：比较长，就不再一个个的注释了，嗯，另外，从上面第二个和第三个例子中我们可以发现，Map结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。

map[Symbol.iterator] === map.entries
    // true

Map的forEach方法和Set的forEach方法一样，嗯，看个例子