ES6 中的 Symbol 详解及在实战中的应用

什么是 Symbol

在 ES6 中，Symbol 是新增的原始数据类型之一，它类似于字符串，但是它是独一无二的标识符，可以用于对象属性名、私有成员、迭代器等多种场景，避免了属性名冲突的问题。使用 Symbol 声明的变量表示一个独特的标识符。

Symbol 的创建方式

Symbol 可以使用 Symbol() 函数来创建，该函数可以接收一个可选的参数，用于表示 Symbol 的描述信息。

const sym1 = Symbol();
const sym2 = Symbol('sym2');

Symbol 的应用

1. 用于对象属性名

Symbol 可以用于表示对象属性名，避免了属性名冲突的问题。在 ES6 中，对象属性名可以是字符串或 Symbol 类型。

const obj = {
  [Symbol('name')]: 'Tom',
  age: 18
}

console.log(obj); // { age: 18, Symbol(name): 'Tom' }

2. 用于私有成员

在 ES6 中，没有内置的私有成员机制，但是通过使用 Symbol，可以实现类似的功能，将属性名作为私有成员，避免了外部访问。

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

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

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

3. 用于迭代器

Symbol 还可以用于迭代器，在 for...of 循环中，迭代器会自动调用对象的 Symbol.iterator 方法，获取迭代器对象，然后使用 next() 方法迭代元素。

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

for (let item of iterator) {
  console.log(item); // 1, 2, 3
}

Symbol 的注意事项

1. Symbol 不能使用 new 操作符

使用 new Symbol() 会报错，因为 Symbol 是原始数据类型，不是对象。

2. 同一描述信息的 Symbol 不等于另一个 Symbol

两个值描述信息相同的 Symbol 变量不全等（===）。

const sym1 = Symbol('test');
const sym2 = Symbol('test');

console.log(sym1 === sym2); // false

3. Symbol 无法通过 for...in 循环遍历

Symbol 是一种新的属性类型，无法通过 for...in 循环遍历对象中的 Symbol 属性，只能通过 Object.getOwnPropertySymbols() 方法获取对象中的 Symbol 属性。

const obj = {
  [Symbol('name')]: 'Tom',
  age: 18
};

console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name)]

总结

本文介绍了 ES6 中新增的原始数据类型 Symbol，以及在对象属性名、私有成员、迭代器等场景中的应用。同时也提到了 Symbol 的注意事项，希望读者能够掌握 Symbol 的基本使用和常见场景，提高实际开发中的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6596376eeb4cecbf2da14de3