概念: 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只能使用规定常量文章来源:https://www.toymoban.com/news/detail-557299.html
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 文章来源地址https://www.toymoban.com/news/detail-557299.html
到了这里,关于ES6: Symbol概念与用法举例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!