JavaScript即將推出新的兩個原始數據類型

大家好，我是零一，javaScript即將推出兩個新的數據類型：Record 和 Tuple ，這倆是啥呢？其實就是一個只讀的 Object 和 Array，其實在其它語言中已經有類似的數據類型了，例如 Python 中也有 Tuple（元祖）這一類型，作用也是一個只讀的數組（在Python里叫只讀的列表），一起來了解一下

基礎寫法

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

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

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

應用場景

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

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

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

最后

我是零一，分享技術，不止前端！下期見~

「有了這兩個新的原始數據類型，你能想到什么應用場景？」歡迎在評論區留言！

javaScript 數據結構

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。