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。如果你有闲暇时间,可以做个知识拓展。

相关推荐
乌啼霜满天2495 分钟前
JDBC编程---Java
java·开发语言·sql
Myli_ing15 分钟前
考研倒计时-配色+1
前端·javascript·考研
色空大师17 分钟前
23种设计模式
java·开发语言·设计模式
余道各努力,千里自同风17 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave24 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟26 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
Bruce小鬼30 分钟前
QT文件基本操作
开发语言·qt
2202_7544215435 分钟前
生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件
java·linux·开发语言
我只会发热42 分钟前
Java SE 与 Java EE:基础与进阶的探索之旅
java·开发语言·java-ee
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js