ES6语法特性(三)Set集合 Map介绍

news/2024/7/10 23:55:24 标签: es6, 前端, ecmascript

1. Set简介

  Set本身是一个构造函数,用来生成Set数据结构。
  它类似于数组,但里面的成员是唯一的,不重复的。
  向Set加入值时,不会发生类型转换,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。
  Set 可以接收一个数组做为参数,用来初始化
  方法:
  size 返回集合的元素个数
  add 添加一个元素,返回当前集合
  delete 删除元素,返回Boolen值
  has 检测集合中是否包含某个元素,返回Boolen值

1.1. 用法

1.1.1. 数组去重

    function noRepeat(arr) {
      return Array.from(new Set(arr))
      // return [...new Set(arr)]
    }  
      let s = new Set();
      let arr = [1, 2, 1, 2, 3, 4, 2, 2, 34, 2, 4, 2, 4, 32, 2];
      let s2 = new Set(arr);
       console.log(noRepeat(arr))
      console.log(s, typeof s);
      console.log(s2);

1.1.2. 字符串去重

[...new Set('sssuuunnn')].join('')   // join  ['s', 'u', 'n'] => sun

1.1.3. 交集

  let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      // let result = [...new Set(arr1)].filter(item => {
      //   let s2 = new Set(arr2);
      //   if (s2.has(item)) return true;
      //   else return false;
      // });
      let result = [...new Set(arr1)].filter(item => new Set(arr2).has(item));
      console.log(result);

1.1.4. 并集

      let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      let nuino = new Set([...arr1, ...arr2]);
      console.log(nuino);

1.1.5. 差集

      let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      // let result = [...new Set(arr1)].filter(item => {
      //   let s2 = new Set(arr2);
      //   if (s2.has(item)) return false;
      //   else return true;
      // });
      let result = [...new Set(arr1)].filter(item => !new Set(arr2).has(item));
      console.log(result);

1.2. set实例的属性和方法

1.2.1. 属性

  size: size属性表示set集合中有多少个元素

new Set([1, 2]).size  // 2

1.2.2. 方法

  add(value):添加某个值,返回Set结构本身

      s2.add(100);
      console.log(s2);

  delete(value):删除某个值,返回一个布尔值表示是否删除成功

  	  // 删除不存在的元素
      s2.delete(99);
      console.log(s2);
      // 删除存在的元素
      s2.delete(1);
      console.log(s2);

  has(value):返回一个布尔值,表示参数是否为Set的成员

      console.log(s2.has(99)); // false
      console.log(s2.has(100)); // true

  clear():清除所有成员,没有返回值

      s2.clear();
      console.log(s2);

1.3. Set的遍历方法

  keys():返回键名的遍历器
  values():返回键值的遍历器
  entries():返回键值对的遍历器
  for…of…

    let setArr = new Set([1, 6, 6, 'sun', {name: 'sun'}])
    for(let item of setArr.keys()) {
      console.log(item);
       // 1 6 sun {name: 'sun'}
    }
    for(let item of setArr.values()) {
      console.log(item);
      // 1 6 sun {name: 'sun'}
    }
    for(let item of setArr.entries()) {
      console.log(item);
      // [1, 1] [6, 6] [sun, sun] [{name: 'sun'}, {name: 'sun'}] 
    }
    for(let item of setArr) {
      console.log(item);
       // 1 6 sun {name: 'sun'}
    }

2. Map简介

  ES6提供了Map数据结构,类似于对象,也是键值对的集合。
  但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键
  Map实现了iterator接口,可以使用扩展运算符和for of 进行遍历。
  Map的属性、方法:
  size 返回Map的元素个数
  set 添加一个元素,返回当前Map
  get 返回键名对象的键值
  has 检测Map中是否包含某个元素,返回Boolen值
  clear 清空Map,返回undefined

      let m = new Map();

2.1. size

    console.log(m.size); // 0

2.2. set

      m.set('name', 'wf');
      let key = {
        world: 'a,b,c'
      };
      m.set(key, [1, 2, 3]);
      console.log(m);

2.3. delete

      m.delete('name');

2.4. get

     m.get('name');

2.5. has

   console.log(m.has('name')); // true
   console.log(m.has('age')); // false

2.6. clear

   m.clear();

2.7. 遍历

      for (let v of m) {
        console.log(v);
      }

http://www.niftyadmin.cn/n/5291371.html

相关文章

laravel api资源的问题记录

resource 转换层 可以帮助我们转换一些字段的结果,类似前端的filter。 可以使用比如对象或者模型的形式来处理,但使用sql查询会导致n1的问题。如图: 层次嵌套很多,而且很深,这样虽然开发方便了,但是维护就…

去水印一般用什么软件?这六款软件分享给你

随着数字时代的洪流滚滚,我们时常在网络海洋中遨游,寻找那一抹惊艳的风景,然而,版权的大旗下,水印如同微型的堡垒,屹立在图片与视频的角落。它们或许是一道风景的瑕疵,或许是遮挡真相的云雾。于…

uni-app condition启动模式配置

锋哥原创的uni-app视频教程: 2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni…

C++自学笔记005:移动语义

C自学笔记005:移动语义 学习移动语义之前要先了解一下RVO机制 RVO机制 RVO(Return Value Optimization)是一种编译器优化机制:当函数需要返回一个对象的时候,如果自己创建一个临时对象返回,那么这个临时…

endpoints控制器源码解析

endpoints controller 的实现原理 本文从源码的角度分析KubeController Attachdetach相关功能的实现。 本篇kubernetes版本为v1.27.3。 kubernetes项目地址: https://github.com/kubernetes/kubernetes controller命令main入口: cmd/kube-controller-manager/controller-mana…

IDEA2023创建web项目

一、新建项目 点击File->New->Project...,如果是第一次创建项目则单击New Project 二、添加Web Application 建好的样子 把web移动到main目录下同时改名为webapp 三、不存在Add Framework Support添加Web Application 如何存在Add Framework Support&#…

Redis中RDB和AOF

Redis中RDB和AOF 定时间间隔执行数据集的时间快照,把某一时刻数据和妆容以文件的形式写到磁盘上,也就是快照。 配置文件 如果是普通安装方式可以跳过,如果是docker安装,需要到官网下载redis.conf配置文件到本地,地址…

uniapp的分包使用记录

UniApp的分包是一种将应用代码划分为多个包的技术。分包的核心思想是将不同部分的代码划分为不同的包,按需加载,从而提高应用性能。使用UniApp的条件编译功能,开发人员可以根据需要将代码划分为多个包。每个包都包含一组页面和组件&#xff0…