在 ECMAScript 2017 中，Symbol 得到了完全的支持，成为了一种新的基本数据类型。Symbol 是 ECMAScript 6 之后出现的新特性，它可以被用作对象属性的键，从而解决了对象键名冲突的问题。本文将探讨 Symbol 在前端开发中的实际应用，并分享一些使用 Symbol 的小技巧。
为什么使用 Symbol
在 JavaScript 中，对象作为一种存储和传递数据的集合是最常用的数据类型之一。但是，使用字符串作为对象属性的键名可能会导致一些问题，例如命名冲突和对象属性的误修改。由于字符串是可遍历的，因此容易被覆盖，而且很难保证键名的唯一性。Symbol 数据类型的出现，能够提供更加安全独特且不可变的属性键名。
Symbol 基本使用
Symbol 的创建是通过全局方法 Symbol() 完成的，其最基本用法如下：
const mySymbol = Symbol(); console.log(mySymbol); // Symbol() console.log(typeof mySymbol); // symbol
每个 Symbol() 调用都会返回一个全新且唯一的 Symbol 值。由于 Symbol 值是唯一的，因此可以将其用作对象属性的唯一键名。
-- -------------------- ---- ------- ----- --------- - --------- ----- --------- - --------- ----- -------- - --- ------------------- - ------- ------------------- - ------- --------------------------------- -- ------ --------------------------------- -- ------
Symbol 值可以包含一个描述字符串作为其参数。虽然该描述字符串没有其他用途，但可以提高代码的可读性。
const mySymbol = Symbol('mySymbol');
console.log(mySymbol); // Symbol(mySymbol)值得注意的是，该描述字符串只是用于调试和显示用途，它并不是 Symbol 各种名字的一部分。这意味着在创建两个相同描述字符串的 Symbol 值时，它们是不相等的。
const sym1 = Symbol('foo');
const sym2 = Symbol('foo');
console.log(sym1 === sym2); // false使用 Symbol 作为常量
在 JavaScript 中，很难定义真正的常量，因为对象属性的值是可变的。而使用 Symbol 类型的属性名称定义常量，可以实现真正意义上的常量。
const color = {
RED: Symbol('Red'),
BLUE: Symbol('Blue'),
GREEN: Symbol('Green')
};使用 Symbol 作为属性名的优点之一是，无法通过对象的属性名更改值，从而确保了属性的安全性。
color.RED = 'Red'; // this will be ignored console.log(color.RED); // Symbol(Red)
使用 Symbol 作为私有属性
ECMAScript 不提供私有属性和方法功能。虽然众所周知，将函数和变量作为对象的原型链属性（prototype）可以实现数据封装，但在该属性公开后，所有使用了该属性的构造函数的实例仍然能够访问它们。通过 Symbol，可以创建对象属性，这些属性仅由该对象本身使用，从而实现数据封装。下面是一个示例，该示例演示如何使用 Symbol 作为私有属性。
-- -------------------- ---- -------
----- ------ - ----------- -
--- ---------- - ---------------
-------- ------------ -
---------------- - -----
-
------------------------ - ---------- -
------ -----------------
--
------ -------
-----
----- ------ - --- ----------------
------------------------- -- ---------
------------------------------ -- -------可以看到，在上面的示例中，我们使用了一个名为 nameSymbol 的私有 Symbol 属性，该属性仅由 Person 函数本身和其实例使用。外部代码无法直接访问该属性。
作为函数/方法的名称
在 JavaScript 中，函数和方法通常使用字符串名称。有时，当开发大型的多人项目时，在不同的模块中有不同的方法含义容易导致混淆和错误。API 和框架的开发人员现在可以使用 Symbol 作为函数名称。
示例代码：
-- -------------------- ---- -------
----- -------- - ---------------------
----- -------- - -
------------ -
----------------- -- -- ------------
-
--
--------------------- -- ----- -- -- ----------使用 Symbol 实现迭代器
在 ECMAScript 6 中，可以通过 Symbol 的内置属性 Symbol.iterator 实现自定义迭代器。迭代器是一种对象，该对象根据设置的规则和条件，能够从任何数据类型中提取和输出数据。下面是一个示例，其中 Array 和 Set 的迭代器使用 Symbol.iterator。
-- -------------------- ---- ------- ----- ------- - --- -- -- -- --- --- ------ ----- -- -------- - ------------------- - ----- ----- - --- ------- -- -- -- ----- --- ------ ----- -- ------ - ------------------- -
Symbol 迭代器是重要的实践中实现封装和迭代器行为的一种手段。
总结
本文介绍了 Symbol 的基本用法，并分享了使用 Symbol 实现常量、私有属性、作为函数名和使用自定义迭代器的一些小技巧。虽然 Symbol 是一项相对较新的特性，但使用它可以帮助开发人员避免一些常见的对象属性名称冲突和覆盖问题。通过深入了解和掌握 Symbol 的使用，前端开发人员可以提高框架和 API 的安全性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fff24295b1f8cacde2e315