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

陆菊 · 8 小时前

JavaScript 中的 Tuples（Tuples）与 Records（Records）提供了不可变的、基于值的数据结构，能简化状态管理、提升性能并增强代码的可预测性。
JavaScript 一直在持续进化以满足现代开发需求，其最新更新往往紧跟函数式编程和不可变数据处理的趋势。Tuples 与 Records 作为语言即将新增的两个特性，旨在简化不可变性的实现，同时提升开发效率与体验。本文将深入探讨这两个新特性，包括它们的设计目的、语法、优势及应用场景。
一、什么是 Tuples 与 Records？

1. Tuples（元组）
Tuples 是不可变的有序值列表。和数组类似，Tuples 可以存储多个元素，但不可变性确保了数据一旦创建就无法修改------这保证了数据一致性，非常适合对数据完整性和可预测性要求高的场景。
2. Records（记录）
Records 是不可变的键值对结构，类似 JavaScript 中的对象，但它是只读的：一旦创建，其属性和值就无法修改。
二、Tuples 与 Records 的核心特性

1. 不可变性（Immutability）
Tuples 和 Records 都是完全不可变的，甚至嵌套元素也无法修改。
示例：

const tuple = #[1, 2, 3];
const record = #{ name: "Alice", age: 25 };
// 以下操作都会抛出错误
tuple[0] = 99; // 错误：Tuples是不可变的
record.name = "Bob"; // 错误：Records是不可变的

复制代码

2. 值语义（Value Semantics）
和数组、对象的"引用比较"不同，Tuples 与 Records 采用"值比较"， equality 检查更符合直觉。
示例：

const tuple1 = #[1, 2, 3];
const tuple2 = #[1, 2, 3];
console.log(tuple1 === tuple2); // true（值相同则相等）

复制代码

3. 类型安全（Type Safety）
Tuples 严格要求元素的顺序和类型一致性。结合 TypeScript 使用时，开发者可以定义明确的类型约束，进一步保证使用的可预测性。
4. 内存高效（Memory Efficiency）
不可变性让 JavaScript 引擎能优化内存使用：由于值永远不会改变，相同数据的引用可以在应用中重复利用，减少内存开销。
5. 语法（Syntax）

Tuples 使用 #[...] 语法：

const myTuple = #[1, 'hello', true];

复制代码

Records 使用 #{...} 语法：

const myRecord = #{ key: 'value', id: 123 };

复制代码

三、Tuples 与 Records 在 TypeScript 中的应用

即将推出的 Tuples 与 Records 能与 TypeScript 无缝集成，带来更强的类型安全、可预测性和可维护性。借助 TS 的强类型能力，这些不可变结构可以强制严格的数据格式，防止意外修改。
1. Tuples 的类型安全
TS 中的 Tuples 本就支持固定长度数组的类型校验，结合 JavaScript 的不可变 Tuples 后，安全性进一步提升。
示例：带类型的 Tuples 声明

const myTuple: #[number, string, boolean] = #[1, "hello", true];
// 合法访问
const num: number = myTuple[0]; // 允许
// 非法修改（Tuples不可变）
myTuple[1] = "world"; // 错误：无法赋值给只读元素

复制代码

核心优势：

TS 确保元素遵循指定的类型顺序；
防止意外修改，维护数据完整性。

2. Records 的类型安全
Records 类似对象，但支持深层不可变。TS 的类型系统允许定义严格的键值结构，确保值在使用过程中始终一致。
示例：带类型的 Records 声明

const userRecord: #{ name: string, age: number, active: boolean } = #{
name: "Alice",
age: 30,
active: true
};
// 类型安全的属性访问
const username: string = userRecord.name;
// 尝试修改Records（会失败）
userRecord.age = 31; // 错误：无法赋值给只读属性

复制代码

核心优势：

TS 强制严格的属性类型；
杜绝意外的属性修改。

3. TS 的类型推断
TS 能自动推断 Tuples 与 Records 的类型，减少显式注解的需求。
示例：类型推断

const config = #{ apiEndpoint: "https://api.example.com", retries: 3 };
// TS自动推断类型：#{ apiEndpoint: string, retries: number }
console.log(typeof config.apiEndpoint); // "string"

复制代码

