伍佰目录 短网址
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

深入浅出ES6的Symbol类型

来源:本站原创 浏览:153次 时间:2022-01-09

本文内容

  • JS基本数据类型种类

  • Symbol的主要用法, 全局Symbol的使用与检测

  • Symbol与其他基本类型转换时的规则

ES6引入了一种新的原始数据类型,表示独一无二的值,最大的用处是作为对象属性的唯一标识符。

至此,Javascript拥有6种基本数据类型和一种复杂数据类型。

数据类型
基本类型

  • string

  • number

  • boolean

  • undefined

  • null

  • symbol

复杂类型

  • object

基本语法

Symbol([description])
  1. description 可选的描述,一般用在调试的时候作为区分,但是 不能用来访问Symbol。

  2. 该方法返回一个symbol值
let s = Symbol('test');let s2 = Symbol('test');let s3 = new Symbol('test'); // TypeErrorconsole.log(s === s2); // falseconsole.log(typeof s); // symbolconsole.log(s.description); // test
  1. 每次调用Symbol()返回的值都是独一无二的,不管描述是否一致。

  2. Symbol不支持new调用

  3. 通过description属性可以获取到传入Symbol的描述性字符串

全局单例的Symbol
使用Symbol.for()可以创建全局单例的symbol值,语法如下:

Symbol.for([name])

name 可选的描述,建议传入,否则name会作为undefined传入

  • 类似于单例模式,执行环境(一般是浏览器)内部维护了一个全局Symbol注册表,记录name和Symbol(name)关系

  • 尝试通过name在该注册表查找对应symbol值,如果找到,则返回这个symbol值

  • 如果没找到,则使用Symbol(name)创建一个symbol值,并记录该symbol值与name的关联关系,之后返回该symbol
const name = Symbol('name');const name2 = Symbol.for('name');const name3 = Symbol.for('name');console.log(name === name2); // falseconsole.log(name2 === name3); // true
  • 全局Symbol映射关系中name是作为字符串来使用的,结构类似下面的代码:

  • const globalSymbols = {name: Symbol('name')};
* 使用同样的字符串描述调用Symbol()和Symbol.for()获取到的symbol值不相等**查找是否为全局的单例Symbol**使用Symbol.keyFor()可以检测给定的symbol值是否是全局单例的symbol(简单来说就是检测是否是Symbol.for()创建的),语法如下:

Symbol.keyFor(symbol)

* symbol 必传, 待检测的symbol值* 如果给定的symbol值是通过Symbol.for()得到的,该方法返回传入symbol的字符串描述* 如果给定的symbol值不是通过Symbol.for()得到的,该方法返回undefined

const s = Symbol('s1');
const s2 = Symbol.for('s2');

console.log(Symbol.keyFor(s)); // undefined
console.log(Symbol.keyFor(s2)); // s2

**Symbol与JSON.stringify**Symbol类型的属性不会参与JSON的序列化

const name = Symbol('name');
const obj = {

data: 1
};
console.log(JSON.stringify(obj)); // {"data": 1}

**Symbol与for … in和for … of**

Symbol类型的属性不会出现在for … in和for … of循环中

const name = Symbol('name');
const user = {

data: 1
};

for(let i in user) {
console.log(i, user[i]);
}
// 上述循环输出 data 1

for(let i of user) {
console.log(i, user[i]);
}
// TypeError: user不是可迭代对象

**Symbol与Object.keys()和Object.getOwnPropertyNames()**

Symbol类型的属性不会出现在Object.keys()和Object.getOwnPropertyNames()返回结果中

const name = Symbol('name');
const user = {

data: 1
};
console.log(Object.keys(user)); // ["data"]
console.log(Object.getOwnPropertyNames(user)); // ["data"]
Symbol与Object.getOwnPropertySymbols()
Symbol类型的属性会出现在Object.Object.getOwnPropertySymbols()

const name = Symbol('name');
const user = {

data: 1
};
console.log(Object.Object.getOwnPropertySymbols(user)); // [Symbol(name)]

**Symbol数据类型转换**const name = Symbol('1');console.log(name + 1); // TypeErrorconsole.log(Number(name)); // 创建包装对象console.log(name + '1'); // TypeErrorconsole.log(String(name)); // Symbol(1)console.log(!!name); // trueconsole.log(Boolean(name)); // truesymbol值不能转换为数字symbol不能直接转换为字符串,需要通过String包装才能转化symbol可以直接转换为boolean,转化后为true**结尾**使用Symbol最大的注意事项应该是使用方括号语法去访问对应的属性,而不是字符串Symbol数据类型转换规范比较简单,大部分场景下也没用拿Symbol去做数据转换

  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net