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

相关文章

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

Python 字符串裁切与提取全面且实用的解决方案

《Python字符串裁切与提取全面且实用的解决方案》本文梳理了Python字符串处理方法,涵盖基础切片、split/partition分割、正则匹配及结构化数据解析(如BeautifulSoup、j... 目录python 字符串裁切与提取的完整指南 基础切片方法1. 使用切片操作符[start:end]2

SpringBoot加载profile全面解析

《SpringBoot加载profile全面解析》SpringBoot的Profile机制通过多配置文件和注解实现环境隔离,支持开发、测试、生产等不同环境的灵活配置切换,无需修改代码,关键点包括配置文... 目录题目详细答案什么是 Profile配置 Profile使用application-{profil

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言:为什么需要自定义异常一、异常基础:先搞懂python的异常体系1.1 异常是什么?1.2

MySQL连表查询之笛卡尔积查询的详细过程讲解

《MySQL连表查询之笛卡尔积查询的详细过程讲解》在使用MySQL或任何关系型数据库进行多表查询时,如果连接条件设置不当,就可能发生所谓的笛卡尔积现象,:本文主要介绍MySQL连表查询之笛卡尔积查... 目录一、笛卡尔积的数学本质二、mysql中的实现机制1. 显式语法2. 隐式语法3. 执行原理(以Nes

全面解析Golang 中的 Gorilla CORS 中间件正确用法

《全面解析Golang中的GorillaCORS中间件正确用法》Golang中使用gorilla/mux路由器配合rs/cors中间件库可以优雅地解决这个问题,然而,很多人刚开始使用时会遇到配... 目录如何让 golang 中的 Gorilla CORS 中间件正确工作一、基础依赖二、错误用法(很多人一开

深入浅出SpringBoot WebSocket构建实时应用全面指南

《深入浅出SpringBootWebSocket构建实时应用全面指南》WebSocket是一种在单个TCP连接上进行全双工通信的协议,这篇文章主要为大家详细介绍了SpringBoot如何集成WebS... 目录前言为什么需要 WebSocketWebSocket 是什么Spring Boot 如何简化 We

RabbitMQ消费端单线程与多线程案例讲解

《RabbitMQ消费端单线程与多线程案例讲解》文章解析RabbitMQ消费端单线程与多线程处理机制,说明concurrency控制消费者数量,max-concurrency控制最大线程数,prefe... 目录 一、基础概念详细解释:举个例子:✅ 单消费者 + 单线程消费❌ 单消费者 + 多线程消费❌ 多

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima