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

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

一文全面详解Python变量作用域

《一文全面详解Python变量作用域》变量作用域是Python中非常重要的概念,它决定了在哪里可以访问变量,下面我将用通俗易懂的方式,结合代码示例和图表,带你全面了解Python变量作用域,需要的朋友... 目录一、什么是变量作用域?二、python的四种作用域作用域查找顺序图示三、各作用域详解1. 局部作

Nacos注册中心和配置中心的底层原理全面解读

《Nacos注册中心和配置中心的底层原理全面解读》:本文主要介绍Nacos注册中心和配置中心的底层原理的全面解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录临时实例和永久实例为什么 Nacos 要将服务实例分为临时实例和永久实例?1.x 版本和2.x版本的区别

Java进程CPU使用率过高排查步骤详细讲解

《Java进程CPU使用率过高排查步骤详细讲解》:本文主要介绍Java进程CPU使用率过高排查的相关资料,针对Java进程CPU使用率高的问题,我们可以遵循以下步骤进行排查和优化,文中通过代码介绍... 目录前言一、初步定位问题1.1 确认进程状态1.2 确定Java进程ID1.3 快速生成线程堆栈二、分析

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

javascript fetch 用法讲解

《javascriptfetch用法讲解》fetch是一个现代化的JavaScriptAPI,用于发送网络请求并获取资源,它是浏览器提供的全局方法,可以替代传统的XMLHttpRequest,这篇... 目录1. 基本语法1.1 语法1.2 示例:简单 GET 请求2. Response 对象3. 配置请求

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no