ES6的symbol与新增的数据结构---Set、WeakSet、Map、WeakMap的详解

最新推荐文章于 2024-03-26 11:42:41 发布
最新推荐文章于 2024-03-26 11:42:41 发布
阅读量355 收藏 1
点赞数
分类专栏： JS 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47342392/article/details/126918318
版权

一、Symbol的详解

1.定义

Symbol是ES6中新增的一个基本数据类型，翻译为符号

symbol的原因：

  • 在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；

  • 比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下， 很容易造成冲突，从而覆盖掉它内部的某个属性；

  • 比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；

Symbol 生成一个独一无二的值：

  • Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；

  • 在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；

代码示例：

const s1 = Symbol()
const s2 = Symbol()

console.log(s1 === s2)

// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa")
console.log(s3.description)

2.Symbol作为属性名

通常会使用Symbol在对象中表示唯一的属性名：

应用场景：

  • 在定义对象字面量时使用

  • 新增属性

  • 通过Object.defineProperty方式定义属性

  • 获取值，注意：不能通过.（点运算符）来获取

代码示例：

// 2.Symbol作为属性名
// 2.1在定义对象字面量时使用
const obj = {
  [s1]: 'abc',
  [s2]: 'cba'
}
// 2.2新增属性
obj[s3] = 'nba'
// 2.3Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 'ccc'
})

// 注意: 不能通过.语法获取
console.log(obj[s1]); // abc

使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值，需要通过需要Object.getOwnPropertySymbols来获取所有Symbol的key ，然后再遍历key来获取值

// 3.使用Symbol作为key的属性名，在遍历/Object.key等中获取不到这些Symbol值
// 需要Object.getOwnpropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertyNames(obj)); // []
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(), Symbol(), Symbol(), Symbol() ]
const skeys = Object.getOwnPropertySymbols(obj)
for(const skey of skeys) {
  console.log(obj[skey]); 
}

创建相同的symbol值

// 4.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for("aaa")
const sb = Symbol.for("aaa")

console.log(sa === sb); // true
const key = Symbol.keyFor(sa)
console.log(key); // aaa

const sc = Symbol.for(key)
console.log(sa === sc); // true

二、强引用与弱引用

引用：ES6后我们用VE来存储全局变量，他相当于根对象，里面存储了obj，所以GC垃圾回收不会把obj对象删除

let obj = {
  name: "kk"
}

强引用：当有VE有一个obj变量引用一个对象，当有另外变量foo引用这个对象（这条引用是强引用），当删除obj变量对这个对象的引用，GC并不会删除这个对象，因为foo对这个对象是强引用

弱引用：当有VE有一个obj变量引用一个对象，当有另外变量foo引用这个对象（这条引用是弱引用），当删除obj变量对这个对象的引用，GC也会删除这个对象，因为foo对这个对象是弱引用，不管它还有没有对这个对象引用，都会删除这个对象

三、Set的详解

1.定义

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复 。创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）

代码示例：

const set = new Set()
set.add(100)
set.add(90)
set.add(80)
set.add(70)
console.log(set); // Set(4) { 100, 90, 80, 70 }

// 添加对象时特别注意
// 这样是创建两个地址不同的对象
set.add({})
set.add({})

// 这是创建同一个对象
const obj = {}
set.add(obj)
set.add(obj)
console.log(set);

2.应用场景

为数组去重

// 可以为数组去重
const arr = [10, 10, 20, 30, 30, 40, 50]
const newSet = new Set(arr)
console.log(newSet);
// const newArr = Array.from(newSet)
const newArr = [...newSet]
console.log(newArr);

3.set的常见方法

  • Set常见的属性：

    • size：返回Set中元素的个数

  • Set常用的方法：

    • add(value)：添加某个元素，返回Set对象本身；

    • delete(value)：从set中删除和这个值相等的元素，返回boolean类型；

    • has(value)：判断set中是否存在某个元素，返回boolean类型； .

    • clear()：清空set中所有的元素，没有返回值；

    • forEach(callback, [, thisArg])：通过forEach遍历set；

  • Set是支持for of的遍历的。

// Set的方法
// add
arrSet.add(100)
console.log(arrSet) // Set(5) { 33, 10, 26, 30, 100 }

// delete
arrSet.delete(33)
console.log(arrSet)

