javascript中symbol究竟是什么?

在JavaScript中,Symbol 是一种原始数据类型,它可以用来表示独一无二的值。

基本语法

复制代码
    let a = Symbol();
    console.log(a);//Symbol()
    let b = Symbol('b');//可传入字符串用于描述Symbol,方便在控制台分辨Symbol
    console.log(b);//Symbol(b)

需要强调一点是即使传入的参数相同Symbol也是不相等的,因为其作用仅仅是用来描述。

复制代码
    let aaa = Symbol("测试");
    let bbb = Symbol("测试");
    console.log(aaa == bbb); //false

如果要获取描述可以使用description

复制代码
let aaa = Symbol("测试");
console.log(aaa.description);

Symbol.for

Symbol.for它的作用是在运行时的 symbol 注册表中搜索给定的 symbol。如果找到了,则返回相同的 symbol,否则,它会在全局 symbol 注册表中创建一个具有相同名称的新 symbol,并返回它。

与 Symbol() 不同,Symbol.for() 不一定在每次调用时都创建新的 symbol,而是首先检查给定 key 的 symbol 是否已经存在于注册表中。如果存在,则返回该 symbol。如果没有找到具有给定 key 的 symbol,Symbol.for() 将创建一个新的全局 symbol。

复制代码
let aaa = Symbol.for('lili');
let bbb = Symbol.for('lili');
console.log(aaa == bbb  );//true

Symbol.keyFor

Symbol.keyFor它用于从全局 symbol 注册表中检索与给定 symbol 共享的 key。

如果在全局 symbol 注册表中找到了与给定 symbol 相关联的 key,则返回该 key。如果没有找到,则返回 undefined。

复制代码
var global = Symbol.for("foo"); // 创建一个新的全局 symbol
console.log(Symbol.keyFor(global)); // "foo"

var local = Symbol();
console.log(Symbol.keyFor(local)); // undefined

在这个例子中,Symbol.for("foo") 创建了一个新的全局 symbol,并且 Symbol.keyFor(global) 返回了 "foo",因为 "foo" 是在全局 symbol 注册表中与 global 关联的 key。然而,对于本地 symbol local Symbol.keyFor() 返回了 undefined,因为它不在全局 symbol 注册表中。

Symbol.key和普通的Symbol分别应用在哪里?

Symbol():每次调用 Symbol() 都会返回一个全新且唯一的 Symbol 值,即使你传入相同的参数。这种特性使得 Symbol() 非常适合用于创建对象的私有属性,因为你无需担心属性名的冲突。

复制代码
let s1 = Symbol('key');
let s2 = Symbol('key');

console.log(s1 === s2);  // 输出:false

Symbol.for():Symbol.for() 会首先在全局 Symbol 注册表中查找是否存在一个键名与参数相同的 Symbol 值。如果存在,则返回该 Symbol 值;如果不存在,则创建一个新的 Symbol 值并注册到全局 Symbol 注册表中。因此,Symbol.for() 可以用于跨作用域共享 Symbol 值。

存在于全局 Symbol 注册表中的优势主要体现在以下两点:

跨作用域共享:全局 Symbol 注册表是全局的,这意味着在任何地方都可以访问到注册表中的 Symbol 值,从而实现跨作用域共享 Symbol 值。

防止命名冲突:由于 Symbol.for() 在创建 Symbol 值之前会检查全局注册表,因此可以确保相同键名的 Symbol 值是相同的,避免了命名冲突的问题。

需要注意的问题

在对象中使用Symbol需要注意使用[]形式,否则会被当成字符串

比如这样:

复制代码
let aaa = Symbol("小米汽车");
let obj = {
  aaa: "mi.com"
};
console.log(obj);//{aaa: 'mi.com'}

正确写法应该是:

复制代码
let aaa = Symbol("小米汽车");
let obj = {
  [aaa]: "mi.com"
};
console.log(obj);//{Symbol(小米汽车): 'mi.com'}

前端的世界总是在不断变化,作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。javascript中symbol就是这样一个值得我们深入探索的领域,让我们拭目以待,它将给前端世界带来怎样的变革。

介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。

相关推荐
Yeauty几秒前
Rust 中的高效视频处理:利用硬件加速应对高分辨率视频
开发语言·rust·ffmpeg·音视频·音频·视频
落榜程序员2 分钟前
Java 基础-30-单例设计模式:懒汉式与饿汉式
java·开发语言
番茄比较犟2 分钟前
Combine知识点switchToLatest
前端
北京_宏哥2 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
划水哥~5 分钟前
创建QMainWindow菜单栏
开发语言·c++·qt
Process6 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
矿渣渣6 分钟前
int main(int argc, char **argv)C语言主函数参数解析
c语言·开发语言
大松鼠君6 分钟前
轿车3D展示
前端·webgl·three.js
却尘7 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了9 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github