广告
返回顶部
首页 > 资讯 > 精选 >ES6的Set、Map、Symbol实例分析
  • 216
分享到

ES6的Set、Map、Symbol实例分析

2023-06-17 09:06:51 216人浏览 八月长安
摘要

这篇文章主要介绍“es6的Set、Map、Symbol实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6的Set、Map、Symbol实例分析”文章能帮助大家解决问题。Set  

这篇文章主要介绍“es6的Set、Map、Symbol实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6的Set、Map、Symbol实例分析”文章能帮助大家解决问题。

Set  数据结构

  set 数据结构,可以了解为集合,与数组相似,内部的成员是唯一的(不重复)。

const a = new Set();a.add(1),add(2).add(100).add(1);

a这个集合通过add方法增加数据后,会有返回值,返回值是它本身,所以可以采用链式增加的方式增加数据。
假如遇到重复的数据增加,只增加一次。

遍历这个集合:

a.forEach(i => console.log(i));

还可以使用ES2015的新添加的循环for...of

for(let i of a){   console.log(i);}

Set的少量属性:

  • size属性:集合的数据长度,console.log(a.size);

  • has(值): 判断集合中能否存在某一个值,console.log(a.has(100));

  • delete(值):删除集合中的某个值,删除成功返回true,console.log(a.delete(1));

  • clear():删除集合中所有数据,a.clear();

Set应用:数组去重

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = new Set(arr);console.log(arr);console.log(a);

这样去重得到的是一个集合,ES2015中Array.from()可以将其转换成数组。

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = Array.from(new Set(arr));console.log(arr);console.log(a);

当然还可以使用...开展操作符,定义一个数组的字面量,再将集合开展,保存为数组数据

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = [...new Set(arr)];console.log(arr);console.log(a);

Map 数据结构

  • Map与对象的结构相似,是一个键值对的集合,与对象不一样的是,对象在设置键时,这个键是字符串类型的,存储结构复杂的数据时,就会出现问题

const obj = {};obj[true] = "boolean";obj[123] = "number";obj[{a:1}] = "object";    console.log(Object.keys(obj));//keys 输出对象的所有键

ES6的Set、Map、Symbol实例分析

内部通过toString方法自动的将这些键的名称变成字符串类型。当给对象的随意传一个对象作为键来调用时,只需能匹配'[object object]',所得到的结果还是object,这样就会出现问题。不能实现一 一对应的关系。

console.log(obj[{}]);//传一个空对象console.log(obj[`[object object]`]);//传一个一样的字符串

而Map可以实现键值对一 一映射

const map = new Map();const a = {a:1};//a是一个对象,作为键,{a:1}map.set(a,100);//键为a,值为100console.log(map);//{{a:1} => 100}

这里的键a是一个对象型的数据,没有被转成字符串

console.log(map.get(a));//获取a键的值,得到100
console.log(map.has(a));//找到键值a,返回true//map.delete(a);//map.clear();    map.forEach((value,key) => {    console.log(key,value);})

Symbol:全新的原始数据类型。最主要的作用就是为对象增加独一无二的属性标识符

Symbol() === Symbol()的返回值是false,由此可以看出Symbol创立的值是独一无二的。

const obj = {}obj[Symbol()] = 123;obj[Symbol()] = 446;//obj对象里的值没有发生覆盖console.log(obj);//通过形容文本区分Symbolconsole.log(Symbol('a'));console.log(Symbol('b'));console.log(Symbol('age'));
const obj = {   [Symbol()] : 999,   name : "li"}obj[Symbol()] = 111;obj[Symbol()] = 222;console.log(obj[Symbol()]);//undefined//Symbol定义的属性是不能在对象以外进行调用的console.log(obj.name);

需要注意的是console.log(obj[Symbol()]);//undefined  Symbol定义的属性是不能在对象以外进行调用的,由于通过Symbol()生成的值,调用时无法确定获取哪一个值。这样可以作为对象内部的私有成员。

Symbol 补充
  • 每次调用Symbol的值都是全新的值,Symbol("a") === Symbol("a")返回值为false,即便形容文本一样,Symbol每次调用的也不一样的。

  • 如何对Symbol的值进行重复使用?

    定义一个全局变量,使其等于Symbol(),重复使用变量a

    const a = Symbol();

    使用Symbol类型中的静态方法实现复用(Symbor.for())

    const a = Symbol.for('symbol1');const b = Symbol.for('symbol1');console.log(a === b);//true
    const a = Symbol.for('true');const b = Symbol.for(true);console.log(a === b);//true,遇到布尔值会自动转换成字符串形式
  • 对象的toString标签,任何对象.toString()都是[object Object]。如何自己设置对象的toString标签,[Symbol.toStringTag]:"objtag"

    const obj1 = {a:1};console.log(obj1.toString());//[object Object]const obj2 = {[Symbol.toStringTag]:"obj2"};console.log(obj2.toString());//[object obj2]
  • 在对象中Symbol的属性名用for循环是遍历不出来的,Object.keys(obj)也不会显示的,JSONjsON.stringify(obj)也获取不到。所以Symbol经常会被忽略,不会在外面被获取。所以Symbol作为对象的私有属性名是非常安全的。

    若的确需要获取对象中的Symbol()属性名时

    //若非要获取,通过getOwnPropertySymbols[obj]方法const obj = {    [Symbol()]:"a",    b : 1        };console.log(Object.getOwnPropertySymbols(obj));//只能获取Symbol()类型的属性名

