ES6 的 Symbol 类型及其应用

阅读时长 5 分钟读完

介绍

ES6 引入了 Symbol 类型,它是一种新的原始数据类型,用于表示独一无二的值。每个 Symbol 值都是唯一的,不可变的,且可以用作对象属性的键。

Symbol 类型的引入,为 JavaScript 中的对象属性提供了更多的选择,使得开发者可以更加灵活地操作对象属性。

创建 Symbol

创建一个 Symbol 值,可以使用全局函数 Symbol()。

Symbol 函数可以接受一个字符串参数,用于描述该 Symbol 值。

Symbol 作为对象属性键

使用 Symbol 作为对象属性键,可以避免属性名的冲突。下面是一个示例:

在上面的示例中,我们使用了一个描述为 'mySymbol' 的 Symbol 值作为对象的属性键。这个属性是不可枚举的,不会被 for...in 循环遍历到,也不会被 Object.keys() 和 JSON.stringify() 输出。

Symbol 作为常量

Symbol 也可以用作常量,用于定义一些唯一的标识符。下面是一个示例:

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

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

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

在上面的示例中,我们使用了三个不同的 Symbol 值作为常量,用于表示三种不同的颜色。在 getComplement 函数中,我们使用了 switch 语句来实现颜色的循环替换。

内置 Symbol 值

ES6 中内置了一些 Symbol 值,用于表示对象的默认行为。下面是一些常用的内置 Symbol 值:

Symbol.iterator

用于定义对象的默认迭代器。

在上面的示例中,我们使用了数组的内置 Symbol.iterator 值,创建了一个迭代器对象 iterator。每次调用 iterator.next() 方法,都会返回数组中的下一个元素。

Symbol.toPrimitive

用于定义对象的默认转换规则。

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

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

在上面的示例中,我们使用了对象的内置 Symbol.toPrimitive 值,定义了对象的默认转换规则。当对象需要转换为数字时,返回 123;当对象需要转换为字符串时,返回 'Hello, World!';否则返回 true。

Symbol.hasInstance

用于定义对象的 instanceof 运算符行为。

在上面的示例中,我们使用了类的内置 Symbol.hasInstance 值,定义了 instanceof 运算符的行为。当左侧的对象是一个数组时,返回 true;否则返回 false。

总结

Symbol 是 ES6 中引入的一种新的原始数据类型,用于表示独一无二的值。它可以用作对象属性的键,避免属性名的冲突;也可以用作常量,定义一些唯一的标识符。此外,ES6 中还内置了一些 Symbol 值,用于表示对象的默认行为。使用 Symbol,可以让我们更加灵活地操作对象属性,编写更加优雅的代码。

参考链接

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/650faee795b1f8cacd85c4cb

纠错
反馈