JavaScript的Symbol是什么？
原创JavaScript的Symbol是什么？
原创
Learn-anything.cn
发布于 2021-12-20 16:03:46
发布于 2021-12-20 16:03:46
文章被收录于专栏：learn-anything.cn
一、Symbol 是什么？
Symbol 是 ECMAScript 2015 中新添加的特性，生成一个唯一标识符，可用于属性名称、也可用于属性值。目的是消除属性名称冲突。
二、怎么用？
1、新建 symbol
用 Symbol() 函数来创建 symbol，可用字符串作为其参数，但只能用于调试。
// 1、创建新 symbol
let sym1 = Symbol()
let sym2 = Symbol('foo')
// 2、每次调用都创建新的 symbol
Symbol('foo') === Symbol('foo') // false
// 3、不可以用 new 创建
let sym = new Symbol() // TypeError
// 4、需调用 toString() 才能转为 字符串
let Sym = Symbol("Sym")
alert(Sym) // TypeError: Cannot convert a Symbol value to a string
alert(Sym.toString()) // Symbol(Sym), now it works2、用于属性名称
symbol 用于对象的属性名称，保证其属性名的唯一性。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>Symbol</title>
<script>
const MY_KEY = Symbol();
let obj = {};
obj[MY_KEY] = 123;
console.log(obj[MY_KEY]); // 123
let obj2 = {
[MY_KEY]: 123
};
console.log(obj2[MY_KEY]); // 123
let obj3 = {
[MY_KEY]() {
return 'bar';
}
};
console.log(obj3[MY_KEY]()); // bar
</script>
</head>
<body>
<h1>Symbol : 打开 Console 看结果！</h1>
</body>
</html>3、用于定义常量
用 symbol 替换 无意义的字符串。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>Symbol</title>
<script>
// log.levels = {
// DEBUG: 'debug',
// INFO: 'info',
// WARN: 'warn',
// };
// 用下面代码替换上面。
log.levels = {
DEBUG: Symbol('debug'),
INFO: Symbol('info'),
WARN: Symbol('warn'),
};
function log(type, message) {
switch (type) {
case log.levels.DEBUG:
console.log(message);
break;
case log.levels.INFO:
console.log(message);
break;
case log.levels.WARN:
console.log(message);
break;
default:
console.log("default");
break;
}
}
log(log.levels.DEBUG, 'debug message');
log(log.levels.INFO, 'info message');
</script>
</head>
<body>
<h1>Symbol : 打开 Console 看结果！</h1>
</body>
</html>4、Symbol.iterator
ECMAScript 6 中用 Symbol.iterator 作为迭代功能的函数名。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>Symbol</title>
<script>
let obj = {
data: ['hello', 'world'],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++]
};
} else {
return { done: true };
}
}
};
}
};
for (let x of obj) {
console.log(x);
}
</script>
</head>
<body>
<h1>Symbol : 打开 Console 看结果！</h1>
</body>
</html>三、其他
1、获取属性名称
获取属性名称的方式，包括 symbol属性名称。
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>Symbol</title>
<script>
const MY_KEY = Symbol();
let obj2 = {
[MY_KEY]: 123,
enum: 2,
nonEnum: 3
};
// 获取属性名称的几种方法
console.log(Object.getOwnPropertyNames(obj2)); // ['enum', 'nonEnum']
console.log(Object.getOwnPropertySymbols(obj2)); // [Symbol()]
console.log(Reflect.ownKeys(obj2)); // ['enum', 'nonEnum', Symbol()]
</script>
</head>
<body>
<h1>Symbol : 打开 Console 看结果！</h1>
</body>
</html>四、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