// has
console.log(arrSet.has(100))

// clear
// arrSet.clear()
console.log(arrSet)

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
})

for (const item of arrSet) {
  console.log(item)
}

四、WeakSet的详解

1.定义

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构

2.常见的方法

  • add(value)：添加某个元素，返回WeakSet对象本身；

  • delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；

  • has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

注意：WeakSet不能遍历

  • 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。

  • 所以存储到WeakSet中的对象是没办法获取的；

五、Map的详解

1.定义

Map也是新增的数据结构，用于存储映射关系

2.Map与对象的区别

对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key），某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；

代码示例：

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "kk" }
const obj2 = { name: "kobe" }

const info = {
  [obj1]: "aaa",
  [obj2]: "bbb"
}

// 先将obj1对象转为字符串 -> '[object Object]'
// obj2也转为字符串 -> '[object Object]' 第二个覆盖第一个
console.log(info) // { '[object Object]': 'bbb' }

Map的基本使用：

new Map也可以传入一个数组

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)

const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
// 输出结果
/**
 *Map(3) {
    { name: 'kk' } => 'aaa',
    { name: 'kobe' } => 'bbb',
    2 => 'ddd'
  }
 */
console.log(map2)

3.常用的方法

  • Map常见的属性：

    • size：返回Map中元素的个数；

  • Map常见的方法：

    • set(key, value)：在Map中添加key、value，并且返回整个Map对象；

    • get(key)：根据key获取Map中的value；

    • has(key)：判断是否包括某一个key，返回Boolean类型；

    • delete(key)：根据key删除一个键值对，返回Boolean类型；

    • clear()：清空所有的元素；

    • forEach(callback, [, thisArg])：通过forEach遍历Map；

  • Map也可以通过for of进行遍历

// 常见的属性和方法
console.log(map2.size)

// set
map2.set("why", "eee")
console.log(map2)

// get(key)
console.log(map2.get("why"))

// has(key)
console.log(map2.has("why"))

// delete(key)
map2.delete("why")
console.log(map2)

// clear
// map2.clear()
// console.log(map2)

// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
})

for (const item of map2) {
  console.log(item[0], item[1])
}
// 解构的方式
for (const [key, value] of map2) {
  console.log(key, value)
}

六、WeakMap的详解

1.定义

Map类型相似的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的

2.WeakMap与Map的区别

  • 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；

  • 区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

const obj1 = {
  name: 'kk'
}
// 区别一：key只能是对象 不能是基本数据结构
const weakMap = new WeakMap()
// console.log(weakMap.set(1, "aaa")); // TypeError: Invalid value used as weak map key
console.log(weakMap.set(obj1, "aaa")); // WeakMap { <items unknown> } 因为不能使用遍历 所以这样显示

// 区别二：对对象的引用是弱引用
const map = new Map()
// 强引用
console.log(map.set(obj1, "aaa"));
// 弱引用
console.log(weakMap.set(obj1, "bbb"));

3.常见的方法

  • set(key, value)：在Map中添加key、value，并且返回整个Map对象

  • get(key)：根据key获取Map中的value

  • has(key)：判断是否包括某一个key，返回Boolean类型

  • delete(key)：根据key删除一个键值对，返回Boolean类型

  • 注意：WeakMap也是不能遍历的 ，因为没有forEach方法，也不支持通过for of的方式进行遍历

代码示例：

// get方法
console.log(weakMap.get(obj))

// has方法
console.log(weakMap.has(obj))

// delete方法
console.log(weakMap.delete(obj))
// WeakMap { <items unknown> } 因为不能遍历
console.log(weakMap)

4.应用场景

响应式原理中WeakMap的使用

收集数据依赖关系

思路：

  • 创建map对象，分别收集obj1的name和age里的函数，name作为key，函数作为value

  • 创建weakMap对象，分别收集obj1和obj2对象，obj1和obj2作为key，map作为value

代码示例：

// 应用场景 vue3响应式原理
const obj1 = {
  name: "zyk",
  age: 18
}

function obj1NameFn1() {
  console.log("obj1NameFn1被执行");
}

function obj1NameFn2() {
  console.log("obj1NameFn2被执行");
}

function obj1AgeFn1() {
  console.log("obj1AgeFn1被执行");
}

