从基础到实战一文吃透 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 } };// 创建包含动态键的记录键必须是字符串或 Symbolconst 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: aliceexample.com });// #{ name: Alice, age: 30, email: aliceexample.com }// 删除属性const noAge person.without(age); // #{ name: Alice }## 实战状态管理示例下面是一个完整的可运行示例展示如何在 React 风格的状态管理中使用 Tuples/Recordsjavascript// 模拟 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 开发者工具箱中不可或缺的利器。现在就动手尝试让你的代码更加健壮、可预测
从基础到实战：一文吃透 JS Tuples 与 Records 的所有核心用法
从基础到实战一文吃透 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 } };// 创建包含动态键的记录键必须是字符串或 Symbolconst 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: aliceexample.com });// #{ name: Alice, age: 30, email: aliceexample.com }// 删除属性const noAge person.without(age); // #{ name: Alice }## 实战状态管理示例下面是一个完整的可运行示例展示如何在 React 风格的状态管理中使用 Tuples/Recordsjavascript// 模拟 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 开发者工具箱中不可或缺的利器。现在就动手尝试让你的代码更加健壮、可预测
