新增结构有:1、Symbol,表示独一无二的值,是一个函数结构;2、Set,指的是“集合”结构,类似数组,允许存放无序且不能重复的数据;3、WeakSet,类似Set,内部数据也不能有重复值;4、Map,指的是“字典”结构,可存储映射关系。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
ES6新增数据结构
1、Symbol
Symbol
是ES6
中新增的一个基本数据类型之一,它是一个函数。每一个从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常用方法
方法 | 返回值 | 说明 |
---|---|---|
size |
set 对象中的数量 |
返回set对象中的数量 |
add |
Set 对象 |
添加元素 |
delete |
boolean |
删除元素 |
has |
boolean |
Set 对象中是否存在这个值 |
clear |
无 | 清空Set 对象中的值 |
3、WeakSet
WeakSet
是类似Set
的另外一种数据结构,内部数据也不能有重复值。
- 它与
Set
的区别-
WeakSet
只能存放对象类型,不能存放基本数据类型 -
WeakSet
对元素是弱引用
-
基本使用
const weakSet = new WeakSet(); let obj = { name: "_island" }; weakSet.add(obj);
WeakSet常用方法
方法 | 返回值 | 说明 |
---|---|---|
add |
weakset 对象 |
添加元素 |
delete |
boolean |
删除元素 |
has |
boolean |
weakset 对象中是否存在这个值 |
关于遍历
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 获取对应元素 |
size |
Map 对象中的数量 |
返回Map 对象中的数量 |
set |
Map 对象 |
添加元素 |
delete |
boolean |
删除元素 |
has |
boolean |
Set 对象中是否存在这个值 |
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的区别
-
WeakMap
的key
只能使用对象,不接受其他的类型作为key
-
WeakMap
的key
对对象是弱引用
-
基本使用
const weakMap = new WeakMap(); weakMap.set(obj, "a"); console.log(weakMap.get(obj)); // a
WeakMap常用方法
方法 | 返回值 | 说明 |
---|---|---|
get |
weakmap 对象 |
获取元素 |
delete |
boolean |
删除元素 |
has |
boolean |
weaksmap 对象中是否存在这个值 |
关于遍历
和WeakSet
一样,正因为它是弱引用,WeakMap
的key
是不可枚举的,如果key
可枚举那其列表将会受GC
影响。
【相关推荐:javascript视频教程、web前端】
以上是新增的es6数据结构有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

React是一个用于构建用户界面的JavaScript库,其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染,优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件,高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当,可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting,保持代码可读性和可维护性是最佳实践。

React通过JSX与HTML结合,提升用户体验。1)JSX嵌入HTML,使开发更直观。2)虚拟DOM机制优化性能,减少DOM操作。3)组件化管理UI,提高可维护性。4)状态管理和事件处理增强交互性。

React组件可以通过函数或类定义,封装UI逻辑并通过props接受输入数据。1)定义组件:使用函数或类,返回React元素。2)渲染组件:React调用render方法或执行函数组件。3)复用组件:通过props传递数据,构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑,提升开发效率和代码可维护性。

React严格模式是一种开发工具,可通过激活其他检查和警告来突出反应应用中的潜在问题。它有助于识别遗产代码,不安全的生命周期和副作用,鼓励现代反应实践。

本文讨论了React的对帐过程,详细介绍了它如何有效地更新DOM。关键步骤包括触发对帐,创建虚拟DOM,使用扩散算法以及应用最小的DOM更新。它还覆盖了经家

本文讨论了软件开发中元素与组件之间的区别,并突出了它们的角色,差异和对项目管理的影响。关键问题包括用户InterFAC中的复杂性,可重复性和功能


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

记事本++7.3.1
好用且免费的代码编辑器

Dreamweaver CS6
视觉化网页开发工具

Atom编辑器mac版下载
最流行的的开源编辑器

SublimeText3汉化版
中文版,非常好用