4. 函数签名中的应用
Tuples 与 Records 非常适合作为函数的参数和返回值，确保输入输出符合预期结构。
示例 1：使用 Records 的函数

function getUserInfo(user: #{ id: number, name: string }): string {
return `用户：${user.name}（ID：${user.id}）`;
}
const user = #{ id: 101, name: "Bob" };
console.log(getUserInfo(user)); // 输出：用户：Bob（ID：101）

复制代码

示例 2：返回 Tuples 的函数

function getCoordinates(): #[number, number] {
return #[40.7128, -74.0060]; // 纽约坐标
}
const coords = getCoordinates();
console.log(coords[0]); // 40.7128

复制代码

5. 结合 TS 工具类型
TS 的工具类型（如Readonly、Pick、Partial）可以与 Tuples、Records 结合使用，增加灵活性。
示例：对 Records 使用Readonly

type User = #{ id: number, name: string };
const readonlyUser: Readonly<User> = #{ id: 1, name: "Charlie" };
// 尝试修改Records
readonlyUser.name = "David"; // 错误：无法修改只读属性

复制代码

四、不同领域的实际应用场景

Tuples 与 Records 通过增强数据完整性、可预测性和效率，在多个行业中展现出独特优势。下面看看它们在不同领域的具体应用。
1. 金融应用
金融领域对数据完整性和不可变性要求极高，以防止未授权修改并符合监管标准。
示例：处理不可变的金融交易

const transaction: #{ id: number, amount: number, currency: string, completed: boolean } = #{
id: 12345,
amount: 1000,
currency: "USD",
completed: false
};
// 不修改原数据，创建处理后的新交易
const processedTransaction = #{ ...transaction, completed: true };
console.log(processedTransaction.completed); // true

复制代码

行业优势：

防止交易数据被意外或未授权修改；
不可变性保证了审计追踪的可靠性。

2. 数据分析
处理大型数据集时，数据一致性至关重要。Tuples 可用于表示固定结构的报表数据。
示例：存储不可变的报表数据

const reportEntry: #[string, number, boolean] = #["销售额", 5000, true];
// 安全提取报表值
const [category, revenue, approved] = reportEntry;
console.log(`分类：${category}，收入：${revenue}`);

复制代码

行业优势：

确保报表数据在处理过程中不被篡改；
便于 Records 的比较和去重。

3. 游戏开发
在游戏中，Tuples 可用于存储固定长度的数据，如坐标、RGB 颜色值或动画状态。
示例：用 Tuples 处理玩家坐标

const playerPosition: #[number, number] = #[100, 200];
// 移动玩家到新位置（创建新Tuples，而非修改原数据）
const newPosition = #[200, 300];
console.log(`X：${playerPosition[0]}, Y：${playerPosition[1]}`);

复制代码

行业优势：

固定长度、不可变的数据结构提升性能；
防止意外修改导致物理计算出错。

4. 配置管理
在大型应用中，Records 非常适合定义静态、不可修改的配置值。
示例：应用配置

const appConfig = #{
appName: "MyApp",
maxUsers: 1000,
theme: "dark"
};
// 安全使用配置
console.log(appConfig.theme); // "dark"

复制代码

行业优势：

防止关键配置被意外修改；
提升配置文件的可读性和可维护性。

5. 版本控制与数据一致性
对于需要向后兼容的应用，Records 能确保不同版本间的数据一致性。
示例：维护向后兼容

const oldVersionUser = #{ id: 1, name: "John" };
const newVersionUser = #{ ...oldVersionUser, email: "john@example.com" };
console.log(newVersionUser); // #{ id: 1, name: "John", email: "john@example.com" }

复制代码

行业优势：

扩展数据结构时保持向后兼容；
维护旧版本时避免意外修改。

五、Tuples/Records vs Object.freeze（）：核心区别

Object.freeze() 和 Records 都能创建不可变数据结构，但在性能、深层不可变性、值语义和易用性上存在显著差异。选择哪种方式，取决于你的应用场景。
特性Object.freeze()Records( Records)不可变性浅层（需手动实现深层冻结）深层（自动实现）语义比较基于引用基于值性能深层冻结时开销大原生优化，效率高语法繁琐（需手动调用，嵌套需递归）简洁（#{...} 原生语法）1. 不可变性差异
Object.freeze（）：浅层不可变
Object.freeze() 只冻结对象的顶层属性，嵌套对象仍可修改，需手动递归冻结。
示例：

