ES12 中的标准库 —— 深入探究 Symbol 类型-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Symbol 类型是比较有特色的一种数据类型，它被添加到 ECMAScript 6 中，用于创建独一无二的值。ES12 中新增了一些 Symbol 的方法，让我们更加深入的了解 Symbol 类型的使用。

什么是 Symbol 类型

Symbol 类型是 ECMAScript 6 中新增的一种原始数据类型，表示独一无二的值。Symbol 的作用与字符串和数字等原始数据类型不同，它不会自动转换为其他类型的值。

Symbol 的声明很简单：使用全局方法 Symbol() 即可创建一个独一无二的 Symbol 值。每个 Symbol 值都是唯一且不可变的，因此可以作为对象属性的标识符，防止属性名冲突或覆盖。

例如，我们可以使用 Symbol 来声明一个对象的属性：

const prop1 = Symbol();
const obj = {
  [prop1]: 'Hello, World!'
};
console.log(obj[prop1]); // 输出 'Hello, World!'

Symbol 的方法

ES12 中新增的 Symbol 方法可以帮助我们更好地使用 Symbol，下面我们重点介绍以下几个方法：

Symbol.iterator

Symbol.iterator 是一个内置 Symbol 常量，代表一个对象的默认迭代器。当某个对象需要被迭代时，可以将其部署为一个可迭代对象（Iterable），并定义该对象的默认迭代器。

举个例子，假设我们有一个数据结构，它是一个数组类的对象：

const arrObj = {
  length: 2,
  0: 'foo',
  1: 'bar'
};

为了能够使用 for...of 循环进行迭代，我们可以使用 Symbol.iterator 方法实现：

arrObj[Symbol.iterator] = function() {
  let index = 0;
  const self = this;
  return {
    next: function() {
      if (index < self.length) {
        return { value: self[index++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
};

这样，我们就可以通过 for...of 循环迭代 arrObj：

for (const item of arrObj) {
  console.log(item);
}
// 输出 'foo' 和 'bar'

Symbol.toPrimitive

Symbol.toPrimitive 是一个内置 Symbol 常量，表示一个对象被转换为原始值时所调用的方法。

举个例子，假设我们有一个对象：

const obj = {
  valueOf() {
    return 42;
  }
};

如果使用 + 运算符将其转换为原始值，则会调用对象的 valueOf 方法：

console.log(obj + 1); // 输出 43

我们也可以通过 Symbol.toPrimitive 方法来自定义对象的转换方法：

const obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return 42;
    }
    if (hint === 'string') {
      return 'forty-two';
    }
    return true;
  }
};

console.log(obj + 1); // 输出 43
console.log(String(obj)); // 输出 'forty-two'
console.log(Boolean(obj)); // 输出 true

Symbol.asyncIterator

Symbol.asyncIterator 是一个内置 Symbol 常量，代表一个对象的异步迭代器。当某个对象需要被异步迭代时，可以将其部署为一个可异步迭代对象（AsyncIterable），并定义该对象的异步迭代器。

举个例子，假设我们有一个生成 Promise 的异步函数：

async function asyncFn() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 'foo';
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 'bar';
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 'baz';
}

为了能够使用 for await...of 循环进行异步迭代，我们可以使用 Symbol.asyncIterator 方法实现：

const obj = {
  [Symbol.asyncIterator]: asyncFn
};

(async () => {
  for await (const item of obj) {
    console.log(item);
  }
  // 输出 'foo'、'bar' 和 'baz'，每个值之间间隔 1 秒
})();

总结

Symbol 类型是 ECMAScript 6 中新增的一种原始数据类型，用于创建独一无二的值。ES12 中新增的一些 Symbol 方法可以帮助我们更好地使用 Symbol，其中 Symbol.iterator 用于定义对象的默认迭代器，Symbol.toPrimitive 用于定义对象的转换方法，Symbol.asyncIterator 用于定义对象的异步迭代器。在实际开发中，灵活运用 Symbol 类型可以帮助我们提高代码质量和可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65af4a46add4f0e0ff8b3285