初识JS的Symbol数据类型以及它的使用场景

简介: ES6 新增的数据类型Symbol是什么?它的应用场景有那些?

什么是 Symbol

Symbol作为ES6 新增原始数据类型的一种,表示独一无二的值。

回忆一下原始类型的范畴(string, number, boolean, null, undefined, symbol)。

Symbol的使用

创建一个Symbol

const a = Symbol()
console.log(typeof a) // symbol

需要注意的是通过 Symbol 方法创建值的时候不用使用 new 操作符,原因是通过 new 实例化的结果是一个 object 对象,而不是原始类型的 symbol。

const a = new Symbol()
console.log(typeof a) // Symbol is not a constructor

通常使用new来构造是想要得到一个包装对象,而Symbol不允许这么做,那么如果我们想要得到一个Symbol()的对象形式,可以使用Object()函数。

const a = Symbol()
const b = Object(a)
console.log(typeof b) // object

Symbol 方法接收一个参数,表示对生成的 symbol 值的一种描述。

const a = Symbol('a')
const b = Symbol('b')

即使是传入相同的参数,生成的 symbol 值也是不相等的,因为 Symbol 本来就是独一无二的意思。

const a = Symbol('foo')
const b = Symbol('foo')

console.log(a === b) // false

Symbol的应用

Symbol的应用其实利用了唯一性的特性。

作为对象的属性

大家有没有想过,如果我们在不了解一个对象的时候,想为其添加一个方法或者属性,又怕键名重复引起覆盖的问题,而这个时候我们就需要一个唯一性的键来解决这个问题,于是Symbol出场了,它可以作为对象的属性的键,并避免冲突。

// 创建一个`Symbol`
const a = Symbol()

// 创建一个对象
const obj = {
   }

// 通过`obj[]`将`Symbol`作为对象的键
obj[a] = 'hello world'

值得注意的是我们无法使用.来调用对象的Symbol属性,所以必须使用[]来访问Symbol属性

降低代码耦合

代码千万行,维护第一难。编码不规范,同事两行泪。

当代码中充斥着大量的魔法字符时,纵使是原开发者在经过一段时间后再回头看也会变得难以理解,更不必说是交由后来开发者维护。

假如现有一个 Tabs 切换的功能:

if (type === 'basic') {
   
    return <div>basic tab</div>
}

if (type === 'super') {
   
    return <div>super tab</div>
}

上面代码中字符串 basic、super 就是与业务代码无关的魔法字符,接下来使用 Symbol 对这块代码进行改造。

const tabTypes = {
   
    basic: Symbol(),
    super: Symbol(),
}

if (type === tabTypes.basic) {
   
    return <div>basic tab</div>
}

if (type === tabTypes.super) {
   
    return <div>super tab</div>
}

模拟类的私有方法

ES6 中的类是没有 private 关键字来声明类的私有方法和私有变量的,但是我们可以利用 Symbol 的唯一性来模拟。

const speak = Symbol()
class Person {
   
    [speak]() {
   
        ...
    }
}

因为使用者无法在外部创建出一个相同的 speak,所以就无法调用该方法。

全局共享Symbol

如果我们想在不同的地方调用已经同一Symbol即全局共享的Symbol,可以通过Symbol.for()方法,参数为创建时传入的描述字符串,该方法可以遍历全局注册表中的的Symbol,当搜索到相同描述,那么会调用这个Symbol,如果没有搜索到,就会创建一个新的Symbol

为了更好地理解,请看下面例子

const a = Symbol.for('a')
const b = Symbol.for('a')
a === b // true

如上创建Symbol

  1. 首先通过Symbol.for()在全局注册表中寻找描述为aSymbol,而目前没有符合条件的Symbol,所以创建了一个描述为aSymbol
  2. 当声明b并使用Symbol.for()在全局注册表中寻找描述为aSymbol,找到并赋值
  3. 比较ab结果为true反映了Symbol.for()的作用