function obj1AgeFn2() {
  console.log("obj1AgeFn2被执行");
}

const obj2 = {
  name: 'hls',
  age: 18
}

function obj2NameFn1() {
  console.log("obj2NameFn1被执行");
}

function obj2NameFn2() {
  console.log("obj2NameFn2被执行");
}

// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1对obj1收集数据结构
const obj1Map = new Map()
obj1Map.set("name", [obj1NameFn1, obj1NameFn2])
obj1Map.set("age", [obj1AgeFn1, obj1AgeFn2])
console.log(obj1Map);
weakMap.set(obj1, obj1Map)
console.log(weakMap.get(obj1));

// 2.2obj2收集数据结构
const obj2Map = new Map()
obj2Map.set("name", [obj2NameFn1, obj2NameFn2])
console.log(obj2Map);
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name发生改变
obj1.name = "kk"
const targetMap = weakMap.get(obj1)
console.log(targetMap);
const fns = obj1Map.get("name")
console.log(fns);
fns.forEach(item => item());

乘嘘圆宝宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Set、WeakSet、Map及WeakMap
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-03 905
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构 1. 集合（Set） ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。 Set 本身是一种构造函数，用来生成 Set 数据结构。 new Set([iterable]) 举个例子： const s = new Set() [1, 2,...
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
10-17
主要介绍了ES6中Set和Map数据结构，Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
es6之symbol类型、set集合
小泥鳅
04-11 210
symbol类型 原始数据类型symbol，他表示独一无二的值 最大用途：用来定义对象的私有变量 如果是用symbol定义的对象中的变量，取值时一定要用[变量名] set集合 集合表示无重复值的有序列表；let set = new Set ();创建一个新的集合； 添加元素：set.add(2); set.add('4'); 删除元素：set.delete(2); 校验某个值是否在set中：set.has('4'); 将集合转化为数组，可以使用运算符 常见问题 set中对象的引用无法被释放 还有个w
new WeakMap()的使用
最新发布
weixin_44609842的博客
03-26 313
无法迭代：由于键的弱引用特性，WeakMap 不提供像 Map 那样的迭代方法，所以无法通过 WeakMap 实例直接获取键或值的列表。适用场景：WeakMap 主要用于需要存储对象键并且不希望阻止这些键被垃圾回收的场景，比如在一些框架或库内部用来存储私有数据。总之，WeakMap 在需要使用对象作为键并且希望在键对象失去引用后能够被垃圾回收时非常有用。键只能是对象：WeakMap 的键只能是对象，而值可以是任意类型的数据。
es6学习笔记Set和WeakSet数据结构
码农的世界
04-24 370
Set和WeakSet 数据结构是ES6新增。 它与数组非常相似，但是Set数据结构的成员都是唯一的。 特别说明:Set中只能添加一个NaN。 一.Set数据结构: var set = new Set([1, 2, 3, 4, 2, 8, 4]); //两个2 for (var elem of set) { console.log(elem) } //———–循环用add添加赋值
ES6入门(数组扩展,函数扩展,对象扩展,Symbol,数据结构)
含笑
06-21 1311
数组扩展 Array.from Array.of copyWithin find\findIndex fill entries\keys\values inludes 把一组变量转换成数组类型{ let arr = Array.of(3,4,7,9,11); console.log('arr=',arr); let empty=Array.of(); console.log('empt
数据类型 Symbol
You_are_my_zing的博客
12-08 527
QuestDB引入了一个名为 SYMBOL 的数据类型;一种用于存储重复字符串的数据结构。在内部，SYMBOL 类型被存储为一个整数表及其对应的字符串值。 symbol类型的优势 大大提高了查询性能，因为字符串操作比较和写入int类型而不是字符串。 由于int映射到字符串类型，大大提高了存储效率。 对用户来说是不显眼的，因为SQL执行的结果与处理字符串值的结果相同。 通过消除对显式附加表或连接的需要，降低了数据库模式的复杂性。 使用 symbols 在创建表时，列可以被指定为SYMBOL，类似于其
详解ES6中的 Set Map 数据结构学习总结
10-17
主要介绍了详解ES6中的 Set Map 数据结构学习总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ES6新数据结构Set与WeakSet用法分析
08-30
主要介绍了ES6新数据结构Set与WeakSet用法,结合实例形式简单分析了Set与WeakSet的功能、使用方法及相关注意事项,需要的朋友可以参考下
ES6新增数据结构WeakSet的用法详解
08-29
WeakSet和Set类似，同样是元素不重复的集合，它们的区别是WeakSet内的元素必须是对象，不能是其它类型。接下来通过本文给大家详细介绍ES6新增数据结构WeakSet的用法，感兴趣的朋友一起看看吧
(精华)2020年7月3日 JavaScript高级篇 ES6(Symbol数据结构)
热门推荐
时光隧道
07-03 56万+
概念以及引入的原因 // 新提出的一个数据结构 Symbol 基本数据类型 // Symbol表示独一无二 第七种数据类型 // 对象的属性是字符串 对象的话隐式调用toString 转化成字符串 let a = {a:1}; let b = {b:2}; let c = {}; c[a] = 3; // [object Object] c[b] = 4; // [object Object] console.log(c); // ? 怎么解决 let s = Symbol() console.log(t
深入理解ES6--Set、Map及Symbol
李刚的学习专栏
04-04 807
Set集合和Map集合 Set集合是一种无重复元素的列表，通常用来检测给定的值在某个集合中是否存在；Map集合内含多组键值对，通常用来缓存频繁取用的数据。 ES5中的问题 var map = Object.create(null) map[5] = 'foo' console.log(map[5], map['5']) // 'foo' 'foo' let key1 = {...
Es6 Symbol数据结构 Set基础知识
ZM123456789ZM的博客
04-27 153
概念及引入的原因 let sym = Symbol(); console.log(typeof sym); //symbol //第七种数据类型 let sym2 = Symbol('a'); let sym3 = Symbol('b'); console.log(sym2); //Symbol(a) console.log(sym3); //Symbol(b) let symStr = Symbol({}); console.log(
一文了解Symbol数据类型
18岁的蛋蛋博客
08-16 597
Symbol本质上是一种唯一标识符，可用作对象的唯一属性名，这样其他人就不会改写或者覆盖你的属性值。 怎样声明？ let id = Symbol("id"); typeof(id) //symbol Symbol的两个特点 唯一性，同一个变量生成的值也不相同 let id1 = Symbol('id'); let id2 = Symbol('id'); console.log(id1 == id2) //false; -隐藏性，for…in，Object.keys()不能访问 let id
Javascript ES6 WeakMap详解
luoqiang0831的专栏
02-27 676
前段时间在看技术文章时看到 WeakMap 很陌生 感觉有点out了 然后了解了下MDN上说 WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。语法也很简单const wp = new WeakMap();在使用的过程中我们需要注意 WeakMap 的 key 只能是 Object 类型// 创建一个在每个实例中存储私有变量的对象 const inte...
Symbol 异步处理 私有变量 WeakMap
weixin_49739911的博客
04-01 179
Symbol 异步处理 私有变量 WeakMap
ES6新增Map、WeakMap和Set、WeakSet
goutinga的博客
01-06 316
Map Map是一组键值对的结构，具有极快的查找速度。初始化Map需要一个二维数组。 let age = new Map([['emily',20],['snow',30],['jonse',18]]); // Map方法 clear entries delete forEach ... age.get('snow'); //30 age.has('snow'); //true age.set('bob',37); //{"emily" => 20, "snow" => 30, "jonse"
ESModule、Symbol、Set和WeakSet、Map和WeakMap
chenjia525的博客
06-29 116
ESModule、Symbol、Set和WeakSet、Map和WeakMap
【JavaScript】ES6新增的数据类型（Symbol，Set，Map，weakSet，weakMap）
AC_greener的博客
03-11 1009
回顾一下js中七种数据类型： number， string， bool，null，undefined，symbol， Object。前面六种是基本数据类型，Object是复杂数据类型 Object里面又分为：Array Function Date object ES6新增的数据类型（Set，Map，weakSet，weakMap）都属于Object Symbol Symbol的使用： var a ...
vue使用es6模板字符串渲染v-if
06-02
在 Vue 中使用 ES6 模板字符串渲染 v-if 与使用 Vue 的模板字符串渲染 v-if 是类似的。 示例代码如下： ```javascript ${show ? `${message}</p>` : ''} export default { data() { return { message:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值