Record与Tuple是JavaScript提案中的不可变数据类型，用{| |}和#[]表示，支持值比较和不可变性，适用于优化性能和依赖检查。
JavaScript 一直以对象和数组作为主要的数据结构，但标准委员会正在推进一种新的浅层不可变数据类型：Record 和 Tuple。它们是 ECMAScript 提案（目前处于第3阶段）的一部分，旨在提供语言级别的不可变性支持，特别适用于函数式编程、性能优化以及 React 等框架中的依赖比较。
什么是 Record 与 Tuple？
Record 是一种不可变的、基于值的对象类型，用双竖线 {| |} 表示。
Tuple 是一种不可变的、基于值的数组类型，用方括号加井号 #[] 表示。
它们的核心特点是：
- 内容不可变（immutable）——无法修改其中的值
- 基于值比较（value-based equality）——两个结构相同的内容被视为相等
- 只能包含原始值或其他 Record/Tuple
const point = {| x: 10, y: 20 |};
const colors = #["red", "green", "blue"];
// 比较两个 Record
const p1 = {| x: 1, y: 2 |};
const p2 = {| x: 1, y: 2 |};
console.log(p1 === p2); // true（值相等即相等）
不可变性如何工作？
尝试修改 Record 或 Tuple 会抛出错误（在严格模式下），或静默失败（非严格模式不推荐）。
let user = {| name: "Alice", age: 30 |};
user.age = 31; // TypeError: Cannot assign to read-only property
可以通过 with 操作符创建新实例：
立即学习“Java免费学习笔记（深入）”；
const olderUser = user with { age: 31 };
console.log(olderUser); // {| name: "Alice", age: 31 |}
console.log(user); // {| name: "Alice", age: 30 |}（原对象不变）
Tuple 同样支持 with 和方法如 concat、slice，返回新的 Tuple。
const newColors = colors.with(0, "yellow"); // #["yellow", "green", "blue"]
为什么需要基于值的比较？
在 React 开发中，我们常遇到因引用变化导致不必要的重新渲染。
使用普通对象：
const obj1 = { a: 1 };
const obj2 = { a: 1 };
obj1 === obj2; // false
使用 Record：
const r1 = {| a: 1 |};
const r2 = {| a: 1 |};
r1 === r2; // true
这意味着在 React.memo 或 useMemo 中，可以更可靠地跳过计算或渲染，提升性能。
限制与注意事项
- 只能包含原始值（number、string、boolean、null、undefined、symbol）、Record 或 Tuple
- 不能包含函数、对象实例、Date 等引用类型
- 目前是实验性功能，需通过 Babel 插件或等待浏览器/Node.js 支持
- 语法可能随提案进展微调
例如以下写法非法：
const invalid = {| fn: () => {} |}; // ❌ 不允许函数
基本上就这些。Record 与 Tuple 虽未正式落地，但代表了 JavaScript 向更安全、高效状态管理迈出的重要一步。尤其在关注性能和可预测性的应用中，值得提前了解和规划使用场景。
