ES6行动：符号及其用途

ES2015 引入了一些长期以来开发者期待的语言特性，但也有一些鲜为人知的功能，其优势并不明显，例如 Symbol。

Symbol 是一种新的原始数据类型，是一个独特的标记，保证不会与其他 Symbol 冲突。从这个意义上说，您可以将 Symbol 视为一种 UUID（通用唯一标识符）。让我们看看 Symbol 的工作原理以及我们可以用它做什么。

要点

• ES6 引入了一种新的原始数据类型 Symbol，它是一个独特的标记，永远不会与其他 Symbol 冲突，使其成为字符串或整数作为类/模块常量的良好替代品。
• Symbol 可用作对象属性键，提供不会与现有属性或方法冲突的唯一键，并且在对象序列化时不会包含这些键。
• 公共 Symbol 是 Symbol 函数的预定义属性，用于自定义某些语言特性的行为（例如迭代器）以及实现新功能。
• ES6 包含一个全局 Symbol 注册表，允许在不同的执行上下文（例如文档和嵌入式 iframe 或 Service Worker 之间）存储和检索 Symbol。

创建新的 Symbol

创建新的 Symbol 非常简单，只需调用 Symbol 函数即可。请注意，这只是一个标准函数，而不是对象构造函数。尝试使用 new 运算符调用它会导致 TypeError。每次调用 Symbol 函数时，您都会获得一个新的且完全唯一的值。

const foo = Symbol();
const bar = Symbol();

foo === bar // false

也可以通过将字符串作为第一个参数传递来创建带标签的 Symbol。标签不会影响 Symbol 的值，但对于调试很有用，如果调用 Symbol 的 toString() 方法，则会显示该标签。可以使用相同的标签创建多个 Symbol，但这没有任何优势，这可能会导致混淆。

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

Symbol 的用途

Symbol 可以很好地替代字符串或整数作为类/模块常量：

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

字符串和整数不是唯一的值；例如，数字 2 或字符串“development”也可能在程序的其他地方用于不同的目的。使用 Symbol 可以让我们对提供的值更有信心。

Symbol 的另一个有趣的用途是作为对象属性键。如果您曾经将 JavaScript 对象用作哈希映射（用 PHP 术语来说是关联数组，用 Python 术语来说是字典），那么您将熟悉使用方括号表示法获取/设置属性：

const foo = Symbol();
const bar = Symbol();

foo === bar // false

使用方括号表示法，我们也可以使用 Symbol 作为属性键。这样做有几个优点。首先，您可以确定基于 Symbol 的键永远不会冲突，不像字符串键那样可能与对象现有属性或方法的键冲突。其次，它们不会在 for...in 循环中枚举，并且会被 Object.keys()、Object.getOwnPropertyNames() 和 JSON.stringify() 等函数忽略。这使得它们非常适合您不希望在序列化对象时包含的属性。

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

但是，值得注意的是，使用 Symbol 作为键并不能保证隐私。提供了一些新工具来允许您访问基于 Symbol 的属性键。Object.getOwnPropertySymbols() 返回任何基于 Symbol 的键的数组，而 Reflect.ownKeys() 将返回所有键的数组，包括 Symbol。

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

公共 Symbol

由于 Symbol 键属性对于 ES6 之前的代码实际上是不可见的，因此它们非常适合在不破坏向后兼容性的情况下向 JavaScript 的现有类型添加新功能。所谓的“公共”Symbol 是 Symbol 函数的预定义属性，用于自定义某些语言特性的行为，并用于实现诸如迭代器之类的新的功能。

Symbol.iterator 是一个公共 Symbol，用于向对象分配一个特殊方法，允许对其进行迭代：

const data = [];

data['name'] = 'Ted Mosby';
data['nickname'] = 'Teddy Westside';
data['city'] = 'New York';

内置类型 String、Array、TypedArray、Map 和 Set 都有一个默认的 Symbol.iterator 方法，当在 for...of 循环中或使用扩展运算符时使用这些类型的实例时，会调用该方法。浏览器也开始使用 Symbol.iterator 键来允许以相同的方式迭代 DOM 结构（例如 NodeList 和 HTMLCollection）。

全局注册表

规范还定义了一个运行时范围的 Symbol 注册表，这意味着您可以在不同的执行上下文（例如文档和嵌入式 iframe 或 Service Worker 之间）存储和检索 Symbol。

Symbol.for(key) 从注册表中检索给定键的 Symbol。如果键不存在 Symbol，则返回一个新的 Symbol。正如您可能预期的那样，对相同键的后续调用将返回相同的 Symbol。

Symbol.keyFor(symbol) 允许您检索给定 Symbol 的键。使用注册表中不存在的 Symbol 调用该方法将返回 undefined：

const user = {};
const email = Symbol();

user.name = 'Fred';
user.age = 30;
user[email] = 'fred@example.com';

