ES6：集合介绍与API

文章目录

• 1.Set
• • 1.1声明
  • 1.2 属性和方法
  • 1.3 实践
• 2. Map
• • 1.1声明
  • 1.2 属性和方法

1.Set

ES6提供了新的数据结构 Set（集合）。它类似于数组，组成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用 扩展运算符 和 for of 进行遍历。

特点：由于它的组成成员的值都是唯一的，所以它可以用来去重。

1.1声明

通过操作符new声明，括号内可接数组

<script>
    let s = new Set();
    let s2 = new Set(['a', 'b', 'c']);
    console.log(s);
    console.log(s2);
</script>

1.2 属性和方法

集合的属性和方法：

1. size 返回集合的元素个数
2. add 增加一个新元素，返回当前集合
3. delete 删除元素，返回boolean值
4. has 检测集合中是否包含某个元素，返回boolean值

<script>
    let s2 = new Set(['a', 'b', 'c']);
    //     1. size 返回集合的元素个数
    console.log(s2.size);
    //     2. add 增加一个新元素，返回当前集合
    console.log(s2.add('d'));
    //     3. delete 删除元素，返回boolean值
    console.log(s2.delete('d'));
    console.log(s2);
    //     4. has 检测集合中是否包含某个元素，返回boolean值
    console.log(s2.has('a'));
    console.log(s2.has('d'));
</script>

1.3 实践

通过Set集合我们可以对数组实现很多操作。比如数组去重、求交集、求并集、求差集。

1.数组去重

<script>
    let arr = ['a', 'b', 'c', 'd', 'a', 'd'];
    // 1.数组去重
    let a = [...new Set(arr)];
    console.log(a);//['a','b','c','d']
</script>

这里用了一个扩展运算符将去重后的类数组（集合）转换为了数组

2.求交集

    <script>
        let arr = ['a', 'b', 'c', 'd', 'a', 'd'];
        let arr2 = ['a', 'b', 'b','e'];
        let a = [...new Set(arr)];
        let b = new Set(arr2);
        let c = a.filter((item) => {
            if (b.has(item))
                return true;
            else
                return false;
        });
        console.log(c);//['a','b']
    </script>

先将两个数组进行去重 ，这里因为b后面还需要用has方法，所以b未转成数组，而是集合，之后通过filter筛选出a b共有的元素。

这里可以简写为：

<script>
    let arr = ['a', 'b', 'c', 'd', 'a', 'd'];
    let arr2 = ['a', 'b', 'b'];
    let c = [...new Set(arr)].filter(item => (new Set(arr2)).has(item));
    console.log(c);//['a','b']
</script>

3.求并集

<script>
    let arr = ['a', 'b', 'c', 'd', 'a', 'd'];
    let arr2 = ['a', 'b', 'b', 'e'];
    // 3.求并集
    let c = [...arr, ...arr2];
    let d = [...new Set(c)]
    console.log(d);
</script>

求并集就是通过先将两个数组合并再去重即可

4.求差集

<script>
    let arr = ['a', 'b', 'c', 'd', 'a', 'd'];
    let arr2 = ['a', 'b', 'b'];
    let c = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
    console.log(c);//['a','b']
</script>

求差集就是求交集的取反，当不含有时返回。

---

2. Map

ES6提供了 Map 数据结构，它类似于对象，也是键值对的集合。但是”键“的范围不限于字符串，各种类型的值（包括对象）都可以当作键，Map也实现了Iterator接口，所以可以使用 扩展运算符 和 for of 进行遍历。

1.1声明

通过操作符new声明，括号内可接数组

    <script>
        let m = new Map();
        console.log(m);
    </script>

1.2 属性和方法

集合的属性和方法：

1. size 返回Map的元素个数
2. set 增加一个新元素，返回当前Map
3. get 返回对象的键值
4. has 检测Map中是否包含某个元素，返回boolean值
5. delte 删除键值对
6. claear 清空Map

    <script>
        let m = new Map();
        // 1. size 返回Map的元素个数
        console.log(m.size);
        // 2. set 增加一个新元素，返回当前Map
        m.set('name', 'xy');
        m.set('age', 20);
        m.set('eat', function () {
            console.log('吃饭');
        });
        console.log(m);
        // 3. get 返回对象的键值
        console.log(m.get('name'));
        // 4. has 检测Map中是否包含某个元素，返回boolean值
        console.log(m.has('name'));
        // 5. delte 删除键值对
        m.delete('name');
        console.log();
        // 6. claear 清空Map
        m.clear();
        console.log(m);
    </script>