探索JavaScript的秘密令牌：独一无二的`Symbol`数据类型

一叶一天地

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

引言

在JavaScript的广阔世界中，数据类型构成了其最基础的语法元素。随着ES6的发布，这个大家庭迎来了两位新成员：BigInt和Symbol。如果说BigInt是为了解决大数运算的精度问题，那么Symbol的诞生，则像是一把为对象属性开启“隐私空间”和“唯一命名”的神奇钥匙。本文将带你深入理解这个“独一无二”的简单数据类型。

一、认识Symbol：一种新的简单数据类型

JavaScript的八种数据类型，是每一位开发者的基本功，常被戏称为“七上八下”：

• 简单数据类型 (7种) ：

  • 传统：number、boolean、string、null、undefined
  • ES6新增：bigint、symbol

• 复杂数据类型 (1种) ：object

Symbol虽然用起来有点像构造函数（Symbol()），但它本质上是简单数据类型。你可以通过typeof操作符来验证这一点。

// 1.js
const id1 = Symbol();
console.log(typeof id1); // 输出：symbol

二、Symbol的核心特性：绝对的独一无二

Symbol最核心、最迷人的特性，就是它的“独一无二性”。每次调用Symbol()函数，都会返回一个全新的、与其他任何Symbol都不同的值，即使它们拥有相同的描述（label）。

// 1.js
const id1 = Symbol();
const id2 = Symbol();
console.log(id1 === id2); // 输出：false

// 2.js
const s1 = Symbol('二哈');
const s2 = Symbol('二哈');
console.log(s1 === s2); // 输出：false

你可以为Symbol传入一个可选的字符串参数作为描述（label） ，例如Symbol('descrption')。这个描述仅仅是为了调试时方便识别，它不会影响Symbol的唯一性。两个描述相同的Symbol，依然是两个完全不同的值。这就像给两把不同的锁都贴上了“书房”的标签，但锁的齿纹（值）完全不同。

三、Symbol的核心应用：作为对象属性的唯一键

Symbol最主要、最实用的场景，就是作为对象的属性键（key） 。在ES6之前，对象的键只能是字符串，这在一个复杂、多人协作的代码库中极易引发命名冲突。

JavaScript是动态语言，任何人都可以轻松修改对象的属性。当项目代码庞大时，你可能会无意中覆盖掉他人定义的重要属性，或者自己的属性被他人覆盖，造成难以排查的Bug。

Symbol的引入，就是为了解决这个问题。用Symbol作为属性名，可以创造出绝对安全的、不会与任何字符串属性或其他Symbol属性冲突的私有属性。

1. 如何定义Symbol属性？

你需要使用计算属性名的语法，在[]中写入Symbol变量。

// 2.js
const secretKey = Symbol('secret'); // 创建一个Symbol
console.log(secretKey, '//////'); // Symbol(secret) //////

const a = 'ecut';
const user = {
    [secretKey]: '111222', // 使用Symbol作为键
    email: '123456@qq.com',
    name: '张三',
    'a': '456', // 字符串'a'作为键
    [a]: '123'  // 使用变量a的值`'ecut'`作为键，相当于 `ecut: '123'`
};
console.log(user.ecut, user[a]); // 输出：123 123

2. Symbol属性的独特优势

• 命名安全：secretKey这个属性是独一无二的，全局任何地方都无法用[Symbol('secret')]以外的其他Symbol访问到它，也无法用字符串'secretKey'来访问，这避免了属性被意外覆盖。
• 标签不影响唯一性：即使两个Symbol描述相同，它们作为键也是互不冲突的。

// 3.html
const classRoom = {
    [Symbol('Mark')]: {grade: 50, gender: 'male'},
    [Symbol('oliva')]: {grade: 80, gender: 'female'},
    // 即使标签（描述）和上面一样，这也是一个新的、独立的属性
    [Symbol('oliva')]: {grade: 85, gender: 'female'}, 
    "dl": ["张三","李四"]
};

上述代码中，第二个[Symbol('oliva')]并没有覆盖第一个，而是创建了一个全新的属性，完美解决了同名标签可能带来的冲突。

3. 枚举与遍历：Symbol的“隐藏”特性

Symbol属性还有一个重要特性：它们不会被常规的遍历方法枚举到。例如，for...in循环、Object.keys()、Object.values()、Object.entries()以及JSON.stringify()都会“忽略”Symbol属性。

// 3.html
for (const person in classRoom) {
    console.log(classRoom[person], '////'); // 只会打印出 "dl" 的值
}

这使得Symbol属性具备了一定的“私有”和“内置”属性特征，不会被轻易暴露出去。

如果你需要获取对象中所有的Symbol属性，必须使用专门的方法：

// 3.html
const syms = Object.getOwnPropertySymbols(classRoom); // 返回一个包含对象自身所有Symbol键的数组
console.log(syms); // 打印出 [Symbol(Mark), Symbol(oliva), Symbol(oliva)]

// 可以结合map方法获取这些属性的值
const data = syms.map(sym => classRoom[sym]);
console.log(data); // 打印出三个学生的对象数组

四、总结

Symbol是ES6为解决JavaScript长期存在的属性命名冲突和元编程问题而引入的一种优雅方案。它：

1. 是简单数据类型，独一无二。
2. 是创建对象唯一键的理想选择，尤其在多人协作和库的开发中，能有效保证属性安全。
3. 具有“半隐藏”特性，不会被常规方法枚举，需用Object.getOwnPropertySymbols()获取。

掌握了Symbol，你就拥有了在JavaScript对象中创建“命名空间”和“内部插槽”的能力，让你的代码结构更清晰、更健壮。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源：https://www.cnblogs.com/smileZAZ/p/19674000