【ES6】03-Set + Map-CSDN博客

本文链接：https://blog.csdn.net/2301_76662826/article/details/146301276

本文介绍两种集合 set 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 的操作和方法。