抢先看：JavaScript的新增两个原始数据类型

共计 2434 个字符，预计需要花费 7 分钟才能阅读完成。

JavaScript 即将推出两个新的数据类型：Record 和 Tuple，这俩是啥呢？其实就是一个只读的 Object 和 Array，其实在其它语言中已经有类似的数据类型了。

// Records
const myRecord = #{
 name: '01',
  age: 23
}
// Tuple
const myTuple = #['1', '2', '3']

其实就是在原先的对象和数组前面加了个 #

Record 和 Tuple 的语法跟对象和数组是一样的，所以？

const myRecord = #{name: '01'}
const myTuple = #['1', '2']
myRecord['age'] = 23  // error
myTuple.push('3')  // error

为啥报错了啊？开头有提到哦~ 因为这两个类型是 只读的 Object 和 Array

在平时的开发中，数组与数组、对象与对象 都不适合直接用 === 进行比较判断，因为每个生成的对象在内存中的地址都不一样

const obj1 = {name: '01'}
const obj2 = {name: '01'}
const objIsSame = obj1 === obj2   // false
const arr1 = [1]
const arr2 = [1]
const arrIsSame = arr1 === arr2   // false

要想真正比较两个数组或对象是否相等（即我们想要的内容都一样），需要遍历递归去一一对比，而现在呢？Record 和 Tuple 能否解决这一问题呢？

const record1 = #{name: '01'}
const record2 = #{name: '01'}
const recordIsSame = record1 === record2   // true
const tuple1 = #[1]
const tuple2 = #[1]
const tupleIsSame = tuple1 === tuple2   // true

可以看到，只要内部内容一致，即使是两个分别生成的 Record 或 Tuple 比较一下，也是相等的

我可以用对象 Record 和 Tuple 将普通的对象和数组转换

const myRecord = Record({name: '01', age: 23});   // #{name: '01', age: 23}
const myTuple = Tuple([1, 2, 3, 4, 5]);   // #[1, 2, 3, 4, 5]

我们也可以对 Record 和 Tuple 使用扩展运算符

const myTuple = #[1, 2, 3];
const myRecord = #{name: ’01’, age: 23};
const newRecord = #{…myRecord, money: 0} // #{name: ’01’, age: 23, money: 0}
const newTuple = #[…myTuple, 4, 5]; // #[1, 2, 3, 4, 5]

现在不是有 JSON.parse 和 JSON.stringfy 两个方法嘛，据说草案中还提到一个不错的想法，那就是给 JSON 对象新增一个 parseImmutable 方法，功能应该就是直接将一个 Record 字符串或 Tuple 字符串 解析成对应的 Record 和 Tuple 对象

如果你想现在体验该功能，可以装一下 babel 的插件

# babel 基本的库
yarn add @babel/cli @babel/core @babel/preset-env -D
# Record 和 Tuple Babel polyfill
yarn add @babel/plugin-proposal-record-and-tuple @bloomberg/record-tuple-polyfill -D

在目录下创建 .babelrc，内容如下：

{"presets": ["@babel/preset-env"],
    "plugins": [
        [
          "@babel/plugin-proposal-record-and-tuple",
          {
            "importPolyfill": true,
            "syntaxType": "hash"
          }
        ]
      ]
}

再创建一个 index.js，内容如下：

const tuple1 = #[1,2,3]
const tuple2 = #[1,2,3]
const record1 = #{name: '01'}
const record2 = #{name: '02'}
console.log(tuple1 === tuple2, record1 === record2)

执行一下 babel 的命令编译一下

./node_modules/.bin/babel index.js --out-file compiled.js

输出得到的 compiled.js 文件内容如下：

"use strict";
var _recordTuplePolyfill = require("@bloomberg/record-tuple-polyfill");
var tuple1 = (0, _recordTuplePolyfill.Tuple)(1, 2, 3);
var tuple2 = (0, _recordTuplePolyfill.Tuple)(1, 2, 3);
var record1 = (0, _recordTuplePolyfill.Record)({name: '01'});
var record2 = (0, _recordTuplePolyfill.Record)({name: '02'});
console.log(tuple1 === tuple2, record1 === record2);

最后执行 compiled.js 即可获得结果

node compiled.js
# Result: true false

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券