ES6中Set和Map的使用（数组字符串去重）

最新推荐文章于 2023-01-05 21:13:46 发布

牛先森家的牛奶

最新推荐文章于 2023-01-05 21:13:46 发布

阅读量761

点赞数 1

分类专栏：案例 ES6 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/107040071

版权

案例同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ES6

8 篇文章 0 订阅

订阅专栏

ES6中Set和Map的使用

- Set对象（构造函数）
- Map对象

Set对象（构造函数）

Set概念：Set 集合，类似于数组，但是成员的值都是唯一的，可自动去重
Set创建：new Set(值) 但是得出来的不是一个数组，
Set使用： let set = new Set（值）
Set方法：
- add(value) 往Set创建的变量中添加成员
- delete(value) 删除某一个值
- has(value) 判断一个值存不存在，返回布尔值
- clear() 清除所有的成员

<script>
    // 数组去重
    // var arr = [1, 2, 3, 4, 45, 1, 2, 3, 5, 7];
    // 判断完所有的数据之后在一次把满足条件的数据 返回 给newArr 
    // 所以用filter解决不了 数组去重
    // newArr = arr.filter((item, index) => {
    //     return newArr.includes(item) === false
    // })
    // console.log(newArr); 

    // 用reduce方法  ==>  数组去重
     var newArr = arr.reduce((pre, cur) => {
         includes() 判断数组中是否有这个数据，有返回true，没有返回false
         if (pre.includes(cur) === false) {
             return pre.concat(cur);
         } else {
             return pre
        }
     }, [])
     console.log(newArr);


    // 字符串去重
    var str1 = 'abcdacbabcbababcbabcabd'; //字符串去重
     var str2 = ''; //存放去重之后的字符串
     // 拿str1中的字符去 判断是否已经存在 str2中
     // 如果存在，是一个重复的字符，不需要把此字符添加到str2中
     // 如果不存在时候，需要把此字符添加到 str2 中
     for (var i = 0; i < str1.length; i++) {
       // 判断str2中是否存在str1[i]这个字符
       if (str2.indexOf(str1[i]) === -1) {
         str2 += str1[i]
       }
     }

    /*
      set集合 :类似于数组，这个集合中的数据都是唯一
          定义set集合：new Set()
          Set集合只有一个参数 ，而且这个蚕参数也是一个可遍历的数据 数组 字符串
       作用：数组去重
    */

    // var set = new Set(arr); //注意得到是一个set集合并不是一个真正的数组
    // console.log([...set]);

    // let set = new Set('1234');
    // set.add('a,b,c');
    // set.add([9, 8, 7])

    // set.delete('a,b,c')
    // console.log(set.has('0'));

    // console.log(set);

    // 数组去重
    var arr = [1, 2, 3, 4, 45, 1, 2, 3, 5, 7];
    let set = new Set(arr);
    // Array.form(数据) 把数据转化数组
    // 【1】let res = Array.from(set);
    // 或者 扩展运算符（...）的方法
    // 【2】let res = [...set]
    // console.log(res);

    // 字符串去重
    let str = 'aabbccddefetgrgdf';
    let set1 = new Set(str);
    let res = [...set1].join('');
    console.log(res);


  </script>

补充Set

<body>
  <div class="box">hello world ！</div>
  <div class="box">hello world ！！</div>
  <div class="box">hello world ！！！</div>
  <script>

    // Set 构造函数 , 构造set实例对象
    let set = new Set(["hello", 123, {}]);
    console.log(set); // Set(3) {"hello", 123, {…}}

    // 一个结构 : 增删改查;
    // 1. 查看set结构的数量;
    console.log(set.size); // 3

    // 2. 增加一条数据;
    set.add("你好"); 

    // 3. 删除一条数据;
    set.delete("hello");
    console.log(set); // Set(3) {123, {…}, "你好"}

    // 4. 遍历set结构;
    set.forEach(item => {
      console.log(item);  // 123 {} 你好
    })

    // for of 遍历;
    for (let item of set) {
      console.log(item); // 123 {} 你好
    }

    // 问题 : 
    // 取出一条数据 ;
    // 把set结构转换成数组结构才可以取出某一条数据;
    var arr = [...set];
    console.log(arr[0]); // 123

    // set结构有一个特征 : 不允许重复;
    var set1 = new Set([1, 1, 2, 2, 3, 4, 4, 5, 5, 3, 3, 2, 2, 1, 1, 1]);
    console.log(set1);  //Set(5) {1, 2, 3, 4, 5}

    // 解释为什么自动去重？？？
    // 为啥自动去重 : 复杂类型 { key : value } , [ index : value ]
    // 键值对形式进行数据存储;
    // set 结构 : key : key 
    // let obj = { a : 10 }
    // obj.a = 20;
    // 同名的key值会发生覆盖;

    // ES6 补充： 强制转换为 数组;
    // Array.from(); // 把费数组类型转换为数组;

    var boxs = document.querySelectorAll(".box");
    // 这里需要把boxs转为数组 不转不能使用 filter 方法
    boxs = Array.from(boxs);
    // console.log(boxs);
    // filter 为了 把对应的元素取出来
    var filter_box = boxs.filter(item => {
      return item.innerHTML === "hello world ！！";
    })
    console.log(filter_box); // [div.box]  选中第二个元素 

    // 一行代码去重怎么办;
    var arr = [1, 2, 2, 3, 4, 2, 2, 2, 2, 2, 1, 12, 2, 21, 22, 2, 2, 1, 21, 21, 2]
    arr = Array.from(new Set(arr))
    console.log(arr); // (7) [1, 2, 3, 4, 12, 21, 22]

  </script>
</body>

推荐阮一峰大佬的ECMAScript 6 入门教程中Set 和 Map 数据结构

Map对象


    // let map = new Map()
    // console.log(map)  // 查看 map返回值是什么

    var obj = { a: 1 };
    let map = new Map([["key", "value"], [obj, [1, 2, 3, 4, 5, 6, 7]]]);
    // // 这种 Map结构和 对象 有啥区别么? 
    // // 对象的key只能为一种数据类型 : 字符串;
    // // Map结构之中key值可以为任意类型;
    // console.log(map);

    // 增删改查;
    map.set([1, 2, 3], "hello world");
    console.log(map);
    // 注意：删除的时候需要对象的地址 不能直接删除对象 而是删除地址
    map.delete(obj);
    console.log(map);

    // 补充:  基本类型 , 引用类型;
    // var a = {a : 1};
    // var b = {a : 1};
    // console.log( a === b )  false

    // 遍历值 ;
    map.forEach(item => {
      console.log(item);
      // value   (7)[1, 2, 3, 4, 5, 6, 7]
    })

    // for of 配合的特殊用法;
    // 遍历 所有的 key 值;
    for (let key of map.keys()) {
      console.log(key); 
      // key  {a : 1}
    }

    // 遍历所有的value值;
    for (let value of map.values()) {
      console.log(value);
      // value   (7)[1, 2, 3, 4, 5, 6, 7]
    }

    // 遍历所有的key,value;
    for (let item of map.entries()) {
      console.log(item);
      // (2)["key", "value"]   (2) [{…}, Array(7)]
    }