JS中的【Symbol】全面讲解

2024-09-06 07:12
文章标签 讲解 全面 js symbol

本文主要是介绍JS中的【Symbol】全面讲解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 什么是 Symbol?

Symbol 是 ES6 引入的一种新的原始数据类型(Primitive Data Type)。与 stringnumberbooleannullundefined 一样,Symbol 是不可变的原始值。Symbol 的特殊之处在于它是唯一的,即使两个 Symbol 的描述相同,它们的值也不相等。

2. Symbol 的创建

Symbol 通过 Symbol() 函数创建,可以接受一个可选的字符串参数作为描述(description),用于调试或日志记录,但不影响 Symbol 的唯一性。

let sym1 = Symbol();
let sym2 = Symbol('foo');
let sym3 = Symbol('foo');console.log(sym2 === sym3); // false
3. Symbol 的用途
  • 作为对象属性的键(Key): Symbol 最常见的用途之一是用作对象的属性键。由于每个 Symbol 都是唯一的,因此它可以确保属性不被意外覆盖或冲突。
let mySymbol = Symbol('myKey');
let obj = {};obj[mySymbol] = 'value';
console.log(obj[mySymbol]); // 'value'
  • 防止对象属性名冲突: 使用 Symbol 作为对象属性名可以避免在大型代码库或库之间发生属性名冲突。

  • 实现迭代器(Iterators): Symbol.iterator 是内置的 Symbol,用于定义对象的默认迭代器。当对象使用 for...of 循环遍历时会调用这个方法。

let iterable = {[Symbol.iterator]() {let step = 0;return {next() {step++;if (step <= 5) {return { value: step, done: false };}return { value: undefined, done: true };}};}
};for (let value of iterable) {console.log(value); // 1, 2, 3, 4, 5
}
  • 元编程和反射(Reflection): Symbol 还可以用来定义对象行为的某些方面,比如 Symbol.toPrimitiveSymbol.toStringTag 等,这些 Symbol 可以自定义对象的原生行为。
let obj = {[Symbol.toPrimitive](hint) {if (hint === 'number') {return 10;}return null;}
};console.log(+obj); // 10
4. 内置 Symbol

JavaScript 提供了一些内置的 Symbol,用于语言的内部机制。常见的内置 Symbol 包括:

  • Symbol.iterator:定义对象的默认迭代器。
  • Symbol.toPrimitive:对象转换为原始类型时调用的函数。
  • Symbol.toStringTag:修改 Object.prototype.toString() 的返回值。
  • Symbol.hasInstance:自定义 instanceof 操作符的行为。
  • Symbol.isConcatSpreadable:自定义数组 concat 方法是否展开对象。
class MyArray extends Array {static get [Symbol.species]() {return Array;}
}let myArray = new MyArray(1, 2, 3);
let mappedArray = myArray.map(x => x * x);console.log(mappedArray instanceof MyArray); // false
console.log(mappedArray instanceof Array);   // true
5. Symbol 的局限性
  • Symbol 无法被隐式转换为字符串或数字:使用 Symbol 作为字符串连接或数字运算时会抛出错误。这是为了防止意外的类型转换。
let sym = Symbol('foo');
console.log('Symbol is ' + sym); // TypeError: Cannot convert a Symbol value to a string
  • Symbol 的枚举性:使用 for...inObject.keys() 遍历对象时,Symbol 属性是不可枚举的,但可以使用 Object.getOwnPropertySymbols() 来获取对象的 Symbol 属性。
let obj = {[Symbol('key')]: 'value'
};console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(key) ]
  • Global Symbol 注册表:通过 Symbol.for()Symbol.keyFor() 可以使用全局的 Symbol 注册表,这允许你跨文件或模块共享 Symbol。
let globalSym = Symbol.for('globalKey');
let globalSym2 = Symbol.for('globalKey');console.log(globalSym === globalSym2); // true
console.log(Symbol.keyFor(globalSym)); // 'globalKey'
6. Symbol 的实际应用场景
  • 框架和库中避免命名冲突: 当开发公共库或框架时,可以使用 Symbol 作为内部属性键,避免用户代码中的命名冲突。
  • 实现私有属性: 尽管 Symbol 不是完全私有的,但它可以作为一种模拟私有属性的手段,避免直接通过常规方法访问这些属性。
  • 自定义对象行为: 使用内置 Symbol 可以让对象表现出更符合预期的行为,如自定义对象的字符串表示、数值转换等。

总结来说,Symbol 是 JavaScript 中强大且灵活的工具,提供了许多高级功能,如安全的对象属性定义和元编程能力。掌握 Symbol 有助于编写更加健壮和可扩展的代码。

这篇关于JS中的【Symbol】全面讲解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141357

相关文章

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

Java集合中的List超详细讲解

《Java集合中的List超详细讲解》本文详细介绍了Java集合框架中的List接口,包括其在集合中的位置、继承体系、常用操作和代码示例,以及不同实现类(如ArrayList、LinkedList和V... 目录一,List的继承体系二,List的常用操作及代码示例1,创建List实例2,增加元素3,访问元

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

Redis的Zset类型及相关命令详细讲解

《Redis的Zset类型及相关命令详细讲解》:本文主要介绍Redis的Zset类型及相关命令的相关资料,有序集合Zset是一种Redis数据结构,它类似于集合Set,但每个元素都有一个关联的分数... 目录Zset简介ZADDZCARDZCOUNTZRANGEZREVRANGEZRANGEBYSCOREZ

Go中sync.Once源码的深度讲解

《Go中sync.Once源码的深度讲解》sync.Once是Go语言标准库中的一个同步原语,用于确保某个操作只执行一次,本文将从源码出发为大家详细介绍一下sync.Once的具体使用,x希望对大家有... 目录概念简单示例源码解读总结概念sync.Once是Go语言标准库中的一个同步原语,用于确保某个操

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一