《看完就懂系列》答应我,看完就开始用Symbol好吗?

《看完就懂系列》答应我,看完就开始用Symbol好吗?

技术杂谈小彩虹2021-07-13 4:04:0280A+A-

这是大冰块2021年第8篇原创文章,和大冰块一起在前端领域努力吧!!!


写在前面

每到周五公司就格外的忙,测试忙着提bug,产品忙着改需求,UI忙着发挥她的像素眼,尤其是下班前的一阵子,大家彷佛充满了干劲,颇有种再干他五百年的气势。就像一天的活都堆到傍晚,一周的活也都堆到周五,一言不合就加班。更惨的是加班回家还要哄女朋友睡觉,大冰块日更的大业差点被毁于一旦。

终于把女朋友哄睡着了,大冰块悄悄爬起床找个简单又冷门的题材再更它一篇。

很久很久之前,大冰块面试的时候,面试官问我js的数据类型,我想这还不简单?脱口而出Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还把它们的基本方法也说了一遍。面试官却意犹未尽的说:还有呢?ES6新增的Symbol有用到吗?我说项目中暂时没有用到过,贵公司有用到吗?面试官迟疑了一会儿说没有。

我和面试官面面相觑,气氛一度有些尴尬。

所以今天就来说说这个Symbol,避免下次面试的时候尴尬。

什么是Symbol

Symbol 是ES6新增的一种基本数据类型。我们可以通过调用内置函数 Symbol() 创建,这个函数会动态的生成一个匿名、全局唯一的值。

举个例子吧:

Symbol就好比我们的身份证号,没有谁的身份证号和别人是相同的,都是全国唯一的号码。

如:

let a = Symbol()
let b = Symbol()
a === b // false

因为上述例子中,a和b的值都是Symbol(),虽然它们并不相等,但是我该如何区分它们呢?这里有个对Symbol不错的说明:

Symbol 函数栈不能用 new 命令,因为 Symbol 是原始数据类型,不是对象。可以接受一个字符串作为参数,为新创建的 Symbol 提供描述,用来显示在控制台或者作为字符串的时候使用,便于区分。

这时候就可以给Symbol()函数传参,参数可作为当前Symbol值的描述,即Symbol(描述内容)

读取描述内容可通过Symbol值转字符串的方法,也可通过Symbol值的属性description直接获取描述内容。示例如下:

const a = Symbol('描述啊');

String(a) // "Symbol(描述啊)"
a.toString() // "Symbol(描述啊)"
a.description  // "描述啊"

// 注意:Symbol()返回的永远是全局唯一的值。
// 所以Symbol() 和 Symbol() 并不相等。同样的,Symbol("描述")和Symbol("描述")也不相等哦。

Symbol有什么用

作为一名务实主义者,不知道它的用处就想让我去了解它,那是不可能的。

什么?你说不先了解怎么知道它的用处?这不就是“不工作怎么有经验?没经验怎么找工作?”的神奇悖论吗?

啊不扯了,我来告诉你Symbol最基本的两个用处

一,避免对象的键被覆盖。Symbol用于对象的属性名时,能保证对象不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

二,避免魔术字符串。魔术字符串的诠释是:在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

第一个用处容易理解,比如:

// 有一天大冰块声明了一个对象
let obj = {
    a:1,
    b:2,
    ...
}

// 过了很久,同事小明用到了这个对象,不过因为对象里键值对繁多,并没有仔细筛查,小明给对象添加了新的键值对
obj.a = 100 
    
// 此时obj的值为
obj = {
    a:100,
    ...
}

// 如果其他地方在用obj.a的值,就会出现一系列的错误

// 所以小明给obj对象添加属性时,可以写成

const a = Symbol('a');
obj[a] = 100;

// 此时obj的值为
obj = {
    a: 1,
    b: 2,
    Symbol(a): 100
}

而第二个用处就不太好理解了,我们要先理解魔术字符串的含义。

以我最近在项目中看到的某位小伙伴代码为例:

