JavaScript的Record和Tuple怎么用

本篇內(nèi)容主要講解“JavaScript的Record和Tuple怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript的Record和Tuple怎么用”吧!

前言

JavaScript即將推出兩個(gè)新的數(shù)據(jù)類型：Record 和 Tuple ，這倆是啥呢？其實(shí)就是一個(gè)只讀的 Object 和 Array，其實(shí)在其它語言中已經(jīng)有類似的數(shù)據(jù)類型了，例如 Python 中也有 Tuple（元祖）這一類型，作用也是一個(gè)只讀的數(shù)組（在Python里叫只讀的列表），一起來了解一下，這個(gè)特性是一個(gè)第2階段提案（即差不多穩(wěn)了）。

基礎(chǔ)寫法

// Records
const myRecord = #{
 name: '01',
  age: 23
}

// Tuple
const myTuple = #['1', '2', '3']

其實(shí)就是在原先的對象和數(shù)組前面加了個(gè) #

可讀特性

Record和Tuple的語法跟對象和數(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ù)組、對象與對象 都不適合直接用 === 進(jìn)行比較判斷，因?yàn)槊總€(gè)生成的對象在內(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)容都一樣），需要遍歷遞歸去一一對比，而現(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)容一致，即使是兩個(gè)分別生成的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展運(yùn)算符

我們也可以對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 對象新增一個(gè) parseImmutable 方法，功能應(yīng)該就是直接將一個(gè) Record字符串或Tuple字符串 解析成對應(yīng)的Record和Tuple對象

提前體驗(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

應(yīng)用場景

了解了那么多的內(nèi)容，印象最深刻的應(yīng)該就是 只讀 這個(gè)特性，那么基于這個(gè)特性，Record 和 Tuple 有哪些應(yīng)用場景呢？

• 用于保護(hù)一些數(shù)據(jù)，比如函數(shù)的返回值、對象內(nèi)部的靜態(tài)屬性...

• 既然具有只讀的特性，即不可變對象，那應(yīng)該也可以作為對象的 key 值吧？

到此，相信大家對“JavaScript的Record和Tuple怎么用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！