const obj = {
name: "Alice",
address: { city: "New York" }
};
// 冻结对象
Object.freeze(obj);
// 尝试修改顶层属性（严格模式下报错）
obj.name = "Bob"; // 静默失败或报错
// 嵌套属性仍可修改
obj.address.city = "Los Angeles"; // 成功
console.log(obj.address.city); // 输出：Los Angeles（已被修改）

复制代码

修复方案：手动实现深层冻结函数

function deepFreeze(object) {
Object.keys(object).forEach(key => {
if (typeof object[key] === "object" && object[key] !== null) {
deepFreeze(object[key]); // 递归冻结嵌套对象
}
});
return Object.freeze(object);
}
const deeplyFrozenObj = deepFreeze(obj);
deeplyFrozenObj.address.city = "San Francisco"; // 现在会报错
console.log(deeplyFrozenObj.address.city); // 输出：New York（未被修改）

复制代码

Records：深层不可变
Records 自动支持深层不可变，无需手动处理嵌套结构。
示例：

const record = #{
name: "Alice",
address: #{ city: "New York" }
};
// 尝试修改任何属性都会报错
record.name = "Bob"; // 类型错误：无法赋值给只读属性
record.address.city = "Los Angeles"; // 类型错误：无法赋值给只读属性
console.log(record.address.city); // 输出：New York（未被修改）

复制代码

核心结论 ：
Object.freeze() 需要手动递归实现深层不可变，而 Records 原生支持，更安全易用。
2. 引用比较 vs 值比较
Object.freeze（）：基于引用
冻结的对象仍按引用比较，即使内容相同，不同引用也视为不相等。
示例：

const obj1 = Object.freeze({ name: "Alice" });
const obj2 = Object.freeze({ name: "Alice" });
console.log(obj1 === obj2); // 输出：false（引用不同）
console.log(obj1.name === obj2.name); // 输出：true（值相同）

复制代码

Records：基于值
Records 按值比较，内容相同则视为相等，无论是否为不同实例。
示例：

const record1 = #{ name: "Alice" };
const record2 = #{ name: "Alice" };
console.log(record1 === record2); // 输出：true（值相同）

复制代码

核心结论 ：
Records 的值比较更符合直觉，避免了深层比较函数的繁琐。
3. 易用性与性能

更新方式：两者都需通过扩展语法创建新实例，但 Records 的语法更简洁；
性能：Object.freeze() 深层冻结时会有运行时开销，而 Records 是原生优化的不可变结构，性能更优；
语法体验：Records 的 #{...} 语法比手动调用 Object.freeze() 更直观，尤其处理嵌套结构时。

推荐场景
应用场景推荐方案简单的浅层不可变需求Object.freeze（）（小型对象）复杂嵌套数据结构Records（深层不可变）频繁的值比较需求Records（值语义更高效）六、嵌套 Tuples 与 Records

1. 什么是嵌套结构？
嵌套 Tuples 是"包含其他 Tuples 的 Tuples"，嵌套 Records 是"值为其他 Records 的 Records"------它们可以构建深层的不可变数据模型。
示例：

const nestedTuple = #[ #[1, 2], #[3, 4] ];
const nestedRecord = #{
user: #{
name: "Alice",
address: #{ city: "New York", zip: "10001" }
}
};
console.log(nestedTuple[0][1]); // 输出：2
console.log(nestedRecord.user.address.city); // 输出："New York"

复制代码

2. 为什么要用嵌套结构？

数据完整性：确保深层嵌套数据也不可变；
可预测性：值比较简化状态变化追踪；
可读性：清晰表达复杂的数据关系；
性能：不可变状态管理的内存使用更优。

3. 嵌套结构的更新：不可变原则
由于不可变性，更新嵌套结构需在每一层都使用扩展语法 创建新实例。
示例 1：更新嵌套 Records

