JavaScript新增的兩個原始數據類型詳解(Record和Tuple)

更新時間：2022年03月07日 14:31:33 作者：零一

js中原始數據類型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的數據類型),引用的數據類型有Object,Array,Function,下面這篇文章主要給大家介紹了關于JavaScript新增兩個原始數據類型(Record和Tuple)的相關資料,需要的朋友可以參考下

前言

JavaScript即將推出兩個新的數據類型：Record 和 Tuple ，這倆是啥呢？其實就是一個只讀的 Object 和 Array，其實在其它語言中已經有類似的數據類型了，例如 Python 中也有 Tuple（元祖）這一類型，作用也是一個只讀的數組（在Python里叫只讀的列表），一起來了解一下，這個特性是一個第2階段提案（即差不多穩(wěn)了），想要提前體驗的，文末也有 polyfill 的使用教程！

基礎寫法

//?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

非唯一性

在平時的開發(fā)中，數組與數組、對象與對象都不適合直接用 === 進行比較判斷，因為每個生成的對象在內存中的地址都不一樣

const?obj1?=?{?name:?'01'?}
const?obj2?=?{?name:?'01'?}
const?objIsSame?=?obj1?===?obj2???//?false

const?arr1?=?[1]
const?arr2?=?[1]
const?arrIsSame?=?arr1?===?arr2???//?false

要想真正比較兩個數組或對象是否相等（即我們想要的內容都一樣），需要遍歷遞歸去一一對比，而現(xiàn)在呢？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方法擴展

現(xiàn)在不是有 JSON.parse 和 JSON.stringfy 兩個方法嘛，據說草案中還提到一個不錯的想法，那就是給 JSON 對象新增一個 parseImmutable 方法，功能應該就是直接將一個 Record字符串或Tuple字符串解析成對應的Record和Tuple對象

提前體驗

如果你想現(xiàn)在體驗該功能，可以裝一下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

在目錄下創(chuàng)建 .babelrc，內容如下：

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

再創(chuàng)建一個 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)

執(zhí)行一下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);

最后執(zhí)行 compiled.js 即可獲得結果