ECMAScript 2019 中你应该知道的 Symbol 与 Symbol 对象

面试官:小伙子,你的数组去重方式惊艳到我了

ECMAScript 2019 中你应该知道的 Symbol 与 Symbol 对象

在 ECMAScript 2019 中, Symbol 成为了一项新的特性,虽然 Symbol 的概念在 ES6 中就已经出现了,但它在 ES2019 中的更新彰显了其重要性。通过了解 Symbol 的使用方法以及 Symbol 对象,你可以更好地理解其在现代 JavaScript 开发中的威力。

Symbol 的定义

Symbol 是 ECMAScript 2015 引入的新的基本数据类型,它与其他基本数据类型不同,表示一个独一无二的值。Symbol 类型的定义及创建方式如下:

-------- ------
----- -------- - ---------- --------------

------------------ ---------- -- --------

Symbol 可以被用作属性键,在对象字面量中使用 Symbol 作为键名时,需要使用 [ ] 操作符。Symbol 作为属性键具有唯一性,不会与其他属性冲突。如下所示:

----- -------- - ---

----- -------- - ---------- --------------
----- ------- - --- -------

------------------ - --------

-------------------------------- -- --- ------

使用 Symbol 作为属性键时,属性名不可枚举,也就是不能被 for...in 循环获取到。如果需要获取 Symbol 属性,需要使用 Object.getOwnPropertySymbols() 方法。示例代码如下:

----- -------- - ---

----- -------- - ---------- --------------
----- ------- - --- -------

------------------ - --------

---------------------------------------------------- -- ---------- -------------

Symbol.for() 和 Symbol.keyFor()

Symbol.for() 方法和 Symbol.keyFor() 方法的功能比较相似,都是可用于对 Symbol 进行全局注册和检索。

Symbol.for() 方法可以将 Symbol 注册到全局 Symbol 注册表中,如果该 Symbol 已经在注册表中出现过,会直接返回它。示例代码如下:

----- -------- - -----------------------

-------------------- --- ------------------------ -- ----

Symbol.keyFor() 方法用于获取全局 Symbol 注册表中与 Symbol 有关的键名,如果没有找到该 Symbol,则返回 undefined。示例代码如下:

----- -------- - -----------------------

------------------------------------- -- ----------

Symbol 方法

在 Symbol 对象中,定义了一些方便操作 Symbol 的方法。

Symbol.hasInstance:该方法在检查某个对象是否是类的实例时被调用。

----- ------- -
  ------ ------------------------------ -
    ------ -------- ---------- ------
  -
-

-------------- ---------- --------- -- ----

Symbol.isConcatSpreadable:用于确定对象是否可扩展到 array 中。

--- ---- - --- -- ---
--- ---- - --- -- ---

------------------------------- -- --- -- -- -- -- --

------------------------------- - ------

------------------------------- -- --- -- -- --- -- ---

Symbol.match:用于确定一个输入字符串是否与正则表达式匹配。

----- -------- -
  ------------------- -
    ----------- - -------
  -

  --------------------- -
    ------ ------------------------
  -
-

------------------ ---------------- -------------------- -- ----

Symbol.toPrimitive:用于转换对象为基本类型值。

----- ------------ -
  ------------------ -
    ---------- - ------
  -

  -------------------------- -
    -- ----- --- --------- -
      ------ -----------
    -
    ------ -----
  -
-

----- -------- - --- -----------------

-------------------- - --- -- --

Symbol.toStringTag:用于返回对象的字符串表示。

----- ------- -
  -----------------------
    ------ --- ------
  -
-

----- -------- - --- ----------

------------------------------------------------------ -- ------- -- ------

结论

通过了解 Symbol 与 Symbol 对象,我们可以更好地理解其在现代 JavaScript 开发中的重要性。Symbol 可以用作属性键名,保证属性的唯一性,可以通过 Symbol.for() 方法实现 Symbols 的全局注册,并且 Symbol 对象还定义了一些方便操作 Symbol 的方法。希望本文可以为你提供 Symbol 的一些学习及指导意义。

参考链接:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol

https://segmentfault.com/a/1190000023046329

https://juejin.cn/post/6844904114372126733

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/66fa4e68be3b1984ab6c13dd


