本文介绍两种集合 set map 的操作和方法。

目录

1. Set

1.1 set基本使用

1.2 add

1.3 delete

1.4 has

1.5 size

1.6 set转换为数组

1.7 拓展运算符

1.8 for...of

1.9 forEach

1.10 set给数组去重

2. Map

2.1 创建map集合

2.2 set添加元素

2.3 delete删除元素

2.4 has

2.5 size

2.6 map转换为数组

2.7 拓展运算符...

2.8 for...of对map集合遍历

2.9 forEach遍历

2.10 清空map集合

---

1. Set

1.1 set基本使用

        // 1.set基本使用
        // 创建set集合
        let fruits = new Set(['apple','banana','orange']);
        console.log(fruits);  //Set(3)

---

1.2 add

        // 2.add添加
        fruits.add('mango');
        console.log(fruits);  //Set(4)

---

1.3 delete

        // 3.delete
        fruits.delete('banana');  // 指定删除元素
        console.log(fruits);

---

1.4 has

        // 4.has判断是否有这个元素
        console.log(fruits.has('apple'));  //true
        console.log(fruits.has('banana'));  //false

---

1.5 size

        // 5.size表示Set集合的大小
        console.log(fruits.size);  //3

---

1.6 set转换为数组

        // 6.将set集合转化为数组
        let arr = Array.from(fruits);
        console.log(arr);  // 数组类型

---

1.7 拓展运算符

        // 7.拓展运算符...展开可迭代对象
        let web = 'baidu.com';  // 中文也能逐字展开
        // 将上面的内容变为数组
        let webArr = [...web];
        console.log(webArr);  // 每一个元素都进行了展开 并存入数组
        let webArr1 = [...fruits];  // 将set集合展开 每一个元素存入数组
        console.log(webArr1);   // ['apple', 'orange', 'mango']

---

1.8 for...of

        // 8.for...of循环遍历 set集合
        for(let item of fruits){
            console.log(item);  // 所有的元素打印
        }

---

1.9 forEach

        // 9.forEach循环
        // set集合名.forEach(参数) => {函数体}
        fruits.forEach((value) => {
            console.log(value);
        })
        // set使用forEach时无法用index打印索引，index打印出来还是他自己本身

---

1.10 set给数组去重

        // 10.利用set 给 数组 去重
        let arr1 = [1,1,2,3,3,5,6];  // 有重复数字
        let set1 = new Set(arr1);  // 将数组转换为set集合
        console.log(set1);  // 已经去重

---

2. Map

2.1 创建map集合

        // 1.创建map集合
        // ([ [],[],[] ])  根据数据类型考虑是否加引号
        let teacher = new Map([
            ['name','zzz'],
            ['gender','男'],
            ['web','baidu.com']
        ])
        console.log(teacher);
        // Map(3) {'name' => 'zzz', 'gender' => '男', 'web' => 'baidu.com'}

---

2.2 set添加元素

        // 2.set增加元素
        teacher.set('height',185);
        console.log(teacher);
        // Map(4) {'name' => 'zzz', 'gender' => '男', 'web' => 'baidu.com', 'height' => 185}

        // !!注意：在map中每个键都是唯一的，如果添加的键值对和某个已有的键重复了，则会替换原来的值

---

2.3 delete删除元素

        // 3.delete删除元素
        teacher.delete('gender');  // 只删除键即可
        console.log(teacher);
        // Map(3) {'name' => 'zzz', 'web' => 'baidu.com', 'height' => 185}

---

2.4 has

        // 4.has检测是否有对应的键值
        // 只检测键即可
        console.log(teacher.has('gender'));  //false
        console.log(teacher.has('web'));  // true

---

2.5 size

        // 5.size获取map集合大小
        console.log(teacher.size);  // 3个键值对

---

2.6 map转换为数组

        // 6.将map集合转换为数组
        // 类似set：Array.from(集合名)
        let arr = Array.from(teacher);  
        console.log(arr);

---

2.7 拓展运算符...

        // 7.拓展运算符...将map集合转换为数组
        let arr1 = [...teacher];
        console.log(arr1);

---

2.8 for...of对map集合遍历

        // 8.for...of对map集合的遍历
        for(let value of teacher){
            console.log(value);
            // 遍历了三次 每次打印一个键值对
        }

        // 还可以利用解构的方式 从数组或对象中获取值并赋值给变量
        // [key,value] 是一种解构语法，将map数组中的键值对解构为 key和value 两个变量
        for(let [key,value] of teacher){
            console.log(key,value);
        }

---

2.9 forEach遍历

        // 9.forEach遍历
        // 箭头函数形式
        teacher.forEach((value,key) => {   // 键/索引在后，值在前
            console.log(key,value);  // 打印时 键在前 值在后
        });

---

2.10 清空map集合

        // 10.清空map集合
        teacher.clear();
        console.log(teacher);
        // 清空set集合也可以用这种方法

---

本文介绍两种集合 set map 的操作和方法。