Symbol 数据类型：创建独一无二的属性键 - 智猿学院-IT界的百科全书

Symbol：JavaScript 里的小秘密，大用途

JavaScript 这门语言，就像个百宝箱，时不时能翻出点让人眼前一亮的小玩意儿。今天咱们要聊的 Symbol，就是其中一个。它诞生于 ES6，乍一看有点神秘，但用对了地方，绝对能让你的代码更优雅、更安全、更有趣。

Symbol 是什么？简单来说，它是一种创建唯一标识符的数据类型。

你可能会想：“唯一标识符？听起来好像 UUID，或者数据库里的主键。” 没错，它们的目的都是为了保证唯一性。但 Symbol 的特别之处在于，它的唯一性并非来自某种算法或规则，而是 与生俱来 的。每一个通过 Symbol() 创建的 Symbol 值，都绝对不会和其他任何 Symbol 值相等。

这就像每个人都有自己的指纹，即使是双胞胎，指纹也存在细微的差异。Symbol 就像 JavaScript 世界里的指纹，保证了属性键的独一无二。

为什么我们需要 Symbol？

在 JavaScript 中，对象本质上是一个键值对的集合。键通常是字符串，用来标识对象的属性。但问题也随之而来：当多个开发者共同维护一个对象时，很容易出现属性名冲突的情况。

想象一下，你正在开发一个大型电商网站。你负责购物车模块，为了方便管理购物车商品，你在每个商品对象上添加了一个 cartId 属性，用于记录商品在购物车中的唯一标识。

const product = {
  name: '超级无敌好吃的薯片',
  price: 15,
  cartId: '12345' // 购物车模块添加的属性
};

与此同时，你的同事小明负责商品推荐模块。为了追踪用户对商品的喜好，他也在每个商品对象上添加了一个 productId 属性，用于记录商品在推荐系统中的唯一标识。

const product = {
  name: '超级无敌好吃的薯片',
  price: 15,
  productId: 'abcde' // 推荐模块添加的属性
};

有一天，你们的代码合并了。突然，网站崩溃了！经过一番排查，你们发现问题出在 cartId 和 productId 这两个属性上。因为这两个属性名都是字符串，所以很容易出现命名冲突。在某些情况下，productId 可能会覆盖 cartId，导致购物车功能出错。

这就是属性名冲突带来的麻烦。而 Symbol 的出现，就是为了解决这个问题。

Symbol 如何解决属性名冲突？

使用 Symbol 作为属性键，可以保证属性的唯一性，避免命名冲突。让我们用 Symbol 重写上面的代码：

const cartId = Symbol('cartId'); // 创建一个名为 cartId 的 Symbol
const productId = Symbol('productId'); // 创建一个名为 productId 的 Symbol

const product = {
  name: '超级无敌好吃的薯片',
  price: 15,
  [cartId]: '12345', // 使用 Symbol 作为属性键
  [productId]: 'abcde' // 使用 Symbol 作为属性键
};

console.log(product[cartId]); // 输出：12345
console.log(product[productId]); // 输出：abcde

在这个例子中，我们使用 Symbol('cartId') 和 Symbol('productId') 创建了两个 Symbol 值，并将它们作为 product 对象的属性键。由于每个 Symbol 值都是唯一的，所以即使它们的描述（’cartId’ 和 ‘productId’）相同，它们也代表着不同的属性。这样，即使购物车模块和推荐模块都想在商品对象上添加属性，也不会出现命名冲突的情况。

Symbol 的应用场景

除了避免属性名冲突，Symbol 还有许多其他的应用场景：

隐藏对象属性：

Symbol 可以用来创建私有属性，防止外部代码直接访问或修改对象的内部状态。
```
class Counter {
  constructor() {
    this[Symbol('count')] = 0; // 使用 Symbol 创建私有属性
  }

  increment() {
    this[Symbol('count')]++;
  }

  getCount() {
    return this[Symbol('count')];
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出：1
console.log(counter[Symbol('count')]); // 输出：undefined，无法直接访问私有属性
```
在这个例子中，我们使用 Symbol('count') 创建了一个私有属性 count。虽然我们可以通过 getCount() 方法访问 count 的值，但无法直接通过 counter[Symbol('count')] 访问它。这可以有效地保护对象的内部状态，防止外部代码意外修改。

注意： 严格来说，Symbol 属性并不是真正的私有属性。因为我们可以通过 Object.getOwnPropertySymbols() 方法获取对象的所有 Symbol 属性。但是，这种方式需要一定的技巧，而且通常情况下，开发者不会刻意去访问对象的 Symbol 属性。因此，使用 Symbol 创建的属性可以被认为是“约定上的私有属性”。
定义类的常量：

Symbol 可以用来定义类的常量，保证常量的唯一性和不可变性。
```
class Color {
  static get RED() { return Symbol('RED'); }
  static get GREEN() { return Symbol('GREEN'); }
  static get BLUE() { return Symbol('BLUE'); }
}

console.log(Color.RED === Color.RED); // 输出：true
console.log(Color.RED === Color.GREEN); // 输出：false
```
在这个例子中，我们使用 Symbol 定义了 Color 类的三个常量：RED、GREEN 和 BLUE。由于每个 Symbol 值都是唯一的，所以可以保证这些常量的唯一性。而且，由于 Symbol 值是不可变的，所以可以保证这些常量的不可变性。
作为元编程的钩子：

JavaScript 提供了一些内置的 Symbol 值，可以用来定制对象的行为。例如，Symbol.iterator 可以用来定义对象的迭代器，Symbol.toStringTag 可以用来修改对象的 toString() 方法的返回值。
```
// 定义一个可迭代对象
const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
  console.log(value); // 输出：1, 2, 3
}

// 修改对象的 toString() 方法的返回值
const myObject = {
};

console.log(myObject.toString()); // 输出：[object MyObject]
```
这些内置的 Symbol 值就像一个个钩子，允许我们深入 JavaScript 的底层，定制对象的行为。

Symbol 的局限性

虽然 Symbol 有很多优点，但它也有一些局限性：

Symbol 属性不可枚举：

默认情况下，Symbol 属性是不可枚举的。这意味着它们不会出现在 for...in 循环或 Object.keys() 方法的结果中。
```
const myObject = {
  name: '张三',
};

for (const key in myObject) {
  console.log(key); // 输出：name，Symbol 属性不会被枚举
}

console.log(Object.keys(myObject)); // 输出：['name']，Symbol 属性不会被枚举
```
如果你想获取对象的所有 Symbol 属性，可以使用 Object.getOwnPropertySymbols() 方法。
Symbol 值无法被序列化为 JSON：

Symbol 值不能被序列化为 JSON 字符串。这意味着你无法将包含 Symbol 属性的对象保存到本地存储或发送到服务器。
```
const myObject = {
  name: '张三',
};

console.log(JSON.stringify(myObject)); // 输出：{"name":"张三"}，Symbol 属性会被忽略
```
如果你需要将包含 Symbol 属性的对象序列化，你需要手动处理 Symbol 属性。

总结

Symbol 是一种创建唯一标识符的数据类型，可以用来避免属性名冲突、隐藏对象属性、定义类的常量、作为元编程的钩子。虽然它有一些局限性，但用对了地方，绝对能让你的代码更优雅、更安全、更有趣。

希望这篇文章能让你对 Symbol 有更深入的了解。下次在写 JavaScript 代码的时候，不妨尝试一下 Symbol，也许你会发现它的魅力所在。记住，编程就像探险，勇于尝试，才能发现更多的宝藏！

Symbol：JavaScript 里的小秘密，大用途

发表回复 取消回复

发表回复取消回复