JavaScript 新增两个原始数据类型

开发 前端
大家好,我是ConardLi,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方法扩展

现在不是有 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

责任编辑:庞桂玉 来源: code秘密花园
相关推荐

2020-11-23 10:25:44

tcpdump数据包Linux

2022-06-17 09:46:51

Chrome 102Chrome浏览器

2020-12-29 07:56:23

JavaScript数据类型 primitive

2016-08-18 14:13:55

JavaScript基本数据引用数据

2012-10-18 09:24:14

Office 365

2010-10-08 15:11:28

JavaScript数

2021-12-03 15:24:45

Javascript数据类型

2022-01-14 10:59:07

数据包tcpdump

2010-10-08 09:02:03

JavaScript基

2011-07-29 10:12:12

JavaScript

2014-01-09 10:07:18

JavaScriptNull

2010-09-13 09:58:17

SQL Server2

2018-11-15 09:45:47

JavaScript数据类型变量

2022-08-12 16:12:34

JavaScript数据类型字符串

2013-01-18 09:41:24

PaaS云存储红帽Linux

2017-12-26 10:48:37

深度学习原始数据

2017-02-27 08:34:09

JavaScript数据引用

2019-08-12 11:40:48

数据库SQLite3数据类型

2014-01-05 17:08:09

PostgreSQL数据类型

2022-02-27 13:16:09

漏洞网络安全
点赞
收藏

51CTO技术栈公众号