首页 > 其他分享 >ES6的Set详解

ES6的Set详解

时间:2023-02-09 00:44:29浏览次数:41  
标签:ES6 Set console log 详解 let 数组 name

数组去重

let arr = [ 1,2,3,4,5,3,2 ]
    // 数组去重
    // 方法一
    let newArr = [new Set(arr)]
    console.log(newArr);
    // 方法二
    let newArr2 = Array.from(new Set(arr))
    console.log(newArr2);

数组对象去重

let obj = [
        {id : 1 ,name : 'zs'},
        {id : 2 ,name : 'ls'},
        {id : 3 ,name : 'ww'},
        {id : 2 ,name : 'ls'}
     ]

    //  数组对象去重     
     let newObj = [...new Set(obj.map(el=> JSON.stringify(el)))].map(res=> JSON.parse(res))
     console.log(newObj);
    //  步骤拆解:
    /*
    1、判断两个基本数据类型是否相同,比较的是数据的值。判断两个引用类型是否一样,比较的是引用
    2、set无法将数组对象去重,set去重的原理主要是判断两者存储的单元位置是否一样,如果一样才能去重。
    3、基本类型数据存储在栈,值相同就直接去重。引用数据类型存储在堆,引用类型数据 值 相同 位置不相同也无法去重。参考第一条的解释。
    4、只要将引用类型数据转变成基本数据类型,基本数据类型直接比较就可以去重了。去重完成后通过字符串转json对象即可。
    */
   /*
          [...new Set(obj.map(el=> JSON.stringify(el)))]   这一步 map 将内部的每一条转换成字符串,返回一个新数组,也就是引用类型数据转基本类型数据,下面是转换结果
           [ 
            0: "{\"id\":1,\"name\":\"zs\"}"   // 字符串
            1: "{\"id\":2,\"name\":\"ls\"}"   // 字符串
           ]
          .map(res=> JSON.parse(res))  这一步将去重处理好的值转换为对象 得到最终结果
   */

数组添加

let arr3 = [
        {id : 1 ,name : 'zs'},
        {id : 2 ,name : 'ls'},
        {id : 3 ,name : 'ww'}
      ]

      let newArr3 = new Set(arr3)
    //   尾部添加
      newArr3.add({id : 4,name : 'swk'})
      console.log('尾部添加');
      console.log(newArr3);

数组删除

let arr4 = [1,2,3,4,5,4,4,4]
      let newArr4 = new Set(arr4)
      newArr4.delete(2)    // 删除成功返回:true    删除失败返回:false
      console.log('删除数组中某一项');
      console.log(newArr4);

检测数组值是否存在

let arr5 = [1,2,3,4,5,6,7]
      let newArr5 = new Set(arr5)
      console.log('检测数组中是存在set值');   
      console.log(newArr5.has(5));// 存在返回true,不存在返回false

清除数组所有的值

let arr6 = [1,2,3,4,5]
      let nweArr6 = new Set(arr6)
      nweArr6.clear()   // 清除数组中所有值,没有返回值
      console.log('清除数组中所有值');
      console.log(nweArr6);

数组长度

let arr7 = [1,2,3,4,5]
      let newArr7 = new Set(arr7)
      console.log('获取数组的长度 & size 从1开始');  
      console.log(newArr7.size);  

数组遍历方法


      // 这几个与es6的遍历方法一致
      Set.prototype.keys()   //—— 返回键名的遍历器
      Set.prototype.values()   // —— 返回键值的遍历器
      Set.prototype.entries()  // —— 返回键值对的遍历器
      Set.prototype.forEach()  // —— 使用回调函数遍历元素
      // 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),
      // 所以 keys 方法和 values 方法的行为完全一致

标签:ES6,Set,console,log,详解,let,数组,name
From: https://www.cnblogs.com/wang-fan-w/p/17103860.html

相关文章

  • flex布局详解
    简述弹性布局是css3新引入的布局模式,英文是flexbox,他决定了元素如何在页面上排列,使他们能在在不同的屏幕尺寸和设备下可预测地展现出来。本质就是一个盒子,它能够......
  • DNS服务器的基本原理详解
    域名简介:使用tcp/udp协议,默认使用53端口号          默认情况下,客户端发起的查询请求都是用UDP/53查询的。          默认情况下,从从服务器到主服务......
  • Mybatis-Plus 之BaseMapper 方法详解
    packagecom.itheima.dao;importcom.baomidou.mybatisplus.core.conditions.Wrapper;importcom.baomidou.mybatisplus.core.metadata.IPage;importcom.baomidou.my......
  • FPN结构详解
    视频链接FPN:越高层次的特征图用于检测更大的目标,图下就是FPN的结构图:Upsample使用的是邻近插值算法。【应该也可以使用别的插值算法】【问题】为什么是从上层往下进行......
  • 71张图详解IP 地址、IP 路由、分片和重组、三层转发、ARP、ICMP
    目录数据如何传输到目的地?IP地址的基础知识IP地址的定义IP地址的组成IP地址的分类广播地址IP组播子网掩码CIDR与VLSM公网地址与私有地址IP路由路由条目类型路由汇......
  • 环保污水厂智能安防视频监控解决方案详解
    一、方案背景随着城市化进程的加快、城市人口的增多,生活用水量日益增加;此外,工业蓬勃发展产生的污水也在逐渐增加,这些生活及工业污水经遍布各地的城市污水处理厂集中处理后再......
  • 图文详解Java中的字节输入与输出流
    目录字节输入流字节输入流结构图FileInputStream类构造方法:常用读取方法:字节输出流字节输出流结构图:FileOutputStream类构造方法:常用写入方法:总结 字......
  • gateway配置详解
    Gateway网关,通过检查请求地址匹配相应的服务请求,访问时直接请求网关的请求地址,会转发到相应的服务;可通过yml文件配置或者代码配置pom:<dependency>......
  • MySQL DISTINCT关键字详解:用法、实际应用和与GROUP BY的区别
    "Successisnothowhighyouhaveclimbed,buthowyoumakeapositivedifferencetotheworld."成功不在于你爬得多高,而在于你对世界做出了多大的积极影响。-Roy......
  • Java中的JDBC基本概念和各对象详解
    概念JavaDataBaseConnectivity Java数据库连接,Java语言操作数据库JDBC本质:其实是官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口。各个数据库厂商去实现这......