ES6原始数据类型Symbol

ES6引入的一种新的原始数据类型Symbol,表示独一无二的值。Symbol函数可以接受参数,表示对于这个唯一值的描述。属于基本数据类型,Symbol()函数会返回symbol类型的值

复制代码
// 创建symbol值
let  sy1=Symbol('hello');
let  sy2=Symbol();
console.log(sy1==sy2);
###1. 为了解决冲突
let obj={
    name:'zhangsan',
    age:12
}
// 新增属性 修改属性
let sy3=Symbol('name');
let obj1={
    ...obj,
    // 属性名是变量名时使用中括号
    [sy3]:"myname"
}
console.log(obj1)
案例:
let sy1=Symbol('age');
let sy2=Symbol('name');
let obj={
	name:"zhangsan",
	age:12,
	[sy1]:'myname',
	[sy2]:'myage',
	[Symbol('email')]:'kangjie@briup.com'
}
for(let key in obj){
	console.log(key);
}
let ss=Object.getOwnPropertySymbols(obj);
console.log(obj[ss[2]]);

2.消除魔术字符串

魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数

复制代码
function test(shape,options){
	let area=0;
	switch(shape){
		case Shape.SJX:
			area=.5 * options.width*options.height
			break;
		case Shape.ZFX:
			area=options.width*options.height
			break;
		case Shape.CIRCLE:
			area=Math.PI*Math.pow(options.r,2)
			break;
		default:
			area=-1			
	}
	return area
}
let Shape={
	SJX:Symbol('sjx'),
	ZFX:Symbol('zfx'),
	CIRCLE:Symbol('circle')
}
let res=test(Shape.SJX,{width:100,height:100,r:100});
console.log(res);

3.全局注册表

Symbol() 不同的是,用 Symbol.for() 方法创建的的 symbol 会被放入一个全局 symbol 注册表中。Symbol.for() 并不是每次都会创建一个新的 symbol,它会首先检查给定的 key 是否已经在注册表中了。假如是,则会直接返回上次存储的那个。否则,它会再新建一个。

复制代码
// 将symbol放到全局注册表中
let sy1=Symbol.for('hello');
// 从全局注册表中找到该key对应的value
let sy2=Symbol.for('hello');
console.log(sy1===sy2);//true
// 每次都会创建一个不同symbol值  虽然描述符一样 但是Symbol value值不一样
let sy3=Symbol('hello');
let sy4=Symbol('hello');
console.log(sy3==sy4);//false

Symbol.keyFor()
// Symbol.keyFor()可以检测symbol值是否在全局注册表中注册过。 返回对于symbol的描述或者undefined
let sy1=Symbol.for('hello');
console.log(Symbol.keyFor(sy1));
let sy2=Symbol('world');
console.log(Symbol.keyFor(sy2))
相关推荐
Helen_cai7 分钟前
OpenHarmony 项目统一全局样式、尺寸、色彩主题封装 ThemeUtil(API23)
开发语言·前端·javascript·华为·harmonyos
郑州光合科技余经理8 分钟前
家政O2O平台解析:从0搭建上门预约小程序解决方案
android·java·开发语言·前端·小程序·架构·php
小徐_233320 分钟前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
winfredzhang24 分钟前
用 wxPython + ECharts + 阿里矢量地图,做一个可离线兜底的上海雨量看板
前端·javascript·echarts
索西引擎36 分钟前
【React】Immer.js 在现代 Redux 生态中的角色:不可变性保障的工程化实现与开发体验优化
前端·javascript·react.js
kisshyshy38 分钟前
《川剧变脸 × React 状态管理?我在浏览器里跑了个端侧大模型》
前端·react.js·架构
只一39 分钟前
端侧AI实战第二章:React组件工程化 + 事件系统 + 可复用进度条(WebGPU模型加载底座)
前端·react.js
大卫陈1 小时前
微信小程序虚拟支付实战:从「支付能力被限制」到沙箱调通的全过程
前端·后端
武子康1 小时前
vLLM 0.25.1:服务没有报错,为什么仍会生成垃圾 Token(5 级正确性门禁 + 自动回滚条件)
前端·人工智能·后端
jyp201211071 小时前
Vue3 Diff 算法
前端·vue.js