大家好，我是若川。持續組織了6個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列

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

非唯一性

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

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

要想真正比較兩個數組或對象是否相等（即我們想要的內容都一樣），需要遍歷遞歸去一一對比，而現在呢？Record和Tuple能否解決這一問題呢？

const?record1?=?#{?name:?'01'?} const?record2?=?#{?name:?'01'?} const?recordIsSame?=?record1?===?record2???//?trueconst?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

@babel/plugin-proposal-record-and-tuple 更多用法見 Babel 官方文檔

https://babeljs.io/docs/en/babel-plugin-proposal-record-and-tuple#docsNav

應用場景

了解了那么多的內容，印象最深刻的應該就是 只讀 這個特性，那么基于這個特性，Record 和 Tuple 有哪些應用場景呢？

• 用于保護一些數據，比如函數的返回值、對象內部的靜態屬性...

• 既然具有只讀的特性，即不可變對象，那應該也可以作為對象的 key 值吧？

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持~

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JavaScript 新增两个原始数据类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。