猜你喜欢

  • 用 Polymer 创建自定义的 Custom Elements

    随着 Web 技术不断发展,前端开发逐渐形成了一整套规范和标准。其中 Web Components 是一种新兴的技术,它可以让我们创建自定义的 HTML 标签,提供了更具模块化和封装性的组件开发方式。

    22 天前
  • Webpack 打包产生的 JS 文件过大的解决方案

    在前端开发中,Webpack 是一个非常重要的工具,它可以将多个 JS 文件打包成一个文件,减少 HTTP 请求次数,提高页面加载速度。但是,打包后的 JS 文件可能会非常大,会导致页面加载缓慢,甚至...

    22 天前
  • SSR 实践:使用 Next.js 构建 SEO 尺度的博客网站

    随着互联网的发展,越来越多的人开始使用搜索引擎来获取信息和服务。因此,SEO(搜索引擎优化)变得越来越重要。在这篇文章中,我们将介绍如何使用 Next.js 框架构建 SEO 尺度的博客网站。

    22 天前
  • webpack 中的 babel-loader 串联通开启指南

    在前端开发中,我们经常会使用到 webpack 进行模块打包和构建。而对于使用 ES6 或者更高版本的 JavaScript 进行开发的人来说,我们会使用 Babel 将代码转换为 ES5,以兼容更多...

    22 天前
  • ES6 及其 Promise 对象的异步编程方法

    ES6 是 ECMAScript 的一个重要版本,它引入了许多新特性,其中包括 Promise 对象。Promise 对象是 ES6 中处理异步编程的方法之一,它可以大大简化异步代码的编写和处理。

    22 天前
  • 在 Cypress 中集成邮件验证功能测试

    前言 邮件验证是在现代网络应用程序中常见的重要操作之一,它是验证用户电子邮件和确认用户电子邮件的过程。如果您正在测试一个需要邮件验证的 Web 应用程序,您需要确保您的测试代码可以模拟这一功能。

    22 天前
  • 在Deno中使用Google API

    介绍 Deno是一个安全的JavaScript和TypeScript运行时环境,可以用于编写Web应用程序,脚本和工具。 Google API是一组开放式API,用于创建Web,移动和桌面应用程序中的...

    22 天前
  • Angular5:用最新 Angular 打造 SPA 应用

    介绍 Angular 是一个流行的前端框架,它已经成为许多应用程序的首选框架。而在 2017 年,Angular 推出了它的第五个主要版本。Angular5 加强了性能方面的许多方面,并增加了很多新功...

    22 天前
  • 微信小程序在 qaixin 项目中调用 Chai

    在前端测试领域中,Chai 是一个非常有名的断言库,它支持多种语法风格,包括 BDD 和 TDD 等。同时,微信小程序也是近年来变得越来越流行的前端技术。 在本文中,我们将介绍如何在 qaixin 项...

    22 天前
  • Enzyme 测试 React 兄弟组件通信的最佳实践

    Enzyme 是一个用于测试 React 组件的 JavaScript 库,它提供了简单易用的 API 和强大的断言功能,用于测试应用程序的行为和状态。本文将介绍如何使用 Enzyme 对 React...

    22 天前
  • Angular 应用中 RxJS switchCase 的应用场景与实践

    前言 Angular 是一个流行的前端框架,利用它可以轻松地开发单页应用程序和移动应用程序。而且 Angular 在处理异步数据流方面十分强大,并且使用 RxJS 工具来实现这一点。

    22 天前
  • PWA 的兼容性问题分析

    随着互联网技术的不断发展,PWA(渐进式 Web 应用程序)成为一种受欢迎的移动端解决方案。它可以让 Web 应用程序呈现类似原生应用程序的体验并提供离线访问能力,但是在实践中,我们会发现PWA存在着...

    22 天前
  • Flexbox 学习笔记(一)

    引言 在前端开发中,页面布局是一个很重要的方面。传统的布局方式如浮动、定位等会带来一些问题,如不易控制元素间的间距、浮动高度问题等。而使用 Flexbox 布局则可以有效地解决这些问题,因此 Flex...

    22 天前
  • 使用 Custom Elements 构建 Web 组件开发流程

    在现代 Web 应用程序中,Web 组件已成为构建现代 Web 应用程序不可或缺的重要组成部分之一。使用 Web 组件,您可以简化代码库并使开发更加可维护和可扩展。

    22 天前
  • Vue.js 中过渡效果的实现方法及注意事项

    Vue.js 是一个流行的 JavaScript 框架,用于构建网页应用程序。Vue.js 通过指令和组件的方式提供了强大的过渡效果功能。本文将介绍 Vue.js 中过渡效果的实现方法及注意事项。

    22 天前
  • 在 Web Components 中使用 Web Workers 的方法详解

    随着现代浏览器的出现,Web Components 正在越来越受到前端开发者的关注。Web Components 可以让我们以更加模块化、高效和可重用的方式构建 web 应用程序。

    22 天前
  • Next.js 构建大规模应用程序最佳实践

    随着应用程序规模的增加,前端开发也面临越来越多的挑战。Next.js 是一个基于 React 的轻量级框架,提供了许多构建大规模应用程序的最佳实践。本文将深入探讨 Next.js 的技术特点和如何使用...

    22 天前
  • Cypress 多浏览器测试实践

    在前端开发中,多浏览器测试是一个必不可少的环节,因为不同的浏览器可能会有不同的兼容性问题。Cypress 是一个流行的前端端到端测试框架,它支持多种浏览器的测试。本文将介绍使用 Cypress 进行多...

    22 天前
  • Docker Hub: 存储与分享 Docker 镜像

    前言 在当前的软件开发中,Docker 已经成为了不可或缺的一部分。它们旨在通过创建轻量级、可重复、安全和可移植的容器来解决许多软件开发和部署的问题。而且,Docker 镜像是这一生态系统的核心组件。

    22 天前
  • 使用 Serverless 构建 Time-based Workflow

    随着云计算的发展,Serverless 技术吸引了越来越多的开发者。Serverless 架构在减少了关注底层基础架构的工作的同时,也可以帮助开发者更快速地构建复杂的应用程序和工作流程。

    22 天前

相关推荐

    暂无文章