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

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

 更新時間:2022年03月07日 14:31:33   作者:零一  
js中原始數(shù)據(jù)類型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的數(shù)據(jù)類型),引用的數(shù)據(jù)類型有Object,Array,Function,下面這篇文章主要給大家介紹了關(guān)于JavaScript新增兩個原始數(shù)據(jù)類型(Record和Tuple)的相關(guān)資料,需要的朋友可以參考下

前言

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)文章

最新評論