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