从基础到实战：一文吃透 JS Tuples 与 Records 的所有核心用法

引言：JavaScript 数据不可变性的新篇章JavaScript 作为一种动态类型语言，长期以来在数据不可变性方面存在短板。虽然我们有 const 和 Object.freeze()，但它们只能提供浅层不可变性，且使用起来不够直观。2025 年，随着 ECMAScript 规范的推进，Tuples（元组）和 Records（记录）作为新的内置对象类型正式进入 JavaScript 舞台。它们不仅解决了深度不可变性的痛点，还为函数式编程、状态管理和数据交换提供了更优雅的解决方案。本文将带你从零开始，全面掌握这两种数据结构的核心用法，并通过实战案例让你立刻上手。## 什么是 Tuples 和 Records？简单来说，Tuples 是不可变的、值比较的数组，而 Records 是不可变的、值比较的对象。- Tuples：类似 Array，但所有操作都返回新实例，且通过值比较而非引用比较。- Records：类似 Object，同样具有深度不可变性和值比较特性。它们的核心优势在于：- 深度不可变性：内部所有属性或元素都是只读的- 值相等性：两个结构相同的数据会被视为相等，无论它们是否指向同一个内存地址- 结构共享：内部实现使用哈希映射，性能优异## 基础语法与创建### 创建 TuplesTuples 使用 #[] 字面量语法创建：javascript// 创建一个简单元组const point = #[10, 20];// 创建嵌套元组const nested = #[[1, 2], [3, 4]];// 创建混合类型元组const mixed = #["hello", 42, true, null];### 创建 RecordsRecords 使用 #{} 字面量语法创建：javascript// 创建一个简单记录const person = #{ name: "Alice", age: 30 };// 创建嵌套记录const address = #{ city: "Beijing", district: #{ name: "Haidian", code: 100080 } };// 创建包含动态键的记录（键必须是字符串或 Symbol）const dynamic = #{ ["key" + 1]: "value1" };## 核心特性详解### 1. 深度不可变性这是 Tuples/Records 最核心的特性。一旦创建，任何尝试修改都会抛出错误：javascriptconst nums = #[1, 2, 3];nums[0] = 100; // TypeError: Cannot assign to read-only propertyconst obj = #{ a: 1 };obj.a = 2; // TypeError: Cannot assign to read-only property### 2. 值相等性这是与传统数组/对象最大的区别：javascript// 传统数组比较[1, 2] === [1, 2]; // false（引用比较）// Tuples 比较#[1, 2] === #[1, 2]; // true（值比较）// 嵌套结构比较const a = #{ x: #[1, 2] };const b = #{ x: #[1, 2] };a === b; // true### 3. 作为 Map 键或 Set 元素由于值相等性，Tuples/Records 可以作为 Map 的键或 Set 的元素：javascriptconst map = new Map();map.set(#[1, 2], "point A");map.set(#[3, 4], "point B");// 查找时无需引用map.get(#[1, 2]); // "point A"// 在 Set 中使用const set = new Set();set.add(#{ name: "Alice" });set.add(#{ name: "Alice" }); // 重复值，不会添加set.size; // 1## 进阶操作：修改与转换虽然 Tuples/Records 不可变，但我们可以通过特定方法创建修改后的新实例：javascript// Tuple 的更新方法const original = #[1, 2, 3];const updated = original.with(1, 99); // #[1, 99, 3]// 添加元素const extended = original.push(4); // #[1, 2, 3, 4]const prepended = original.unshift(0); // #[0, 1, 2, 3]// 删除元素const sliced = original.slice(0, 2); // #[1, 2]const filtered = original.filter(x => x > 1); // #[2, 3]// Record 的更新方法const person = #{ name: "Alice", age: 30 };const older = person.with("age", 31); // #{ name: "Alice", age: 31 }// 添加新属性const withEmail = person.merge(#{ email: "alice@example.com" });// #{ name: "Alice", age: 30, email: "alice@example.com" }// 删除属性const noAge = person.without("age"); // #{ name: "Alice" }## 实战：状态管理示例下面是一个完整的可运行示例，展示如何在 React 风格的状态管理中使用 Tuples/Records：javascript// 模拟 Redux 风格的 reducerimport { produce } from 'immer'; // 传统方式对比// 使用 Tuples/Records 的纯函数状态管理function createStore(initialState) { let state = initialState; return { getState: () => state, dispatch: (action) => { switch (action.type) { case 'ADD_TODO': // 创建新状态，避免直接修改 state = state.with('todos', state.todos.push(#{ id: action.id, text: action.text, completed: false }) ); break; case 'TOGGLE_TODO': state = state.with('todos', state.todos.map(todo => todo.id === action.id ? todo.with('completed', !todo.completed) : todo ) ); break; case 'REMOVE_TODO': state = state.with('todos', state.todos.filter(todo => todo.id !== action.id) ); break; } } };}// 初始状态const initialState = #{ todos: #[], filter: 'ALL' };// 使用示例const store = createStore(initialState);store.dispatch({ type: 'ADD_TODO', id: 1, text: '学习 Tuples' });store.dispatch({ type: 'ADD_TODO', id: 2, text: '学习 Records' });const state1 = store.getState();console.log('State 1:', state1);// #{ todos: #[#{ id: 1, text: "学习 Tuples", completed: false }, #{ id: 2, text: "学习 Records", completed: false }], filter: "ALL" }store.dispatch({ type: 'TOGGLE_TODO', id: 1 });const state2 = store.getState();console.log('State 2:', state2);// 第一个 todo 的 completed 变为 true，其他不变// 验证不可变性console.log(state1.todos === state2.todos); // false（不同引用）console.log(state1.todos[0] === state2.todos[0]); // false（修改过的元素）console.log(state1.todos[1] === state2.todos[1]); // true（未修改的元素共享引用）## 实战：数据查询与缓存Tuples/Records 的值比较特性在数据缓存场景中非常有用：javascript// 高性能缓存系统class Cache { constructor() { this.cache = new Map(); } get(key) { return this.cache.get(key); } set(key, value) { this.cache.set(key, value); } // 使用 Record 作为复合键 setComplexQuery(query, result) { const key = #{ table: query.table, filters: query.filters, sortBy: query.sortBy, page: query.page }; this.cache.set(key, result); } getComplexQuery(query) { const key = #{ table: query.table, filters: query.filters, sortBy: query.sortBy, page: query.page }; return this.cache.get(key); }}// 使用缓存const cache = new Cache();// 第一次查询（模拟数据库）const query1 = { table: 'users', filters: #{ age: 25 }, sortBy: 'name', page: 1 };const result1 = fetchFromDatabase(query1); // 假设这是耗时的操作cache.setComplexQuery(query1, result1);// 第二次查询（命中缓存）const query2 = { table: 'users', filters: #{ age: 25 }, sortBy: 'name', page: 1 };const cachedResult = cache.getComplexQuery(query2);console.log(cachedResult === result1); // true（命中缓存）// 不同的查询（未命中）const query3 = { table: 'users', filters: #{ age: 30 }, sortBy: 'name', page: 1 };console.log(cache.getComplexQuery(query3)); // undefined（未命中）## 性能考虑与最佳实践1. 避免频繁创建大型结构：虽然 Tuples/Records 内部使用结构共享，但频繁创建大型深嵌套结构仍可能造成性能开销。2. 优先用于需要值比较的场景：如 Map 键、Set 元素、状态管理中需要深度比较的场景。3. 结合 Object.fromEntries 和 Array.from 转换：当需要与旧代码交互时：javascript// Tuple → Arrayconst tuple = #[1, 2, 3];const arr = Array.from(tuple); // [1, 2, 3]// Record → Objectconst record = #{ a: 1, b: 2 };const obj = Object.fromEntries(record.entries()); // { a: 1, b: 2 }4. 注意性能陷阱：with 方法在大型 Record 上性能较好，但频繁对大型 Tuple 进行 push 或 unshift 可能不如使用 map 高效。## 总结Tuples 和 Records 为 JavaScript 带来了真正的深度不可变数据结构，解决了长期存在的引用比较问题和可变性管理难题。通过本文的学习，你应该已经掌握了：- 基础创建语法：#[] 和 #{}- 核心特性：深度不可变性、值相等性- 修改方法：with、push、filter、map、merge、without 等- 实战应用：状态管理、数据缓存、Map/Set 键值使用在实际项目中，建议先从状态管理或数据缓存等场景开始尝试使用 Tuples/Records，逐步熟悉它们的工作方式。记住，它们不是要完全替代传统数组和对象，而是在需要不可变性和值比较的场景下提供更优雅、更高效的解决方案。随着 ECMAScript 规范的进一步完善，Tuples 和 Records 将成为 JavaScript 开发者工具箱中不可或缺的利器。现在就动手尝试，让你的代码更加健壮、可预测！