JavaScript即将推出两个新的数据类型：Record 和 Tuple ，这俩是啥呢？其实就是一个只读的 Object 和 Array，其实在其它语言中已经有类似的数据类型了，例如 Python 中也有 Tuple（元祖）这一类型，作用也是一个只读的数组（在Python里叫只读的列表），一起来了解一下，这个特性是一个第2阶段提案（即差不多稳了），想要提前体验的，文末也有 polyfill 的使用教程！

基础写法

// 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方法扩展

现在不是有 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

@babel/plugin-proposal-record-and-tuple 更多用法见 Babel 官方文档

https://babeljs.io/docs/en/babel-plugin-proposal-record-and-tuple#docsNav

应用场景

了解了那么多的内容，印象最深刻的应该就是 只读 这个特性，那么基于这个特性，Record 和 Tuple 有哪些应用场景呢？

• 用于保护一些数据，比如函数的返回值、对象内部的静态属性...

• 既然具有只读的特性，即不可变对象，那应该也可以作为对象的 key 值吧？

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript里var声明作用域的代码是什么

  在全局作用域中使用var操作符声明的变量将成为window对象的属性。使用var操作符定义的变量将成为包含其函数的局部变量。在函数中定义变量时省略var操作符，创建全局变量。

• Node.js的RPC通信怎样理解，与Ajax的异同在哪

  本篇文章带大家了解一下RPC通信，介绍一下RPC和Ajax的相同点和不同点，希望对大家有所帮助！

• JS中for循环里的初始化问题怎么解决

  本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了JavaScript变量or循环中的var和let详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，下面一起来看一下，希望对大家有帮助。

• JS中用循环迭代数组并在循环内等待的实现是怎样

  JavaScript中如何在一个循环中等待示例代码详解 下面是如何使用for..of 循环来迭代一个数组并在循环内等待: const fun = (prop) => { return new Promise(resolve => { setTimeout(() => resolve(`done ${prop}`), 1000); }) } const go = async () => { const list = [1, 2, 3] for (const prop of list) { console.log(prop) co ...

• 用JS怎么写个画板功能？

  用JS怎么写个画板功能？对于画板功能，我们比较常见是电子教室里的电子黑板，能够经常画画和签字操作，那么我们想要用JS来实现要怎么做呢？