🍉一文讲明白Symbol数据类型

简介: 🍉一文讲明白Symbol数据类型

一、Syboml数据类型的作用是什么?


我们学过JavaScript都知道在JavaScript中基本数据类型有6种:


Number,String,Boolean,Null,Undefined。ES6新增了Syboml类型,ES10新增了BigInt类型。


那么为什么要提出Symbl数据类型呢?


它存在的主要目的是解决全局变量冲突的问题。例如我们定义了一个全局对象,用来缓存数据,我们现在有两个js文件需要往这个对象中添加键名,由于js文件在不同模块,我们可能会添加相同的键名,于是就出现了冲突的问题。故Symbol数据类型的主要作用就是为对象添加独一无二的属性名。


const obj = {};
obj[Symbol()] = '橙子';
obj[Symbol()] = '柚子'
console.log(obj)
复制代码


5d97719898b045abab4f079827841f51_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


二、Symbol数据类型拓展


我们通过Symbol创建的值一定是一个唯一的值。


  • 如果我们想复用一个相同的Symbol值,那么我们可以使用Symbol.for()方法,该方法会接受一个字符串为参数,相同的字符串一定会返回相同Symbol类型的值。如果传入的参数不是字符串,那么该方法会把参数自动转换为字符串。
  • 在Symbol类型当中还提供了很多内置的Symbol常量用来作为内置方法的标识。


let obj1 = {}
console.log(obj1.toString())
复制代码


41c1c3b0a73944919dd34d9ddeae2b1e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


如果我们想修改字符串的toString标签,我们可以自定义这个字符串标签,使用Symbol.toStringTag这个属性


let obj1 ={[Symbol.toStringTag]:'Xobject'}
console.log(obj.toString())
复制代码


633b32f50ed74407b04698b5e19087a2_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


我们发现这个字符串标签已经被我们修改成功了。


  • 我们使用Symbol值作为对象的属性名,这个属性通过传统的for...in...是无法拿到的,通过Object.keys也是获取不到的Symbol类型的属性名,使用JSON.stringify序列化对象,Symbol类型的属性名也会被忽略掉。因此Symbol类型的属性特别适合作为对象的私有属性!
    那么真的不能拿到Symbol类型的属性名吗?其实,并不然,我们可以通过Object.getOwnPropertySymbols()方法,这个方法只能获取到Symbol类型的属性名。
相关文章
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
190 0
|
设计模式 JavaScript 前端开发
es6加上symbol的基础数据类型
【10月更文挑战第30天】ES6 中的 `Symbol` 作为一种新的基础数据类型,为 JavaScript 提供了一种创建唯一标识符和处理对象属性名冲突的有效方式,丰富了 JavaScript 的数据类型体系和编程模式,在实际开发中具有重要的应用价值。
|
设计模式 JavaScript 前端开发
es6加上symbol的基础数据类型
【10月更文挑战第22天】ES6中的 `Symbol` 作为一种新的基础数据类型,为JavaScript提供了一种创建唯一标识符和处理对象属性名冲突的有效方式,丰富了JavaScript的数据类型体系和编程模式,在实际开发中具有重要的应用价值。
|
JavaScript
es6数据类型Symbol以及es6操作数组常用的方法
es6数据类型Symbol以及es6操作数组常用的方法
172 0
|
JavaScript 前端开发 开发者
初识JS的Symbol数据类型以及它的使用场景
ES6 新增的数据类型Symbol是什么?它的应用场景有那些?
290 0
【ES6】Symbol数据类型
【ES6】Symbol数据类型
129 0
|
JavaScript
js中的symbol数据类型
js中的symbol数据类型是怎样的?有什么用?
|
JavaScript 前端开发 网络架构
【ES6】函数的参数、Symbol数据类型、迭代器与生成器
【ES6】函数的参数、Symbol数据类型、迭代器与生成器
230 0
|
JavaScript 前端开发 网络架构
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型
213 0
【ES6丨前端进阶基础 】二,ES6rest参数,Symbol第七种数据类型