关于“ES6的Set、Map、Symbol实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: ES6的Set、Map、Symbol实例分析

本文链接: https://www.lsjlt.com/news/288077.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6的Set、Map、Symbol实例分析
    这篇文章主要介绍“ES6的Set、Map、Symbol实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6的Set、Map、Symbol实例分析”文章能帮助大家解决问题。Set  ...
    99+
    2023-06-17
  • ES6中Set和Map数据结构的示例分析
    这篇文章主要介绍了ES6中Set和Map数据结构的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ES6 的 Set:ES6 提供了新...
    99+
    2022-10-19
  • JavaScript之Map和Set的示例分析
    这篇文章主要介绍了JavaScript之Map和Set的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript的默认对象...
    99+
    2022-10-19
  • ES6中Set与WeakSet集合实例分析
    这篇文章主要讲解了“ES6中Set与WeakSet集合实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ES6中Set与WeakSet集合实例分析”吧!Set是值永不重复的特殊集合每天都...
    99+
    2023-06-17
  • ES6中集合set的示例分析
    这篇文章给大家分享的是有关ES6中集合set的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。集合set新的数据结构Set(集合),它类似于数组,成员的值都是唯一的,集合实...
    99+
    2022-10-19
  • ES6中Map集合的示例分析
    这篇文章将为大家详细讲解有关ES6中Map集合的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Map集合类似于对象,也是键值对的集合,但是 键 不限于字符串,各种...
    99+
    2022-10-19
  • ES6之map、set与数组、对象的对比示例
    这篇文章给大家分享的是有关ES6之map、set与数组、对象的对比示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言ES5中的数据结构,主要是用Array和Object。在E...
    99+
    2022-10-19
  • ES6对象实例分析
    本篇内容介绍了“ES6对象实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!对象字面量属性的简洁表示法ES6允许对象的属性直接写变量,这...
    99+
    2023-06-27
  • Python中的Set与dict实例分析
    这篇文章主要讲解了“Python中的Set与dict实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python中的Set与dict实例分析”吧!一、Set 集合类型Set 集合类型 ...
    99+
    2023-06-29
  • JavaScript的CommonJS、AMD、CMD、ES6实例分析
    本篇内容主要讲解“JavaScript的CommonJS、AMD、CMD、ES6实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的Co...
    99+
    2022-10-19
  • javascript ES6中set集合、map集合使用方法详解与源码实例
    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合...
    99+
    2022-12-10
    javascript ES6中set集合 map集合使用方法详解与源码实例 JS ES6中set集合使用方法 JS ES6中map集合使用方法
  • Java Map集合使用实例分析
    这篇文章主要讲解了“Java Map集合使用实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java Map集合使用实例分析”吧!Map接口   ...
    99+
    2023-06-30
  • Python map接收参数实例分析
    这篇文章主要介绍“Python map接收参数实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python map接收参数实例分析”文章能帮助大家解决问题。说明map函数接收两个参数,一个是函...
    99+
    2023-06-30
  • Java Map集合的示例分析
    这篇文章将为大家详细讲解有关Java Map集合的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、前言map集合是我们常使用的集合,了解和使用map集合是必要的二、Map介绍基本形式:...
    99+
    2023-06-25
  • ES6中类的示例分析
    小编给大家分享一下ES6中类的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ES5近似结构在ES5中没有类的概念,最相近...
    99+
    2022-10-19
  • ES6中Iterators的示例分析
    这篇文章主要为大家展示了“ES6中Iterators的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ES6中Iterators的示例分析”这篇文章吧。简...
    99+
    2022-10-19
  • es6和es5的示例分析
    什么是es6和es5,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。ES5是:strict模式、Array增加方法、Object方法;ES6是:...
    99+
    2022-10-19
  • Hive中Map端JOIN的示例分析
    小编给大家分享一下Hive中Map端JOIN的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Map端JOINmap端join适用于当一张表很小(可以存在内...
    99+
    2023-06-04
  • es6作用域的示例分析
    这篇文章主要介绍es6作用域的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   作用域?   几乎所有的编程语言的最基础模型之一就是在变量中储存值,并且取出修改这些的值...
    99+
    2022-10-19
  • ES6中class类的示例分析
    这篇文章主要介绍了ES6中class类的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。class 类通过class可以定义类,新的c...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作