欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評(píng)論