❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年11月26日掘金 前端

Code Review 惊魂：同事的“优雅”重构，差点让管理员全部掉线

✇掘金 前端
作者 也无风雨也雾晴
2025年11月25日 22:29
差点就酿成了“生产事故” 昨天下午，组里的实习生小李提交了一个 PR，说是把权限管理模块的代码“优化”了一下。 我扫了一眼 Diff，绿油油的一片，看起来确实清爽了不少。代码风格从原本的命令式变成了函

从数字到版面：得物数据产品里数字格式化的那些事

✇掘金 前端
作者 得物技术
2025年11月25日 17:16
做数据前端，你会很快建立一个共识： 怎样把枯燥的数字用合适的方式展示出来，是我们的第一要务，但这只是起点。 如果说规范的数字排版是中后台系统的“地基” ，保证了信息的准确传达；那么可视化图

在数据录入、指标补录、表单填报场景中，SpreadJS 具备哪些优势和价值

✇掘金 前端
作者 葡萄城技术团队
2025年11月25日 16:16
在数据录入、指标补录、表单填报场景中，SpreadJS 具备哪些优势和价值 在数字化转型加速的今天，表格作为企业数据管理与分析的核心载体，其工具选择直接影响业务效率与用户体验。作为一款基于 HTML5

JavaScript 中的 Symbol：特性与实战应用

✇掘金 前端
作者 3秒一个大
2025年11月25日 16:13

JavaScript 中的 Symbol：特性与实战应用

在 JavaScript 的世界里，数据类型是构建一切的基础。ES6 的出现为我们带来了两种新的简单数据类型，其中之一就是 Symbol。本文将结合实例，详细解析 Symbol 的特性、用法及实际价值。

一、Symbol 是什么？数据类型的新成员

JavaScript 共有 8 种数据类型，可分为 "简单数据类型" 和 "复杂数据类型" 两大类：

  • 复杂数据类型：仅object一种

  • 简单数据类型：

    • 传统类型：number、boolean、string、null、undefined
    • ES6 新增：bigint（大数）、symbol（符号）

Symbol 的核心定义是：一种独一无二的值，它的出现主要是为了解决对象属性名冲突的问题。

二、Symbol 的声明方式

Symbol 通过Symbol()函数声明（注意：虽然使用函数形式，但它是简单数据类型，而非对象），语法如下：

// 基本声明
const sym = Symbol();
// 带描述符的声明（描述符仅用于标识，不影响唯一性）
const symWithDesc = Symbol('这是一个描述');

代码示例解析（symbol/1.js） ：

// 声明两个Symbol类型变量
const id1 = Symbol();
console.log(typeof id1); // 输出："symbol"，证明是简单数据类型

const id2 = Symbol();
// 核心特性：独一无二，即使无参数，两个Symbol也不相等
console.log(id1 === id2); // 输出：false

从代码可见，即使两个 Symbol 变量没有任何参数，它们也绝对不相等，这是 Symbol 最核心的特性。

三、Symbol 作为对象的唯一键：解决命名冲突

在多人协作开发中，对象的动态特性可能导致属性名冲突（后定义的属性会覆盖先定义的）。而 Symbol 作为对象的键（key）时，能完美避免这个问题，因为它是独一无二的。

代码示例解析（symbol/2.js） ：

// 两个描述符相同的Symbol，依然不相等
const s1 = Symbol('二哈');
const s2 = Symbol('二哈');
console.log(s1 === s2); // 输出：false

// 声明一个用于"秘密信息"的Symbol键
const secretKey = Symbol('secret');
console.log(secretKey, '//////'); // 输出：Symbol(secret) //////

// 演示Symbol作为对象键的优势
const a = "ecut";
const user = {
    [secretKey]: '111222', // Symbol作为键，避免被意外覆盖
    email: '123@qq.com',
    name: '曹仁',
    "a": 456, // 字符串键"a"
    [a]: 123  // 变量a（值为"ecut"）作为键，等价于"ecut":123
};

// 访问对象属性
console.log(user.ecut, user[a]); // 输出：123 123（两种方式访问同一个键）

// 普通字符串键可以被修改
user.email = 'ren@qq.com';

在上述代码中，secretKey作为 Symbol 键，即使其他开发者在对象中添加同名字符串键，也不会影响它的值，确保了数据的安全性。

四、Symbol 键的不可枚举性与访问方式

与普通字符串键不同，Symbol 作为对象的键时，不会被for...in循环枚举，也不会被Object.keys()等方法获取。这一特性让 Symbol 键适合存储 "私有" 或 "辅助" 信息。

若要访问对象中的 Symbol 键，需使用Object.getOwnPropertySymbols()方法，该方法会返回对象中所有 Symbol 键组成的数组。

代码示例解析 ：

// 声明两个Symbol变量
const wes = Symbol('Wes');
const person = Symbol('Wes');
// console.log(wes === person); // 输出：false（即使描述相同也不相等）

// 定义包含Symbol键的对象
const classRoom = {
    [Symbol('Mark')]: { grade: 50, gender: 'male' },
    [Symbol('oliva')]: { grade: 80, gender: 'female' },
    [Symbol('oliva')]: { grade: 85, gender: 'female' }, // 不会覆盖前一个oliva，因为是不同Symbol
    "dl": ["张三", "李四"] // 普通字符串键
};

// 1. 测试for...in循环：仅能枚举字符串键
for (const person in classRoom) {
    console.log(person, '////'); // 仅输出：dl ////
}

// 2. 获取所有Symbol键
const syms = Object.getOwnPropertySymbols(classRoom);
console.log(syms); // 输出：[Symbol(Mark), Symbol(oliva), Symbol(oliva)]

// 3. 访问Symbol键对应的值
const data = syms.map(sym => classRoom[sym]);
console.log(data); 
// 输出：[
//   { grade: 50, gender: 'male' },
//   { grade: 80, gender: 'female' },
//   { grade: 85, gender: 'female' }
// ]

代码中，classRoom对象包含 3 个 Symbol 键和 1 个字符串键。for...in循环仅能获取到字符串键dl，而Object.getOwnPropertySymbols()则能准确获取所有 Symbol 键，再通过映射即可访问对应的值。

五、总结

Symbol 作为 ES6 新增的简单数据类型，凭借 "独一无二" 和 "不可枚举" 的特性，在实际开发中有着重要作用：

  1. 作为对象键，避免多人协作时的命名冲突
  2. 存储 "私有" 信息，不被常规枚举方法获取
  3. 描述符仅用于标识，不影响其唯一性

掌握 Symbol 的用法，能让我们在处理对象属性时更加灵活、安全，尤其适合大型项目和多人协作场景。

❌
❌