ES6 新特性:Symbol 概述

ECMAScript 6(ES6)引入了一种新的原始数据类型:Symbol。Symbol 是一种唯一且不可变的数据类型,主要用于作为对象属性的标识符。这篇文章将为你提供一个关于 Symbol 的概述,包括它的创建、应用和一些特殊的内置 Symbol。

创建 Symbol

Symbol 通过调用 Symbol() 函数创建,每个 Symbol 值都是独一无二的。

javascript 复制代码
let symbol1 = Symbol();
let symbol2 = Symbol('description');
let symbol3 = Symbol('description');

console.log(symbol1 === symbol2); // 输出: false
console.log(symbol2 === symbol3); // 输出: false

即使两个 Symbol 有相同的描述,它们也是不同的。

使用 Symbol

Symbol 最常见的用途是作为对象属性的键。

作为属性键

javascript 复制代码
let mySymbol = Symbol();
let obj = {
    [mySymbol]: "value"
};

console.log(obj[mySymbol]); // 输出: "value"

使用 Symbol.for() 和 Symbol.keyFor()

Symbol.for() 方法接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则创建并返回一个新的 Symbol 值。

javascript 复制代码
let sym1 = Symbol.for("key");
let sym2 = Symbol.for("key");

console.log(sym1 === sym2); // 输出: true

Symbol.keyFor() 方法返回一个已登记的 Symbol 类型值的 key。

javascript 复制代码
let sym = Symbol.for("key");
console.log(Symbol.keyFor(sym)); // 输出: "key"

内置的 Symbol

ES6 提供了一些内置的 Symbol 值,它们代表了语言内部的一些方法。

常见的内置 Symbol

  • Symbol.iterator:对象实现该属性后,对象可被 for...of 循环遍历。
  • Symbol.match:指定了匹配的是正则表达式的方法。
  • Symbol.toPrimitive:指定对象转换为原始类型值的方法。
  • Symbol.toStringTag:在对象上调用 Object.prototype.toString 方法时,会出现在返回的字符串中。

注意事项

  • Symbol 不是构造函数,所以不能使用 new
  • Symbol 可以转换为字符串和布尔类型,但不能转换为数值。
  • 使用 Symbol 作为对象属性时,这个属性将不会出现在传统的遍历中,如 for...in 循环或 Object.keys() 方法。

ES6 中的 Symbol 提供了一种独特的方式来创建对象的私有成员,同时也被用于扩展对象的功能,而不影响现有的代码结构。了解和使用 Symbol 可以帮助你更好地利用 JavaScript 语言的特性。

相关推荐
GDAL2 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
芜青2 小时前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
麦麦大数据3 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法
BillKu7 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
给月亮点灯|13 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手14 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
wow_DG14 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...15 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See15 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
叫我詹躲躲16 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js