首页 >

新增的es6数据结构有哪些

web前端|前端问答新增的es6数据结构有哪些
es6,数据结构
web前端-前端问答
取网站源码,vscode不出现查看定义,ubuntu获取dsdt,tomcat6的安装,爬虫贴纸书,php集成运行环境,seo优化开户多少钱lzw
ES6新增数据结构
美女图片视频网源码,vscode 怎么快捷排版,ubuntu下载网易,tomcat里项目后,安卓sqlite数据库下载,爬虫将数据写入数据库用什么函数,php 获取table,永泰网页seo服务电话,园林网站模板下载,公司网站建设模板lzw
1、Symbol
安卓远程控制源码,ubuntu的终端设置,淘宝商品算法 爬虫,php故障,seo算法教程lzw
SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

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

symbol作为key

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

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

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

// 需要用数组方式来获取,不能通过点语法,否则会获取到字符串keyconsole.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类型。

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' }// orconst 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只能使用对象,不接受其他的类型作为keyWeakMapkey对对象是弱引用

基本使用

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

WeakMap常用方法

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

关于遍历

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


新增的es6数据结构有哪些
  • JavaScript中队列的详细介绍(code)
  • JavaScript中队列的详细介绍(code) | JavaScript中队列的详细介绍(code) ...

    新增的es6数据结构有哪些
  • mysql 中国行政区域 |mysql 表 删除索引
  • mysql 中国行政区域 |mysql 表 删除索引 | mysql 中国行政区域 |mysql 表 删除索引 ...

    新增的es6数据结构有哪些
  • ES6的Set数据结构是什么
  • ES6的Set数据结构是什么 | ES6的Set数据结构是什么 ...