主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript Symbol 类型


上一章 下一章

在 JavaScript 中,Symbol 是一种原始数据类型,并且是在 ECMAScript 6(ES6)中引入的。它可以使用 Symbol 构造器来创建。

符号是不可变的并且是唯一的,与其他原始数据类型如字符串或数字不同。由于它们提供了一种创建私有对象属性的方式以及避免命名冲突,因此在需要唯一标识符的情况下特别有用。以下是使用符号时应记住的几点:

  • 每个符号都包含唯一的值。
  • 符号是不可变的,这意味着你不能更新符号的值。
  • 符号用于定义独特的对象属性。
  • 符号的类型不能改变。

语法

你可以按照以下语法使用 Symbol() 函数创建一个新的符号:

const sym = Symbol([description]);

这里的 description 是一个可选参数,它指定了符号描述,可以通过 description 属性访问。

Symbol 属性

下表列出了所有符号的属性:

序号 名称 & 描述
1 description
2 asyncIterator
3 hasInstance
4 isConcatSpreadable
5 iterator
6 match
7 matchAll
8 replace
9 search
10 species
11 split
12 toStringTag

Symbol 方法

下表列出了所有符号的方法:

序号 名称 & 描述
1 for()
2 keyFor()
3 toString()
4 valueOf()

示例

示例:创建 Symbol

在下面的示例中,我们使用 Symbol() 函数创建了一个新的符号。同时,在定义 sym2 符号时,我们还传递了一个字符串参数。

你可以看到 sym1 的类型是 symbol,这是一个原始值。

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym1 = Symbol();
         document.getElementById("output").innerHTML = 
   "The sym1 is: " + sym1.toString() + "<br>" +
         "The type of sym1 is: " + typeof sym1 + "<br>";
         const sym2 = Symbol("description");
         document.getElementById("output").innerHTML += "The sym2 is: " + sym2.toString();
      
</script>
   </body>
</html>

输出: 当执行上述脚本时,它会生成包含网页上显示的文本的输出。

The sym1 is: Symbol()
The type of sym1 is: symbol
The sym2 is: Symbol(description)

示例:访问 Symbol 描述

让我们看下面的示例,我们将使用 .description 来获取符号的描述。

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym = Symbol("Welcome to Tutorials Point...");
         document.getElementById("output").innerHTML = 
   "The sym description of the symbol is : " + sym.description;
      
</script>
   </body>
</html>

输出: 执行上述脚本后,输出窗口会弹出,显示网页上的文本。

The sym description of the symbol is : Welcome to Tutorials Point...

示例:每个 Symbol 都是唯一的

在下面的示例中,我们定义了 sym1 和 sym2 两个符号。然后比较这两个变量,并相应地打印信息。

虽然这两个符号看起来相似,但实际上是不同的,这一点可以在输出中看到。

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym1 = Symbol();
         const sym2 = Symbol();
         
         if (sym1 == sym2) {
            document.getElementById("output").innerHTML += "Sym1 and Sym2 are equal.";
         } else {
            document.getElementById("output").innerHTML += "Sym1 and Sym2 are not equal.";
         }
      
</script>
   </body>
</html>

输出: 执行后,返回的文本表明两个符号不相等。

Sym1 and Sym2 are not equal.

示例:将 Symbol 用作对象键

符号的主要用途是作为对象键。在此示例中,我们使用 objId 符号作为键。

当你通过将其转换为字符串或遍历对象属性来打印对象时,它不会打印符号。因此,符号可以帮助开发人员使对象属性私有化。

<html>
   <body>
      <p id="output">The object is: </p>
      <script>
         const objId = Symbol();
         const person = {
            name: "John Doe",
            age: 30,
            [objId]: "abcd123",
         }
         document.getElementById("output").innerHTML += JSON.stringify(person);
      
</script>
   </body>
</html>

输出: 如果执行上述程序,它将生成包含网页上显示的文本的输出。

The object is: {"name":"John Doe","age":30}

使用符号的好处

以下是使用符号在实际开发中的好处:

  • 唯一的属性键 — 每个符号都是唯一的,即使它们的描述不同。因此,你可以使用符号作为键来避免具有相同名称的键之间的意外冲突。主要在你需要在同一对象的不同代码片段中使用相同的实例并且需要插入相同的属性时有用。
  • 非可迭代属性 — 当你在 JavaScript 中将符号添加为键并通过 for...in 循环遍历对象属性时,循环不会遍历符号键。
  • 私有成员 — 可以使用符号在 JavaScript 类中定义私有属性。
  • 避免覆盖 — 由于符号是唯一的,因此它可以避免覆盖类似的属性。
上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图