JavaScript新增的兩個原始數(shù)據(jù)類型詳解(Record和Tuple)
前言
JavaScript即將推出兩個新的數(shù)據(jù)類型:Record 和 Tuple ,這倆是啥呢?其實就是一個只讀的 Object 和 Array,其實在其它語言中已經(jīng)有類似的數(shù)據(jù)類型了,例如 Python 中也有 Tuple(元祖)這一類型,作用也是一個只讀的數(shù)組(在Python里叫只讀的列表),一起來了解一下,這個特性是一個第2階段提案(即差不多穩(wěn)了),想要提前體驗的,文末也有 polyfill 的使用教程!
基礎(chǔ)寫法
//?Records const?myRecord?=?#{ ?name:?'01', ??age:?23 } //?Tuple const?myTuple?=?#['1',?'2',?'3']
其實就是在原先的對象和數(shù)組前面加了個 #
可讀特性
Record和Tuple的語法跟對象和數(shù)組是一樣的,所以?
const?myRecord?=?#{ ?name:?'01' } const?myTuple?=?#['1',?'2'] myRecord['age']?=?23??//?error myTuple.push('3')??//?error
為啥報錯了???開頭有提到哦~因為這兩個類型是 只讀的 Object 和 Array
非唯一性
在平時的開發(fā)中,數(shù)組與數(shù)組、對象與對象 都不適合直接用 === 進行比較判斷,因為每個生成的對象在內(nèi)存中的地址都不一樣
const?obj1?=?{?name:?'01'?} const?obj2?=?{?name:?'01'?} const?objIsSame?=?obj1?===?obj2???//?false const?arr1?=?[1] const?arr2?=?[1] const?arrIsSame?=?arr1?===?arr2???//?false
要想真正比較兩個數(shù)組或?qū)ο笫欠裣嗟龋次覀兿胍膬?nèi)容都一樣),需要遍歷遞歸去一一對比,而現(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
可以看到,只要內(nèi)部內(nèi)容一致,即使是兩個分別生成的Record或Tuple比較一下,也是相等的
普通對象和數(shù)組的轉(zhuǎn)換
我可以用對象 Record 和 Tuple 將普通的對象和數(shù)組轉(zhuǎn)換
const?myRecord?=?Record({?name:?'01',?age:?23?});???//?#{?name:?'01',?age:?23?} const?myTuple?=?Tuple([1,?2,?3,?4,?5]);???//?#[1,?2,?3,?4,?5]
支持?jǐn)U展運算符
我們也可以對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 兩個方法嘛,據(jù)說草案中還提到一個不錯的想法,那就是給 JSON 對象新增一個 parseImmutable 方法,功能應(yīng)該就是直接將一個 Record字符串或Tuple字符串 解析成對應(yīng)的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,內(nèi)容如下:
{ ????"presets":?["@babel/preset-env"], ????"plugins":?[ ????????[ ??????????"@babel/plugin-proposal-record-and-tuple", ??????????{ ????????????"importPolyfill":?true, ????????????"syntaxType":?"hash" ??????????} ????????] ??????] }
再創(chuàng)建一個 index.js,內(nèi)容如下:
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 文件內(nèi)容如下:
"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 即可獲得結(jié)果
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
應(yīng)用場景
了解了那么多的內(nèi)容,印象最深刻的應(yīng)該就是 只讀 這個特性,那么基于這個特性,Record 和 Tuple 有哪些應(yīng)用場景呢?
用于保護一些數(shù)據(jù),比如函數(shù)的返回值、對象內(nèi)部的靜態(tài)屬性...
既然具有只讀的特性,即不可變對象,那應(yīng)該也可以作為對象的 key 值吧?
總結(jié)
到此這篇關(guān)于JavaScript新增原始數(shù)據(jù)類型的文章就介紹到這了,更多相關(guān)JS新增原始數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)的相關(guān)資料,需要的朋友可以參考下2015-12-12如何利用Promises編寫更優(yōu)雅的JavaScript代碼
如何利用Promises編寫更優(yōu)雅的JavaScript代碼?下面小編就為大家?guī)硪黄肞romises編寫更優(yōu)雅的JavaScript代碼。希望對大家有所幫助。一起跟隨小編過來看看吧2016-05-05JavaScript控制語句及搭建前端服務(wù)器的過程詳解
這篇文章主要介紹了JavaScript控制語句及搭建前端服務(wù)器,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04基于JS實現(xiàn)Flappy?Bird游戲的示例代碼
Flappy?Bird是13年紅極一時的小游戲,即摁上鍵控制鳥的位置穿過管道間的縫隙。本文將用JS實現(xiàn)這一經(jīng)典的游戲,需要的可以參考一下2022-04-04localStorage設(shè)置有效期和過期時間的簡單方法
眾所周知前端三大緩存,cookie,sessionStorage,localStorage,下面這篇文章主要給大家介紹了關(guān)于localStorage設(shè)置有效期和過期時間的相關(guān)資料,需要的朋友可以參考下2022-02-02