ES6: Symbol概念与用法举例

news/2024/11/20 0:29:56/

概念: ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。

1-使用Symbol作为对象属性名

let name = Symbol()
let age = Symbol()
var obj = {[name]:"kerwin",[age]:100
}

举例理解:

a.给对象添加独一无二的属性

let obj = {name: 'Jack'
}let name = Symbol()
obj[name] = "Mike"console.log(obj); // {name: 'Jack', Symbol(): 'Mike'}
console.log(obj[name]); // Mike

b. 便于定义公共库

这里封装属性和方法时, 全部采取Symbol类型, 这样别人就算往里面加name、age等同名的属性或方法, 也不会影响对象原本使用

let keys = {name: Symbol(),age: Symbol(),location: Symbol(),test: Symbol(),
}
let obj = {[keys.name]: "Mike",[keys.age]: 100,[keys.location]: "WUXI",[keys.test](){console.log("test");}
}
console.log(obj); // {Symbol(): 'Mike', Symbol(): 100, Symbol(): 'WUXI'}
obj[keys.test]() // test

注意:

let s1 = Symbol()//1. 不能进行运算
console.log(s1>2); // Uncaught TypeError: Cannot convert a Symbol value to a number//2. 显示调用toString()
console.log(s1.toString() + "aaa");//3. 隐式转换boolean
if(s1){console.log("执行");
}

2-Symbol()函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述。这主要是为了在控制台显示,比较容易区分。

let keys = {name: Symbol("name"),age: Symbol("age"),location: Symbol("localtion"),test: Symbol("test"),
}
let obj = {[keys.name]: "Mike",[keys.age]: 100,[keys.location]: "WUXI",[keys.test](){console.log("test");}
}
console.log(obj); 
// {Symbol(name): 'Mike', Symbol(age): 100, Symbol(localtion): 'WUXI', Symbol(test): ƒ}

3-遍历问题

Symbol的值无法被for in进行遍历

let keys = {name:Symbol("name"),age:Symbol("age")
}
var obj = {[keys.name]:"kerwin",[keys.age]:100,a:1,b:2,c:3
}// 输出对象中的普通属性
for(let i in obj) {console.log(i); // a b c
}// 输出对象中的Symbol属性
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)]// 遍历输出 Reflect.ownKeys(obj) 可以找到对象中所有的属性,并返回一个数组
Reflect.ownKeys(obj).forEach(item=>{console.log(item,obj[item])
})
/*** Symbol(name) 'kerwin'* test.html:32 Symbol(age) 100
*/

补充: 拿到Symbol的属性Object.getOwnPropertySymbols(obj)

4-Symbol.for()可以重新使用同一个 Symbol 值

var obj  ={[Symbol.for("name")]:"kerwin",[Symbol.for("age")]:100
}console.log(obj[Symbol.for("name")]) // kerwin

5-Symbol表示独一无二的常量

case只能使用规定常量

const VIDEO = Symbol();
const AUDIO = Symbol();
const IMAGE = Symbol();function play(type) {switch(type) {case VIDEO:console.log("VIDEO");break;case AUDIO:console.log("AUDIO");break;case IMAGE:console.log("IMAGE");break;}
}play(VIDEO) // VIDEO

参考: 千锋 011-ES6-Symbol_哔哩哔哩_bilibili 


http://www.ppmy.cn/news/803640.html

相关文章

Zynq 多个UDP客户端组网启动问题(Auto negotiation error)PS:附UDP客户端初始化代码

最近正在进行一个Zynq项目,根据设计需求,需要将上位机作为UDP服务器,而FPGA则充当UDP客户端。同时,服务器需要能够接收和控制多个UDP客户端。 开发过程中,我是基于lwip UDP Perf Client 官方模版开发的。我遇到了以下几…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java自助旅游平台v294n

毕业设计说实话没有想象当中的那么难,导师也不会说刻意就让你毕设不通过,不让你毕业啥的,你只要不是太过于离谱的,都能通过的。首先你得要对你在大学期间所学到的哪方面比较熟悉,语言比如JAVA、PHP等这些,数…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java足球爱好者服务平台i387z

毕业设计说实话没有想象当中的那么难,导师也不会说刻意就让你毕设不通过,不让你毕业啥的,你只要不是太过于离谱的,都能通过的。首先你得要对你在大学期间所学到的哪方面比较熟悉,语言比如JAVA、PHP等这些,数…

大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

苏宁易购高鑫跑步进场,“即时零售”或成疫情后时代增长新密码

疫情后时代,市场存在的诸多不确定性因素,让许多线下实体零售企业面临无计可施的尴尬窘境。在如此情况之下,庆幸的是社区超连锁看到市场上,已经出现了从原来的积极拥抱私域,到积极拥抱直播电商,再到即时零售…

税务会计实务【10】

1.根据消费税法律制度的规定,下列情形中,应缴纳消费税的有()。 A.金银饰品店将购进的黄金首饰用于奖励员工 B.摩托车厂将自产的摩托车用于广告样品 C.筷子厂将自产的木制一次性筷子用于本厂食堂 D.化妆品公司将自产的高档化妆品用…

国内B2C 26个经典购物网站商城收集

1. 中文网上商城 当当网 http://www.dangdang.com/ 当当网是全球最大的中文网上商城,目前面向全世界网上购物人群提供近百万种商品的在线销售,包括图书、音 像、家居、化妆品、数码、饰品等数十精品门类,每天为成千上万的消费者提供安全…

高级售前客户服务专员题库

2022年最新版高级售前客户服务专员题库 作为做运营喵的你是否还在为拿不到阿里认证证书烦恼呢?小编而为你排忧解难,亲手试水的呕心整理的题库奉上, ,愿小伙伴们都能顺利拿到证书~~升职加薪,走向人生高峰! 作为优秀的高级售前,需要具备以下哪…