站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

新增的es6数据结构有哪些

时间:2022-04-16 [网络编程]作者:fabuyuan 浏览:9 次

新增结构有:1、Symbol,表示独一无二的值,是一个函数结构;2、Set,指的是“集合”结构,类似数组,允许存放无序且不能重复的数据;3、WeakSet,类似Set,内部数据也不能有重复值;4、Map,指的是“字典”结构,可存储映射关系。

新增的es6数据结构有哪些

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ES6新增数据结构

1、Symbol

SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

const s1 = Symbol() const s2 = Symbol() console.log(s1 === s2); // false

symbol作为key

第一种方式,直接在对象的字面量中添加。

// symbol作为key const obj = {   [s1]:'abc',   [s2]:'cc', }

第二种方式,通过添加数组方式添加。

// 需要用数组方式来获取,不能通过点语法,否则会获取到字符串key console.log(obj[s1]);

第三种方式,通过对象中的defineProperty方法添加。

const s4=Symbol() Object.defineProperty(obj,s4,{   configurable:true,   enumerable:true,   writable:true,   value:'ff' })

通过symbol获取对应的值

需要用数组方式来获取,不能通过点语法,否则会获取到字符串key。

console.log(obj[s1]);

symbol不能被隐式转换成string类型。

注意:Symbol函数中的参数是symbol描述符,这是在ES10新增的特性

let Sym = Symbol("Sym") alert(Sym)  // TypeError: Cannot convert a Symbol value to a string

我们不能直接alert一个symbol对象,但是我们可以通过toString的方式或者.description来获取symbol对象的描述符。

let sym = Symbol('a') console.log(sym.description); // 'a'

遍历symbol

在使用for遍历、object.keys中是获取不到symbol健的,对此object还提供了getOwnPropertySymbols方法,用于获取对象中所有symbol的key。

const sKeys=(Object.getOwnPropertySymbols(obj)); for(const skey of sKeys){   console.log(obj[skey]); }

全局symbol对象注册

有时,我们可能需要多个symbol的值是一致的,我们可以通过symbol提供的静态方法for方法传入一样的描述符来使它们的值一致。

Symbol.for

该方法会在使用给定键搜索运行时符号注册表中的现有符号,并在找到时返回它。否则,使用此键在全局符号注册表中创建一个新符号。

const sa=Symbol.for('cc') const sb=Symbol.for('cc') console.log(sa===sb); //true

Symbol.keyFor

该方法用于获取全局symbol的描述符。

const key =Symbol.keyFor(sb) console.log(key); // c

2、Set

Set对象(类似数组)允许你存放任何数据类型,但里面的值不能重复。

const s1 = new Set() s1.add(10) s1.add(20) s1.add(30) s1.add(40)  console.log(s1) // Set(4) { 10, 20, 30, 40 }  s1.add(20) console.log(s1) // Set(4) { 10, 20, 30, 40 }

Set常用方法

方法返回值说明
sizeset对象中的数量返回set对象中的数量
addSet对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

3、WeakSet

WeakSet是类似Set的另外一种数据结构,内部数据也不能有重复值。

  • 它与Set的区别
    • WeakSet只能存放对象类型,不能存放基本数据类型
    • WeakSet对元素是弱引用

基本使用

const weakSet = new WeakSet(); let obj = {   name: "_island" };  weakSet.add(obj);

WeakSet常用方法

方法返回值说明
addweakset对象添加元素
deleteboolean删除元素
hasbooleanweakset对象中是否存在这个值

关于遍历

WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

所以WeakSet中的对象是不能获取的

4、Map

ES6新增的数据结构,用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。(假如我们把对象作为key,其内部会将对象转换为字符串[object object]

const obj1 = { name: "_island" }; const obj2 = { name: "QC2125" }; const obj3={   [obj1]:'a',   [obj2]:'b', }  console.log(obj3); // { '[object Object]': 'b' }

Map则可以把对象作为key进行存储,可以通过set方法添加到Map中,也直接通过字面量的方式添加。

const obj1 = { name: "_island" }; const obj2 = { name: "QC2125" }; const map = new Map(); map.set(obj1, "a"); map.set(obj2, "b"); console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }  // or const map2 = new Map([[obj1,'a'],[obj2,'b']])

Map常用方法

方法返回值说明
get获取对应的元素通过key获取对应元素
sizeMap对象中的数量返回Map对象中的数量
setMap对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));

通过for..of遍历Map

for ([val, key] of map2) {   console.log(`${key}---${val}`); }

5、WeakMap

Map类似,也是以键值对的形式存在的

  • 和Map的区别
    • WeakMapkey只能使用对象,不接受其他的类型作为key
    • WeakMapkey对对象是弱引用

基本使用

const weakMap = new WeakMap(); weakMap.set(obj, "a"); console.log(weakMap.get(obj)); // a

WeakMap常用方法

方法返回值说明
getweakmap对象获取元素
deleteboolean删除元素
hasbooleanweaksmap对象中是否存在这个值

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

【相关推荐:javascript视频教程、web前端】

以上就是新增的es6数据结构有哪些的详细内容,更多请关注站长家园其它相关文章!

本文标签:  es6数据结构

转载请注明来源:新增的es6数据结构有哪些

本文永久链接地址:https://www.adminjie.com/post/11220.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 完全掌握java之String类

      完全掌握java之String类

      本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于string类的相关问题,包括了字符串的常量池、字符串的不可变性等等相关内容,下面一起来看一下,希...

    • 简单学习Python字符和列表(实例详解)

      简单学习Python字符和列表(实例详解)

      本篇文章给大家带来了关于python的相关知识,其中主要介绍了关于字符和列表的相关问题,包括了字符串的输入输出、列表循环遍历、列表的增删改查以及列表的嵌套等等内...

    • 图文解析Redis线程模型

      图文解析Redis线程模型

      本篇文章给大家带来了关于Redis的相关知识,其中主要介绍了关于线程模型的相关问题,Redis它是一个单线程的,下面就一起来看一下,希望对大家有帮助。推荐学习:...

    • jquery怎么判断元素是否有子节点

      jquery怎么判断元素是否有子节点

      方法:1、用children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的jQ对象;2、用length检测子节点个数...

    • jquery对象访问的方法有哪些

      jquery对象访问的方法有哪些

      jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...

    热门文章