JavaScript 新增兩個(gè)原始數(shù)據(jù)類型
基礎(chǔ)寫法
// Records
const myRecord = #{
name: '01',
age: 23
}
// Tuple
const myTuple = #['1', '2', '3']
其實(shí)就是在原先的對(duì)象和數(shù)組前面加了個(gè) #
可讀特性
Record和Tuple的語法跟對(duì)象和數(shù)組是一樣的，所以？
const myRecord = #{
name: '01'
}
const myTuple = #['1', '2']
myRecord['age'] = 23 // error
myTuple.push('3') // error
為啥報(bào)錯(cuò)了啊？開頭有提到哦~因?yàn)檫@兩個(gè)類型是 只讀的 Object 和 Array
非唯一性
在平時(shí)的開發(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能否解決這一問題呢？
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ù)說草案中還提到一個(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基本的庫
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
