• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

js的Set和Map

武飞扬头像
奥特曼
帮助1

首先,我们先要知道Set和Map是个什么数据类型。控制台打印。

学新通

顾名思义,是一个构造函数,所以我们就可以使用new关键字来创建出Set和Map对象。

一、Set

Set 构造函数能让你创建 Set 对象,其可以存储任意类型的唯一值,无论是基本类型或者对象引用。

使用方式

const set1 = new Set([1, 2, 3, 4, 5]); //Set(5) {1, 2, 3, 4, 5}

(1)唯一值 

const set1 = new Set([1, 2, 3, 1, 2]);

输出结果:Set(3) {1, 2, 3} 

任意类型:

  1.  
    let obj = {a:1}
  2.  
    const set1 = new Set([1,obj,obj,NaN,NaN]);

输出结果:Set(3) {1, {a:1}, NaN}

(2)has()

返回一个布尔值,表示该值在 Set 中存在与否。

  1.  
    const set1 = new Set([1, 2, 3, 4, 5]);
  2.  
    console.log(set1.has(1),set1.has(6));

输出结果:true false

(3)add()

Set对象尾部添加一个元素。返回该 Set 对象。

  1.  
    const set1 = new Set([1, 2, 3, 4, 5]);
  2.  
    set1.add(6)

输出结果:Set(6) {1, 2, 3, 4, 5, 6}

(4)delete()

  1.  
    const set1 = new Set([1, 2, 3, 4, 5]);
  2.  
    set1.delete(1)

输出结果:true

Array.from(mySet)

数组相关:

  1.  
    let myArray = ["value1", "value2", "value3","value1"];
  2.  
     
  3.  
    // 用 Set 构造器将 Array 转换为 Set
  4.  
    let mySet = new Set(myArray);

输出结果:Set(3) {'value1', 'value2', 'value3'}

也可以使用展开运算符转成数组

console.log([...mySet]); // 与 myArray 完全一致

同样也可以使用Array.from

Array.from(mySet)

经典案例 数组去重

  1.  
    const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
  2.  
    console.log([...new Set(numbers)])
  3.  
    // [2, 3, 4, 5, 6, 7, 32]

二、Map

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。类似于对象。

  1.  
    const map1 = new Map();
  2.  
    map1.set('a', 1);
  3.  
    map1.set('b', 2);
  4.  
    console.log(map1.get('a'));

输出结果:1

(1)初始化数据

Map 对象是键值对的集合。Map 中的一个键只能出现一次;它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of 循环在每次迭代后会返回一个形式为 [key,value] 的数组。迭代按插入顺序进行,即键值对按 set() 方法首次插入到集合中的顺序(也就是说,当调用 set() 时,map 中没有具有相同值的键)进行迭代。

  1.  
    const first = new Map([
  2.  
    [1, 'one'],
  3.  
    [2, 'two'],
  4.  
    [3, 'three'],
  5.  
    ]);
  6.  
     
  7.  
    const second = new Map([
  8.  
    [1, 'uno'],
  9.  
    [2, 'dos']
  10.  
    ]);
  11.  
     
  12.  
    const merged = new Map([...first, ...second]);
  13.  
     
  14.  
    console.log(merged.get(1)); // uno
  15.  
    console.log(merged.get(2)); // dos
  16.  
    console.log(merged.get(3)); // three
学新通

合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的。展开语法本质上是将 Map 对象转换成数组。

(2)size

  1.  
    const map1 = new Map([[1,'one']]);
  2.  
    map1.size

输出结果:1

(3)唯一键

  1.  
    let obj = {name:'奥特曼'}
  2.  
    const map1 = new Map();
  3.  
    map1.set('a', 1);
  4.  
    map1.set('b', 2);
  5.  
    map1.set('a', 2);
  6.  
    map1.set(obj, 2);
  7.  
    map1.set(obj, 3);

如果是基本类型会去判断键是否一致 ,如果是复杂数据类型会去判断引用地址是否一致 

输出结果:

学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhghcbik
系列文章
更多 icon
同类精品
更多 icon
继续加载