快捷導(dǎo)航

JavaScript新增的兩個(gè)原始數(shù)據(jù)類(lèi)型詳解(Record和Tuple)

更新時(shí)間：2022年03月07日 14:31:33 作者：零一

js中原始數(shù)據(jù)類(lèi)型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的數(shù)據(jù)類(lèi)型),引用的數(shù)據(jù)類(lèi)型有Object,Array,Function,下面這篇文章主要給大家介紹了關(guān)于JavaScript新增兩個(gè)原始數(shù)據(jù)類(lèi)型(Record和Tuple)的相關(guān)資料,需要的朋友可以參考下

前言

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: