ES6 中的 Symbol 详解及在实战中的应用-JavaScript中文网-JavaScript教程资源分享门户

什么是 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，可以实现类似的功能，将属性名作为私有成员，避免了外部访问。

const _age = Symbol('age');
class Person {
  constructor(name, age) {
    this.name = name;
    this[_age] = age;
  }

  getAge() {
    return this[_age];
  }
}

const p = new Person('Tom', 18);
console.log(p.getAge()); // 18
console.log(p.age); // undefined

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

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