ES6（6）：Set 和 Map

r囧r小猫 2022-12-26 07:30 368阅读 0赞

文章目录

    • 一、Set
            1. 声明一个 set
            1. 元素个数
            1. 添加新的元素
            1. 删除元素
            1. 检测是否有，查询元素
            1. 清空
            1. 遍历
    • 二、Set 实践
            1. 数组去重
            1. 交集
            1. 并集
            1. 差集
    • 三、Map
            1. 声明 Map
            1. 添加元素
            1. 大小
            1. 删除
            1. 获取
            1. 清空
            1. 遍历

一、Set

1. 声明一个 set
  1. let s = new Set();
  2. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  3. console.log(s,typeof s);
  4. console.log(s2);

在这里插入图片描述

2. 元素个数
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. console.log(s2.size);

在这里插入图片描述

3. 添加新的元素
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. s2.add('喜事儿');
  3. console.log(s2);

在这里插入图片描述

4. 删除元素
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. s2.delete('坏事儿');
  3. console.log(s2);

在这里插入图片描述

5. 检测是否有，查询元素
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. console.log(s2.has('糟心事'));

在这里插入图片描述

6. 清空
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. s2.clear();
  3. console.log(s2);

在这里插入图片描述

7. 遍历
  1. let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
  2. for(let v of s2){ 
  3.     console.log(v);
  4. }

在这里插入图片描述

二、Set 实践

  1. let arr = [1,2,3,4,5,4,3,2,1];
  2. let arr2 = [4,5,6,5,6];
1. 数组去重
  1. let result = [...new Set(arr)];
  2. console.log(result);

在这里插入图片描述

2. 交集
  1. let result = [...new Set(arr)].filter(item => { 
  2.     let s2 = new Set(arr2);// 4 5 6
  3.     if(s2.has(item)){ 
  4.         return true;
  5.     }else{ 
  6.         return false;
  7.     }
  8. });
  10. console.log(result);
  12. //简写
  13. let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
  14. console.log(result);

在这里插入图片描述

3. 并集
  1. let union = [...new Set([...arr, ...arr2])];
  2. console.log(union);

在这里插入图片描述

4. 差集
  1. let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
  2. console.log(diff);

在这里插入图片描述

三、Map

1. 声明 Map
  1. let m = new Map();
  2. console.log(m);

在这里插入图片描述

2. 添加元素
  1. m.set('name','Jack');
  2. m.set('work', function(){ 
  3.     console.log("我要好好学习!!");
  4. });
  5. let key = { 
  6.     school : '这是一个学校名称'
  7. };
  8. m.set(key, ['北京','上海','深圳']);
  9. console.log(m);

在这里插入图片描述

3. 大小
  1. let m = new Map();
  2. m.set('name','Jack');
  3. m.set('work', function(){ 
  4.     console.log("我要好好学习!!");
  5. });
  6. let key = { 
  7.     school : '这是一个学校名称'
  8. };
  9. m.set(key, ['北京','上海','深圳']);
  11. console.log(m.size);

在这里插入图片描述

4. 删除
  1. m.delete('name');
  2. console.log(m);

在这里插入图片描述

5. 获取
  1. console.log(m.get('work'));
  2. console.log(m.get(key));

在这里插入图片描述

6. 清空
  1. m.clear();
  2. console.log(m);

在这里插入图片描述

7. 遍历
  1. for(let v of m){ 
  2.     console.log(v);
  3. }

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Js-ES6-Set和Map

    0- 零 - 前言 一 数组和对象对比 数组的优点 1、有顺序 2、紧密型 3、有关联 缺点 1、速度慢，查询，添加，删除 2、有重复

    Bertha 。Bertha 。/ 0 赞/ 147 阅读

    相关 ES6的Set，WeakSet，Map和WeakMap

    之前在学习 ES6 的时候，看到 `Set` 和 `Map`，不知道其应用场景有哪些，只觉得很多时候会用在数组去重和数据存储，后来慢慢才领悟到 `Set` 是一种叫做集合...

    朱雀朱雀/ 0 赞/ 856 阅读