文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

javascript ES6中set集合、map集合如何使用

2023-07-04 19:04

关注

本文小编为大家详细介绍“javascript ES6中set集合、map集合如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript ES6中set集合、map集合如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

set与map理解

ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据

set集合

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

set集合语法:

//创建一个set集合,传参为一个可迭代的对象const s1 = new Set(iterable);

API

名称类型简介
Set.add()原型方法添加数据
Set.has()原型方法判断是否存在一个数据
Set.delete()原型方法删除数据
Set.clear()原型方法清空集合
Set.size属性属性集合长度
for of原型方法遍历

set源码例子:

// 1.add() 往创建好的集合中添加数据的    const s1 = new Set();    s1.add(1)    s1.add(2)    s1.add(3)    s1.add(4)    s1.add(1) //无效添加,因为数据重复    console.log(s1)// 2.has() 判断数据是否存在    console.log(s1.has(1))    console.log(s1.has(10))// 3.delete()  返回是否删除成功    s1.delete(1)    console.log(s1)    console.log(s1.delete(10))// 4.clear()  清空集合    s1.clear()    console.log(s1)// 5.size属性  只能读,不能改    console.log(s1.size)// 6.遍历:for of,因为是一个可迭代的对象    for(const item of s1){        console.log(item)    }    // 重写的实例方法  forEach    s1.forEach((item, index, s) => {        // index 不是下标,set集合没有下标        // forEach中的第一个参数的值和第二个参数的值是相同的,都表示set中的每一项数据        console.log(item, index, s)    })

使用场景

//数组去重  const arr = [1,1,22,22,3,1,88,88,65,123,444,65];  const s = new Set(arr);  console.log([...s]);//或者一句话搞定  const result = [...new Set(arr)];  console.log(result);//[1,22,3,88,65,123,444,65]// 两个数组的交集,并集,差集,结果得到一个新的数组  const arr1 = [12,34,55,33,11,33,5,12];  const arr2 = [55,34,11,78,10,19,88,88,99,99];// 用set完成// 交集:你有我也有的数组元素  组成一个新数组  const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);  console.log(cross);//[]// 并集:数组合并去重之后的新数组  const result = [...new Set([...arr1,...arr2])];  console.log(result);// 差集:你有我没有,我有你没有的数组元素 组成一个新数组  let arr4 = result.filter(item=>{      // 判断arr1里面存在并且arr2不存在的数据  和  arr1里面不存在并且arr2里存在的数据      return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)  })  console.log(arr4)  //[12, 33, 5, 78, 10, 19, 88, 99]

map集合(映射)

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

map集合语法:

let swk=new Map()console.log(swk);//Map(0)

API

名称类型简介
Map.set(key,value)原型方法添加数据
Map.get(key)原型方法获取数据
Map.has(key)原型方法判断是否存在一个数据
Map.delete(key)原型方法删除数据
Map.clear()原型方法清空集合
Map.size属性原型方法集合长度
for of原型方法遍历

map集合源码例子:

        let swk=new Map();         console.log(swk);          // 1. 新增map元素        // Map.set(key,value) 设置Map对象的键值对(键名,键值) 返回当前对象        swk.set('uname', '孙悟空');        swk.set('age', 600);        swk.set('master', '唐僧');        swk.set('weapon', '金箍棒');        console.log(swk); //Map(4) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}        swk.set('age', 601);        console.log(swk);        // 键不存在,则添加一项        // 键存在,则修改   // 2. 获取map元素        // Map.get(key)返回key值对应的value 如果key不存在则返回undefined        console.log(swk.get('uname')); //孙悟空        console.log(swk.get({})); //undefined   // 3. 判断元素是否存在  has  返回布尔值        console.log(swk.has('uname')); //true        console.log(swk.has({})); //false  // 4. 删除映射元素        swk.delete('weapon');        console.log(swk); //Map(3) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧'}  //5. 清空映射元素        // swk.clear();        // console.log(swk); //Map(0) {size: 0}  // 6. 映射元素长度        console.log(swk.size); //3  // 7. 可以使用for of 循环        for (let [key, value] of swk) {            console.log(key, value);            for (let item in value) {                console.log(value[item])            }        }        console.log('=====forEach=====');  // 8. 可以使用forEach 遍历        swk.forEach((item, index, map) => {            console.log(index); //uname age master            console.log('==========');            console.log(item); // 孙悟空 60  唐僧            console.log('==========');            console.log(map);            console.log('==========');        })

Maps 和 Objects 的区别

读到这里,这篇“javascript ES6中set集合、map集合如何使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