搶先看：JavaScript的新增兩個原始資料型別

導讀	JavaScript即將推出兩個新的資料型別：Record 和 Tuple ，這倆是啥呢？其實就是一個只讀的 Object 和 Array，其實在其它語言中已經有類似的資料型別了。

JavaScript即將推出兩個新的資料型別：Record 和 Tuple ，這倆是啥呢？其實就是一個只讀的 Object 和 Array，其實在其它語言中已經有類似的資料型別了。

// Records
const myRecord = #{
 name: '01',
  age: 23
}
// Tuple
const myTuple = #['1', '2', '3']

其實就是在原先的物件和陣列前面加了個 #

Record和Tuple的語法跟物件和陣列是一樣的，所以？

const myRecord = #{
 name: '01'
}
const myTuple = #['1', '2']
myRecord['age'] = 23  // error
myTuple.push('3')  // error

為啥報錯了啊？開頭有提到哦~因為這兩個型別是 只讀的 Object 和 Array

在平時的開發中，陣列與陣列、物件與物件 都不適合直接用 === 進行比較判斷，因為每個生成的物件在記憶體中的地址都不一樣

const obj1 = { name: '01' }
const obj2 = { name: '01' }
const objIsSame = obj1 === obj2   // false
const arr1 = [1]
const arr2 = [1]
const arrIsSame = arr1 === arr2   // false

要想真正比較兩個陣列或物件是否相等（即我們想要的內容都一樣），需要遍歷遞迴去一一對比，而現在呢？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

可以看到，只要內部內容一致，即使是兩個分別生成的Record或Tuple比較一下，也是相等的

我可以用物件 Record 和 Tuple 將普通的物件和陣列轉換

const myRecord = Record({ name: '01', age: 23 });   // #{ name: '01', age: 23 }
const myTuple = Tuple([1, 2, 3, 4, 5]);   // #[1, 2, 3, 4, 5]

我們也可以對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.parse 和 JSON.stringfy 兩個方法嘛，據說草案中還提到一個不錯的想法，那就是給 JSON 物件新增一個 parseImmutable 方法，功能應該就是直接將一個 Record字串或Tuple字串 解析成對應的Record和Tuple物件

如果你想現在體驗該功能，可以裝一下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

在目錄下建立 .babelrc，內容如下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
          "@babel/plugin-proposal-record-and-tuple",
          {
            "importPolyfill": true,
            "syntaxType": "hash"
          }
        ]
      ]
}

再建立一個 index.js，內容如下：

const tuple1 = #[1,2,3]
const tuple2 = #[1,2,3]
const record1 = #{ name: '01' }
const record2 = #{ name: '02' }
console.log(tuple1 === tuple2, record1 === record2)

執行一下babel的 編譯一下

./node_modules/.bin/babel index.js --out-file compiled.js

輸出得到的 compiled.js 檔案內容如下：

"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);

最後執行 compiled.js 即可獲得結果

node compiled.js
# Result: true false

原文來自：