大家好，我是若川。持續組織了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年內前端人走向前列。
識別上方二維碼加我微信、拉你進源碼共讀群
今日話題
略。分享、收藏、點贊、在看我的文章就是對我最大的支持~
精)
)