再来看看下面这段代码

const a = Symbol('a')
const b = Symbol.for('a')
a === b // false

结果竟然是false,与上面的区别仅仅在于第一个Symbol的创建方式,我们来一步一步分析一下为什么会出现这样的结果。

  1. 使用Symbol('a')直接创建,所以该Symbol('a')不在全局注册表中
  2. 使用Symbol.for('a')在全局注册表中寻找描述为aSymbol,并没有找到,所以在全局注册表中又创建了一个描述为a的新的Symbol
  3. 秉承Symbol创建的唯一特性,所以ab创建的Symbol不同,结果为false

问题又又又来了!我们如何去判断我们的Symbol是否在全局注册表中呢?

Symbol.keyFor()帮我们解决了这个问题,他可以通过变量名查询该变量名对应的Symbol是否在全局注册表中(Symbol.for创建的)

// Symbol.keyFor 方法返回一个使用 Symbol.for 方法创建的 symbol 值的 key
const a = Symbol('a')
const b = Symbol.for('a')
Symbol.keyFor(a) // undefined
Symbol.keyFor(b) // 'a'

内置Symbol值又是什么?

上面的Symbol使用是我们自定义的,而JS又内置了Symbol值,个人的理解为:由于唯一性特点,在对象内,作为一个唯一性的键并对应着一个方法,在对象调用某方法的时候会调用这个Symbol值对应的方法,并且我们还可以通过更改内置Symbol值对应的方法来达到更改外部方法作用的效果。

为了更好地理解上面这一大段话,咱们以Symbol.hasInstance作为例子来看看内置Symbol到底是个啥!

class demo {
   
    static [Symbol.hasInstance](item) {
   
        return item === '游魂博客'
    }
}
"游魂博客" instanceof demo // true

Symbol.hasInstance对应的外部方法是instanceof经常用于判断类型。上面代码创建了一个demo类,并重写了Symbol.hasInstance,所以其对应的instanceof行为也会发生改变,其内部的机制是这样的:当我们调用instanceof方法的时候,内部对应调用Symbol.hasInstance对应的方法即return item === '游魂博客'

更多内置属性查看:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#static_properties

obj中Symbol key的获取

es6针对这个,添加了Object.getOwnPropertySymbols方法。

let uid = Symbol('uid')
let obj = {
   
    [uid]: 'uid'
}

console.log(Object.keys(obj)) // []
console.log(Object.getOwnPropertyNames(obj)) // []
console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(uid)]

Symbol 不可强制转换

let uid = Symbol('uid')
uid + ''

这里会报错,根据规范,他会把uid转换成字符串进行相加。如果真的相加,可以先String(uid)之后再相加,不过目前看来,似乎没什么意义。

这里只是介绍了Symbol的一些基础用法,其他使用请参考文档:MDN

目录
相关文章
|
3月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
141 59
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
1月前
|
设计模式 JavaScript 前端开发
es6加上symbol的基础数据类型
【10月更文挑战第30天】ES6 中的 `Symbol` 作为一种新的基础数据类型,为 JavaScript 提供了一种创建唯一标识符和处理对象属性名冲突的有效方式,丰富了 JavaScript 的数据类型体系和编程模式,在实际开发中具有重要的应用价值。
|
1月前
|
设计模式 JavaScript 前端开发
es6加上symbol的基础数据类型
【10月更文挑战第22天】ES6中的 `Symbol` 作为一种新的基础数据类型,为JavaScript提供了一种创建唯一标识符和处理对象属性名冲突的有效方式,丰富了JavaScript的数据类型体系和编程模式,在实际开发中具有重要的应用价值。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
94 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
24 1
|
2月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
26 0
|
3月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
59 2
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章,主要介绍了基本数据类型和引用数据类型。
44 2
JavaScript基础知识-基本数据类型和引用数据类型
|
4月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
409 1