1. JavaScript 新增两个原始数据类型

JavaScript 新增两个原始数据类型

code 秘密花园;)

code 秘密花园

微信号 code_mmhy

功能介绍 这里有最前沿的前端技术、最新的前端消息、最精品的技术文章、最好用的工具推荐、还有一个有趣的作者。

2022-03-07 12:00

收录于话题

以下文章来源于前端印象 ,作者零一

[JavaScript 新增两个原始数据类型 - 图1

前端印象 .

零一,分享技术,不止前端](#)

大家好,我是ConardLi,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 比较一下,也是相等的

普通对象和数组的转换

我可以用对象 RecordTuple 将普通的对象和数组转换

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.parseJSON.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 值吧?

  • JavaScript 新增两个原始数据类型 - 图2
    code 秘密花园
    这里有最前沿的前端技术、最新的前端消息、最精品的技术文章、最好用的工具推荐、还有一个有趣的作者。
    236 篇原创内容
    公众号

「有了这两个新的原始数据类型,你能想到什么应用场景?」欢迎在评论区留言!

预览时标签不可点

收录于话题 #

上一篇 下一篇

阅读原文

阅读

分享 收藏

赞 在看

已同步到看一看写下你的想法

前往 “发现”-“看一看” 浏览“朋友在看”

JavaScript 新增两个原始数据类型 - 图3

前往看一看

看一看入口已关闭

在 “设置”-“通用”-“发现页管理” 打开 “看一看” 入口

我知道了

已发送

取消

发送到看一看

发送

JavaScript 新增两个原始数据类型

最多 200 字,当前共字

发送中

喜欢此内容的人还喜欢

22 年第 8 篇 (目标 100 篇) mysql 的 json 字段类型

22 年第 8 篇 (目标 100 篇) mysql 的 json 字段类型

妙不可言 a

不喜欢

不看的原因

确定

  • 内容质量低
  • 不看此公众号

大数据Flink_Java 版数据处理_流处理 API_Transform(2)_Reduce 聚合算子

大数据Flink_Java 版数据处理_流处理 API_Transform(2)_Reduce 聚合算子

脑瓜凉

不喜欢

不看的原因

确定

  • 内容质量低
  • 不看此公众号

MySQL#(四)B + 树索引

MySQL#(四)B + 树索引

小怂读书

不喜欢

不看的原因

确定

  • 内容质量低
  • 不看此公众号

写留言

取消

留言

我的留言

写留言

正在加载

展开我的留言

以上留言被精选后,将对所有人可见

精选留言

写留言

写留言

正在加载

已无更多数据

关闭

写留言

提交 更多

正在加载

表情

正在加载

留言

JavaScript 新增两个原始数据类型 - 图4

微信扫一扫
关注该公众号

知道了

微信扫一扫
使用小程序

取消;) 允许;)

取消;) 允许;)

: , 。 视频 小程序 赞 ,轻点两下取消赞 在看 ,轻点两下取消在看

该账号因违规无法跳转
https://mp.weixin.qq.com/s/pmkvw4p86Ch77-9cyI5-1A