Object.keys(user); // ['name', 'age']
Object.getOwnPropertyNames(user); // ['name', 'age']
JSON.stringify(user); // {"name":"Fred","age":30}

用例

在一些用例中，使用 Symbol 可以提供优势。前面文章中已经提到过的一个用例是，当您想要向对象添加不会在对象序列化时包含的“隐藏”属性时。

库作者还可以使用 Symbol 安全地为客户端对象添加属性或方法，而无需担心覆盖现有键（或其键被其他代码覆盖）。例如，小部件组件（例如日期选择器）通常使用各种选项和需要存储在某处状态进行初始化。将小部件实例分配给 DOM 元素对象的属性并不是理想的，因为该属性可能会与另一个键冲突。使用基于 Symbol 的键可以巧妙地规避此问题，并确保不会覆盖您的 Widget 实例。有关此想法的更详细探讨，请参阅 Mozilla Hacks 博客文章 ES6 in Depth: Symbols。

浏览器支持

如果您想试验 Symbol，主流浏览器的支持相当好。如您所见，Chrome、Firefox、Microsoft Edge 和 Opera 的当前版本都原生支持 Symbol 类型，移动设备上的 Android 5.1 和 iOS 9 也支持。如果您需要支持旧版浏览器，也可以使用 polyfill。

结论

虽然引入 Symbol 的主要原因似乎是为了方便在不破坏现有代码的情况下向语言添加新功能，但它们确实有一些有趣的用途。所有开发人员至少都应该对它们有基本的了解，并且熟悉最常用的公共 Symbol 及其用途。

关于 ES6 Symbol 的常见问题解答

ES6 Symbol 的实际用途是什么？

ES6 Symbol 是 ES6（ECMAScript 6）中引入的一种新的原始数据类型。它们是唯一且不可变的数据类型，可用作对象属性的标识符。它们可用于为对象创建私有属性，实现元级编程概念以及避免命名冲突。它们还可用于为对象定义自定义迭代行为。

如何在 JavaScript 中创建新的 Symbol？

您可以使用 Symbol() 函数创建新的 Symbol。此函数每次调用时都会返回一个唯一的 Symbol，即使您向其传递相同的参数也是如此。例如，let symbol1 = Symbol('symbol'); let symbol2 = Symbol('symbol'); 此处，symbol1 和 symbol2 是不同的 Symbol，即使向 Symbol() 函数传递了相同的参数“symbol”。

如何使用 Symbol 作为对象键？

您可以使用方括号中的 Symbol 作为对象键。例如，let symbol = Symbol('key'); let obj = {}; obj[symbol] = 'value'; 此处，Symbol“symbol”用作对象“obj”中的键。

JavaScript 中的全局 Symbol 注册表是什么？

全局 Symbol 注册表是一个共享环境，您可以在其中创建、访问和共享跨不同领域（如 iframe 或 Service Worker）的 Symbol。您可以使用 Symbol.for(key) 在全局注册表中创建 Symbol，并使用 Symbol.keyFor(symbol) 访问它。

如何将 Symbol 与对象一起使用？

您可以将 Symbol 与对象一起使用以创建唯一键。这对于避免命名冲突很有用，因为 Symbol 始终是唯一的。例如，let symbol = Symbol('key'); let obj = { [symbol]: 'value' }; 此处，Symbol“symbol”用作对象“obj”中的键。

可以将 Symbol 转换为字符串吗？

是的，您可以通过在其上调用 toString() 方法将 Symbol 转换为字符串。这将返回格式为“Symbol(description)”的字符串，其中“description”是您传递给 Symbol() 函数的可选描述。

可以将 Symbol 与数组一起使用吗？

是的，您可以将 Symbol 与数组一起使用。例如，您可以使用 Symbol 作为唯一属性键来存储有关数组的元数据。但是，Symbol 不包含在数组的 length 属性中，并且大多数数组方法都不会返回它们。

可以将 Symbol 与函数一起使用吗？

是的，您可以将 Symbol 与函数一起使用。例如，您可以使用 Symbol 作为唯一属性键来存储有关函数的元数据。但是，Symbol 不包含在函数的 length 属性中，并且大多数函数方法都不会返回它们。

可以将 Symbol 与类一起使用吗？

是的，您可以将 Symbol 与类一起使用。例如，您可以使用 Symbol 作为唯一属性键来存储有关类的元数据。但是，Symbol 不包含在类的 length 属性中，并且大多数类方法都不会返回它们。

可以将 Symbol 与字符串一起使用吗？

是的，您可以将 Symbol 与字符串一起使用。例如，您可以使用 Symbol 作为唯一属性键来存储有关字符串的元数据。但是，Symbol 不包含在字符串的 length 属性中，并且大多数字符串方法都不会返回它们。

以上是ES6行动：符号及其用途的详细内容。更多信息请关注PHP中文网其他相关文章！