const getUserInfo = state => {
	if(state == 'yes'){
    	 // 状态正确的后续操作
    }else if(state == 'no'){
     	 // 状态错误的后续操作 
     }else{
         // 其他状态的后续操作
	}
}

// 在上述代码中,getUserInfo函数的传参"yes"和"no"都是魔术字符串,它们在多个接口中都被用到,不利于将来的修改和维护。
// Symbol适用于原先写成魔术字符串的地方,因为它能保证自己是全局唯一的值。

// 所以代码可改写如下
let status = {
    success: Symbol('success'),
    error: Symbol('error'),
    ...
}
const getUserInfo = state => {
	if(state === status.success){
    	 // 状态正确的后续操作
    }else if(state === status.error){
     	 // 状态错误的后续操作 
     }else{
         // 其他状态的后续操作
	}
}

getUserInfo(status.success)

值得一提的是:

Symbol 作为对象属性名时读取时不能用.运算符,要用方括号。

以下面代码为例:

let state = Symbol()
let obj = {}
obj[state] = 500
obj.state = 600
obj // {state: 600, Symbol(): 500}

这是因为.运算符后面是字符串,所以取到的是字符串 state属性,而不是 Symbol 值 state属性。

另外需要注意的是:

Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问。

但是在 for...in 、 for...of 的循环中不会出现该属性,同时 Object.keys() 、 Object.getOwnPropertyNames() 也不会 返回该属性。

如果要读取到一个对象中的 Symbol 属性,可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

以下面代码为例:

const obj = {};
const a = Symbol('a');
obj[a] = 'a';
for (let i in obj) {
  console.log(i); // 无输出
}
Object.getOwnPropertyNames(obj) // []
Object.getOwnPropertySymbols(obj) // [Symbol(a)]

Symbol的方法

Symbol.for()

既然Symbol()生成的是一个全局唯一的值,那我们如果想重复使用某个Symbol()生成的值怎么办呢?

这时候就需要用到Symbol.for()方法了。

Symbol.for()方法接受一个字符串作为参数,然后全局搜索有没有以该参数作为描述值的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局

悄悄告诉你:即使是在闭包函数中通过Symbol.for()方法生成的值,也会在全局中能被使用哦~

以下面代码为例:

let a = Symbol.for("唯一的")
let b = Symbol.for("唯一的")
a === b // true

在上面的代码中,let a时全局检索有没有以"唯一的"作为描述值的 Symbol 值,发现没有就创建了一个Symbol.for("唯一的")let b时全局检索有没有以"唯一的"作为描述值的 Symbol 值,发现有,于是直接把找到的Symbol.for("唯一的")赋值给了b,并没有重新去生成一个全局唯一的值。所以a === btrue

Symbol.keyFor()

如果我们要获取到全局注册的 Symbol 类型值的描述值该怎么做呢?

这时候就可以使用Symbol.keyFor()方法了。

Symbol.keyFor()方法返回一个已全局注册的 Symbol 类型值的描述值,如果该 Symbol 类型值未全局注册,则返回undefined

它类似于通过Symbol值的属性description直接获取描述内容

以下面代码为例:

let a = Symbol.for("唯一的")
let b = Symbol("唯一的")
Symbol.keyFor(a) // 唯一的
Symbol.keyFor(b) // undefined

在上面的代码中,let aSymbol.for()方法生成了一个全局注册的描述值为"唯一的"的Symbol值,所以Symbol.keyFor(a)返回了描述值"唯一的"

let bSymbol()方法生成的值并不是全局注册的。所以Symbol.keyFor(b)直接返回了undefined

写在后面

看完了看懂了不代表自己真的掌握了,如果想要熟练的掌握并应用,还是离不开平时的使用和积累。所以希望看到这里的你下次就能在项目中用到Symbol,有时候一段简单的代码,就能让老同事对你刮目相看,让新同事觉得你深不可测哟~

这是大冰块《看完就懂系列》的第7篇文章,《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎大家点击其他文章一起讨论学习:

原创不易,如有错误,欢迎指正。

如果有帮助到你,请给大冰块悄悄点赞关注,你的点赞关注就是我写下去的动力。

让我们一起在前端的路上进步吧~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们