初识Symbol

什么是Symbol？
可以理解它为一个标识，一般情况下用来解决重名问题。

let hd = Symbol('hello,dust.')
let edu = Symbol('good afternoon')
console.log(hd == edu) //false

一个Symbol要反复使用可以用Symbol.for定义

let a = Symbol.for('good morning')
let b = Symbol.for('good morning')
console.log(a) //Symbol(good morning)
console.log(a == b) //true
console.log(Symbol.keyFor(a)) //good morning

当我们要从一个对象中取值时：
假设这个班上有两个李四，我们要把学生名字作为key，怎么办？
一般情况：

let user1 = '李四'
let user2 = '李四'
let grade = {user1: { js: 100, css: 89 },user2: { js: 100, css: 89 },
}
console.log(grade) //{ user1: { js: 100, css: 89 }, user2: { js: 100, css: 89 } }
let grade2 = {[user1]: { js: 100, css: 89 },[user2]: { js: 70, css: 55 },
}
console.log(grade2) //{ '李四': { js: 70, css: 55 } }

用了Symbol的情况：

let user1 = {name: '李四',key: Symbol(),
}
let user2 = {name: '李四',key: Symbol(),
}
let grade = {[user1.key]: { js: 100, css: 89 },[user2.key]: { js: 35, css: 55 },
}
console.log(grade)
//{ [Symbol()]: { js: 100, css: 89 }, [Symbol()]: { js: 35, css: 55 } }
console.log(grade[user1.key]) //{ js: 100, css: 89 }

Symbol就相当于生成一个永远不会重复的字符串

let user = {name: 'cat',desc: '用户资料',key: Symbol('user'),
}
let cart = {name: 'apple',desc: '购物车',key: Symbol('购物车数据'),
}
Cache.set(user.key, user)
Cache.set(cart.key, cart)
console.log(Cache.get(cart.key))
//{ name: 'apple', desc: '购物车', key: Symbol(购物车数据) }

Symbol在类中的作用

class Cache {static data = {}static set(name, value) {return (this.data[name] = value)}static get(name) {return this.data[name]}
}
Cache.set('hello', 'dust')
console.log(Cache.get('hello')) //dust

另一个例子：

let site = Symbol('this is a Symbol')
class User {constructor(name) {this.name = namethis[site] = 'dust'}getName() {return `${this[site]} ${this.name}`}
}let v = new User('lisa')
console.log(v.getName()) //dust lisa
for (const key in v) {console.log(key) //name
}

几种取值的方式

let symbol = Symbol('这是一个Symbol类型')
let hd = {name: 'dust',[symbol]: 'hello',
}
for (const key of Object.keys(hd)) {console.log(key) //name
}
for (const key of Object.getOwnPropertySymbols(hd)) {console.log(key) //Symbol(这是一个Symbol类型)
}
for (const key of Reflect.ownKeys(hd)) {console.log(key)/*nameSymbol(这是一个Symbol类型)*/
}

[JavaScript] 好用的 JavaScript Symbol 类型相关推荐

JavaScript 为什么要有 Symbol 类型？
摘要: 为什么比怎么用更有意义. 原文:JavaScript 为什么要有 Symbol 类型作者:前端小智 Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对 ...
25.JavaScript的Symbol类型、隐藏属性、全局注册表
文章目录 Symbol类型的使用 Symbol简介 Symbol类型的描述 Symbol不会隐式转字符串 Symbol类似作为对象的属性键创建Symbol键 for-in中被跳过隐藏自定义属性 S ...
JavaScript基础: ES6新特性---Symbol
简介在ES6中引入的一种新的基本数据类型Symbol.这个类型不像是number或者String让人使用起来那样顺手好理解,为什么是这样呢?是不是因为其是新特性,所以不熟是正常的? 自然不是因为箭头 ...
JavaScript实现限制文件上传类型和大小
JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style>body,td {font-size ...
Javascript验证信用卡号、信用卡类型(最全最新)
如果浏览不顺畅请到原文章出处:https://www.sky8g.com/technology/2690/ 请注意可能会提示风险,这是csdn设置网站设置的问题,请放心访问,谢谢. 本篇文章是由SK ...
javascript中的typeof返回值类型
number,string,boolean,object,function,undefined 一.对于数字类型的操作数而言, typeof 返回的值是 number.比如说:typeof(1),返回 ...
javascript基础系列：javascript中的变量和数据类型（一）
javascript基础系列:javascript中的变量和数据类型(一) 今天开始去重新系统温习一遍js基础,并作下记录 javascript是由三部分组成: ECMASCRIPT(ES): 描述了 ...
Symbol()类型的定义及特点
前文我们提到了JavaScript中的两种数据类型的存储方式,在说到数据类型的时候,提到了ES6新增的一种数据类型:Symbol类型,这个类型的功能类似于一种标识唯一性的ID.Symbol类型属于Ja ...
购物网站前台后台思维导图_【思维导图】前端开发JavaScript巩固你的JavaScript知识体系(网站同步更新)...
JavaScript基础语法网站同步更新:http://www.dadaqianduan.cn/#/%E5%89%8D%E7%AB%AF%E5%A4%8D%E7%9B%98%E8%AF%BE/Jav ...

[JavaScript] 好用的 JavaScript Symbol 类型

初识Symbol

Symbol在类中的作用

几种取值的方式

[JavaScript] 好用的 JavaScript Symbol 类型相关推荐

最新文章

热门文章