ES6 中 Symbol 怎么用?示例详解
时间:2024-04-02 07:55:53 来源:网络cs 作者:纳雷武 栏目:跨境风云 阅读:
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
一、ES6 Symbol 基本介绍二、使用场景三、用途总结
一、ES6 Symbol 基本介绍
Symbol 是 ECMAScript 6 引入的一种新的原始数据类型,它是不可变且唯一的。
这意味着每次调用 Symbol()
函数都会创建一个独一无二的值,即使传入相同的描述符也是如此。
// 创建 Symbollet sym1 = Symbol('description1'); // description1仅为描述信息,不影响符号的唯一性let sym2 = Symbol('description1');console.log(sym1 === sym2); // 输出: false// typeof检查console.log(typeof sym1); // 输出: "symbol"
代码示例:
// 创建Symbollet id = Symbol();let myObj = {};myObj[id] = 'This is a unique value';console.log(myObj[id]); // 输出: "This is a unique value"// 描述符let symWithDesc = Symbol('description');console.log(symWithDesc.description); // TypeError: Cannot read property 'description' of a non-object// Symbol.keyFor() 方法查找已注册的 Symbol 类型的键let globalSym = Symbol.for('globalKey');console.log(Symbol.keyFor(globalSym)); // 输出: "globalKey"// 注意,Symbol.for() 会查找全局 Symbol 注册表,确保同一描述符的 Symbol 在全局范围内是唯一的let anotherGlobalSym = Symbol.for('globalKey');console.log(anotherGlobalSym === globalSym); // 输出: true
二、使用场景
唯一标识符:由于 Symbol 值的唯一性,常常被用来作为对象的唯一属性名,防止属性冲突。let myPrivateProp = Symbol('private');class MyClass { constructor(value) { this[myPrivateProp] = value; } get secretValue() { return this[myPrivateProp]; }}
模块系统:在某些模块系统或库中,Symbol 可用于创建私有或隐式接口。
Map和Set键:Symbol 可以作为 Map 和 Set 的键,这样就不会与其他数据类型的键产生冲突。
内置 Symbol:ES6 提供了一些内置的 Symbol 值,如 Symbol.iterator
用于对象的迭代器方法。
let arr = ['a', 'b', 'c'];let iterator = arr[Symbol.iterator]();console.log(iterator.next().value); // 输出: 'a'
三、用途总结
Symbol 主要用于解决命名冲突的问题,特别是在编写大型应用或库时,可以帮助开发者避免无意间覆盖或访问到对象的内部属性。同时,它也为 JavaScript 提供了一种实现私有属性的间接途径。
本文链接:https://www.kjpai.cn/fengyun/2024-04-02/152417.html,文章来源:网络cs,作者:纳雷武,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
下一篇:返回列表