const user = #{
name: "Alice",
details: #{
age: 30,
address: #{ city: "Los Angeles", zip: "90001" }
}
};
// 深层更新城市（每一层都扩展）
const updatedUser = #{
...user,
details: #{
...user.details,
address: #{ ...user.details.address, city: "San Francisco" }
}
};
console.log(updatedUser.details.address.city); // 输出："San Francisco"

复制代码

示例 2：用工具函数简化深层更新

// 深层更新Records的工具函数
function updateNestedRecord(record, keyPath, value) {
if (keyPath.length === 1) {
return #{ ...record, [keyPath[0]]: value };
}
return #{
...record,
[keyPath[0]]: updateNestedRecord(record[keyPath[0]], keyPath.slice(1), value)
};
}
// 调用函数更新邮编
const updatedUserState = updateNestedRecord(user, ["details", "address", "zip"], "10002");
console.log(updatedUserState.details.address.zip); // 输出："10002"

复制代码

4. 常见陷阱与规避

陷阱 1：忘记逐层扩展
错误：const updatedUser = #{ ...user, details.address.city: "Seattle" };（语法错误）
解决：必须在每一层嵌套都使用扩展语法（如上面的示例）。
陷阱 2：错误的比较方式
错误：用 == 而非 === 比较 Records（虽然结果可能相同，但推荐用 === 符合值语义设计）。
解决：始终用 === 比较 Tuples/Records。
陷阱 3：访问不存在的嵌套属性
错误：console.log(user.details.phone.number);（phone 未定义，报错）
解决：用可选链 ?. 安全访问：user.details?.phone?.number ?? "未设置"。

七、与现代 JavaScript 模式的结合

Tuples 与 Records 天然契合以"不可变性"为核心的现代开发模式，尤其在状态管理中表现突出。
1. 在 Redux 中使用 Records

import { createStore } from "redux";
// 用Records定义初始状态
const initialState = #{ user: #{ name: "Alice", loggedIn: false } };
const reducer = (state = initialState, action) => {
switch (action.type) {
case "LOGIN":
// 不可变更新状态
return #{ ...state, user: #{ ...state.user, loggedIn: true } };
default:
return state;
}
};
const store = createStore(reducer);
store.dispatch({ type: "LOGIN" });
console.log(store.getState());
// 输出：#{ user: #{ name: "Alice", loggedIn: true } }

复制代码

2. 在 React 中使用 Tuples 与 Records
示例 1：Records 作为 React 状态

import React, { useState } from 'react';
const UserProfile = () => {
// 用Records存储用户状态
const [user, setUser] = useState(#{ name: "Alice", age: 30 });
const updateAge = () => {
// 不可变更新：创建新Records
setUser(#{ ...user, age: user.age + 1 });
};
return (
<p>姓名：{user.name}</p>
<p>年龄：{user.age}</p>
<button onClick={updateAge}>年龄+1</button>
);
};
export default UserProfile;

复制代码

示例 2：Tuples 作为固定长度状态

import React, { useState } from 'react';
const Scoreboard = () => {
// 用Tuples存储分数（固定结构）
const [scores, setScores] = useState(#[10, 20, 30]);
const addScore = () => {
// 不可变添加：创建新Tuples
setScores(#[...scores, 40]);
};
return (
<p>分数：{scores.join(", ")}</p>
<button onClick={addScore}>添加分数</button>
);
};
export default Scoreboard;

复制代码

八、如何现在就体验 Tuples 与 Records？

Tuples 与 Records 目前仍在开发中，但可以通过 Babel 或 TypeScript 的早期提案插件提前体验。
用 Babel 配置

安装插件：

npm install @babel/plugin-proposal-record-and-tuple

复制代码

2.配置 .babelrc：

{
"plugins": ["@babel/plugin-proposal-record-and-tuple"]
}

复制代码

九、总结

Tuples 与 Records 是 JavaScript 向"更可靠、更高效"进化的重要一步。它们通过原生支持深层不可变 和值语义，解决了传统数组/对象在状态管理中的痛点，同时无需依赖 Immutable.js 等第三方库。
无论是金融、游戏、数据分析还是前端框架开发，Tuples 与 Records 都能简化代码、减少 bug，并提升性能。现在就可以通过 Babel/TS 提前尝试，为未来的语言标准做好准备！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

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

相关帖子

签约作者

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

相关帖子

相关推荐

签约作者