龙空技术网

未来的JavaScript记录与元组实现原理

Echa攻城狮 476

前言:

目前我们对“翻牌js”大致比较注意,同学们都需要了解一些“翻牌js”的相关内容。那么小编也在网上汇集了一些对于“翻牌js””的相关资讯,希望看官们能喜欢,咱们一起来学习一下吧!

译者: 李松峰 奇舞周刊

作者:Dr. Axel Rauschmayer

转发链接:

原文地址:

前言

Dr. Axel Rauschmayer最近撰文介绍了还处于Stage1阶段的两个JavaScript新特性:记录和元组。

记录和元组是一个新提案(Record & Tuple,),建议为JavaScript增加两个复合原始类型:

记录(Record),是不可修改的按值比较的对象元组(Tuple),是不可修改的按值比较的数组什么是按值比较

当前,JavaScript只有在比较原始值(如字符串)时才会按值比较(比较内容):

> 'abc' === 'abc'true

但在比较对象时,则是按标识比较(by identity),因此对象只与自身严格相等:

> {x: 1, y: 4} === {x: 1, y: 4}false> ['a', 'b'] === ['a', 'b']false

“记录和元组”的提案就是为了让我们可以创建按值比较的复合类型值。

比如,在对象字面量前面加一个井号(#),就可以创建一个记录。而记录是一个按值比较的复合值,且不可修改:

> #{x: 1, y: 4} === #{x: 1, y: 4}true

如果在数组字面量前面加一个#,就可以创建一个元组,也就是可以按值比较且不可修改的数组:

> #['a', 'b'] === #['a', 'b']true

按值比较的复合值就叫复合原始值或者复合原始类型。

记录和元组是原始类型

使用typeof可以看出来,记录和元组都是原始类型:

> typeof #{x: 1, y: 4}'record'> typeof #['a', 'b']'tuple'
记录和元组的内容有限制记录:键必须是字符串值必须是原始值(包括记录和元组)元组:元素必须是原始值(包括记录和元组)把对象转换为记录和元组
> Record({x: 1, y: 4})#{x: 1, y: 4}> Tuple.from(['a', 'b'])#['a', 'b']

注意:这些都是浅层转换。如果值树结构中有任何节点不是原始值,Record()和Tuple.from()会抛出异常。

使用记录

const record = #{x: 1, y: 4};// 访问属性assert.equal(record.y, 4);// 解构const {x} = record;assert.equal(x, 1);// 扩展assert.ok(  #{...record, x: 3, z: 9} === #{x: 3, y: 4, z: 9});
使用元组
const tuple = #['a', 'b'];// 访问元素assert.equal(tuple[1], 'b');// 解构(元组是可迭代对象)const [a] = tuple;assert.equal(a, 'a');// 扩展assert.ok(  #[...tuple, 'c'] === #['a', 'b', 'c']);// 更新assert.ok(  tuple.with(0, 'x') === #['x', 'b']);
为什么按值比较的值不可修改

某些数据结构(比如散列映射和搜索树)有槽位,其中键的保存位置根据它们的值来确定。如果键的值改变了,那这个键通常必须放到不同的槽位。这就是为什么在JavaScript中可以用作键的值:

要么按值比较且不可修改(原始值)要么按标识比较且可修改(对象)复合原始值的好处

复合原始值有如下好处。

深度比较对象,这是一个内置操作,可以通过如===来调用。共享值:如果对象是可修改的,为了安全共享就需要深度复制它的一个副本。而对于不可修改的值,就可以直接共享。数据的非破坏性更新:如果要修改复合值,由于一切都是不可修改的,所以就要创建一个可修改的副本,然后就可以放心地重用不必修改的部分。在Map和Set等数据结构中使用:因为两个内容相同的复合原始值在这门语言的任何地方(包括作为Map的键和作为Set的元素)都被认为严格相等,所以映射和集合成会变得更有用。

接下来演示这些好处。

示例:集合与映射变得更有用通过集合去重

有了复合原始值,即使是复合值(不是原始值那样的原子值)也可以去重:

> [...new Set([#[3,4], #[3,4], #[5,-1], #[5,-1]])][#[3,4], #[5,-1]]

如果是数组就办不到了:

> [...new Set([[3,4], [3,4], [5,-1], [5,-1]])][[3,4], [3,4], [5,-1], [5,-1]]
映射的复合键

因为对象是按标识比较的,所以在(非弱)映射中用对象作为键几乎没什么用:

const m = new Map();m.set({x: 1, y: 4}, 1);m.set({x: 1, y: 4}, 2);assert.equal(m.size, 2)

如果使用复合原始值就不一样了:下面行(A)创建的映射会保存地址(记录)到人名的映射。

const persons = [  #{    name: 'Eddie',    address: #{      street: '1313 Mockingbird Lane',      city: 'Mockingbird Heights',    },  },  #{    name: 'Dawn',    address: #{      street: '1630 Revello Drive',      city: 'Sunnydale',    },  },  #{    name: 'Herman',    address: #{      street: '1313 Mockingbird Lane',      city: 'Mockingbird Heights',    },  },  #{    name: 'Joyce',    address: #{      street: '1630 Revello Drive',      city: 'Sunnydale',    },  },];const addressToNames = new Map(); // (A)for (const person of persons) {  if (!addressToNames.has(person.address)) {    addressToNames.set(person.address, new Set());  }  addressToNames.get(person.address).add(person.name);}assert.deepEqual(  // Convert the Map to an Array with key-value pairs,  // so that we can compare it via assert.deepEqual().  [...addressToNames],  [    [      #{        street: '1313 Mockingbird Lane',        city: 'Mockingbird Heights',      },      new Set(['Eddie', 'Herman']),    ],    [      #{        street: '1630 Revello Drive',        city: 'Sunnydale',      },      new Set(['Dawn', 'Joyce']),    ],  ]);
示例:有效地深度相等使用复合属性值处理对象

在下面的例子中,我们使用数组的方法.filter()(行(B))提取了地址等于address(行(A))的所有条目 。

const persons = [  #{    name: 'Eddie',    address: #{      street: '1313 Mockingbird Lane',      city: 'Mockingbird Heights',    },  },  #{    name: 'Dawn',    address: #{      street: '1630 Revello Drive',      city: 'Sunnydale',    },  },  #{    name: 'Herman',    address: #{      street: '1313 Mockingbird Lane',      city: 'Mockingbird Heights',    },  },  #{    name: 'Joyce',    address: #{      street: '1630 Revello Drive',      city: 'Sunnydale',    },  },];const address = #{ // (A)  street: '1630 Revello Drive',  city: 'Sunnydale',};assert.deepEqual(  persons.filter(p => p.address === address), // (B)  [    #{      name: 'Dawn',      address: #{        street: '1630 Revello Drive',        city: 'Sunnydale',      },    },    #{      name: 'Joyce',      address: #{        street: '1630 Revello Drive',        city: 'Sunnydale',      },    },  ]);
对象变了吗?

在处理缓存的数据(如下面例子中的previousData)时,内置深度相等可以让我们有效地检查数据是否发生了变化。

let previousData;function displayData(data) {  if (data === previousData) return;  // ···}displayData(#['Hello', 'world']); // 显示displayData(#['Hello', 'world']); // 不显示
测试

多数测试框架都支持深度相等,以检查某个计算是否产生了预期的结果。例如,Node.js内置的assert模块有一个函数叫deepEqual()。有了复合原始值,就可以直接断言:

function invert(color) {  return #{    red: 255 - color.red,    green: 255 - color.green,    blue: 255 - color.blue,  };}assert.ok(  invert(#{red: 255, green: 153, blue: 51})    === #{red: 0, green: 102, blue: 204});
新语法的优缺点

新语法的一个缺点是字符#已经在很多地方被占用了(比如私有字段),另外非数字字母字符多少显得有点神秘。可以看看下面的例子:

const della = #{  name: 'Della',  children: #[    #{      name: 'Huey',    },    #{      name: 'Dewey',    },    #{      name: 'Louie',    },  ],};

优点是这个语法比较简洁。对于一个常用的结构,当然越简单越好。此外,一旦熟悉了这个语法之后,神秘感自然就会越来越淡。

除了特殊的字面量语法,还可以使用工厂函数:

const della = Record({  name: 'Della',  children: Tuple([    Record({      name: 'Huey',    }),    Record({      name: 'Dewey',    }),    Record({      name: 'Louie',    }),  ]),});

如果JavaScript支持Tagged Collection Literals(,已撤销),这个语法还可能有所改进:

const della = Record!{  name: 'Della',  children: Tuple![    Record!{      name: 'Huey',    },    Record!{      name: 'Dewey',    },    Record!{      name: 'Louie',    },  ],};

唉,即便使用更短的名字,结果看起来还是有点乱:

const R = Record;const T = Tuple;const della = R!{  name: 'Della',  children: T![    R!{      name: 'Huey',    },    R!{      name: 'Dewey',    },    R!{      name: 'Louie',    },  ],};
JSON与记录和元组JSON.stringify()把记录当成对象,把元组当成数组(递归)。JSON.parseImmutable与JSON.parse()类似,但返回记录而非对象,返回元组而非数组(递归)。未来:类的实例会按值比较吗?

相比对象和数组,我其实更喜欢使用类作为一个数据容器。因为它可以把名字添加到对象上。为此,我希望将来会有一种类,它的实例不可修改且按值比较。

假如我们还可以深度、非破坏性地更新那些包含由值类型的类产生的对象的数据,那就更好了。

推荐JavaScript经典实例学习资料文章

《可视化的 js:动态图演示 Promises & Async/Await 的过程》

《原生JS封装拖动验证滑块你会吗?「实践」》

《如何实现高性能的在线 PDF 预览》

《细说使用字体库加密数据-仿58同城》

《Node.js要完了吗?》

《Pug 3.0.0正式发布,不再支持 Node.js 6/8》

《纯JS手写轮播图(代码逻辑清晰,通俗易懂)》

《JavaScript 20 年 中文版之创立标准》

《值得收藏的前端常用60余种工具方法「JS篇」》

《箭头函数和常规函数之间的 5 个区别》

《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》

《「前端篇」不再为正则烦恼》

《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》

《深入细品浏览器原理「流程图」》

《JavaScript 已进入第三个时代,未来将何去何从?》

《前端上传前预览文件 image、text、json、video、audio「实践」》

《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》

《推荐13个有用的JavaScript数组技巧「值得收藏」》

《前端必备基础知识:window.location 详解》

《不要再依赖CommonJS了》

《犀牛书作者:最该忘记的JavaScript特性》

《36个工作中常用的JavaScript函数片段「值得收藏」》

《Node + H5 实现大文件分片上传、断点续传》

《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》

《【实践总结】关于小程序挣脱枷锁实现批量上传》

《手把手教你前端的各种文件上传攻略和大文件断点续传》

《字节跳动面试官:请你实现一个大文件上传和断点续传》

《谈谈前端关于文件上传下载那些事【实践】》

《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》

《最全的 JavaScript 模块化方案和工具》

《「前端进阶」JS中的内存管理》

《JavaScript正则深入以及10个非常有意思的正则实战》

《前端面试者经常忽视的一道JavaScript 面试题》

《一行JS代码实现一个简单的模板字符串替换「实践」》

《JS代码是如何被压缩的「前端高级进阶」》

《前端开发规范:命名规范、html规范、css规范、js规范》

《【规范篇】前端团队代码规范最佳实践》

《100个原生JavaScript代码片段知识点详细汇总【实践】》

《关于前端174道 JavaScript知识点汇总(一)》

《关于前端174道 JavaScript知识点汇总(二)》

《关于前端174道 JavaScript知识点汇总(三)》

《几个非常有意思的javascript知识点总结【实践】》

《都2020年了,你还不会JavaScript 装饰器?》

《JavaScript实现图片合成下载》

《70个JavaScript知识点详细总结(上)【实践】》

《70个JavaScript知识点详细总结(下)【实践】》

《开源了一个 JavaScript 版敏感词过滤库》

《送你 43 道 JavaScript 面试题》

《3个很棒的小众JavaScript库,你值得拥有》

《手把手教你深入巩固JavaScript知识体系【思维导图】》

《推荐7个很棒的JavaScript产品步骤引导库》

《Echa哥教你彻底弄懂 JavaScript 执行机制》

《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》

《深入解析高频项目中运用到的知识点汇总【JS篇】》

《JavaScript 工具函数大全【新】》

《从JavaScript中看设计模式(总结)》

《身份证号码的正则表达式及验证详解(JavaScript,Regex)》

《浏览器中实现JavaScript计时器的4种创新方式》

《Three.js 动效方案》

《手把手教你常用的59个JS类方法》

《127个常用的JS代码片段,每段代码花30秒就能看懂-【上】》

《深入浅出讲解 js 深拷贝 vs 浅拷贝》

《手把手教你JS开发H5游戏【消灭星星】》

《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》

《手把手教你全方位解读JS中this真正含义【实践】》

《书到用时方恨少,一大波JS开发工具函数来了》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《手把手教你JS 异步编程六种方案【实践】》

《让你减少加班的15条高效JS技巧知识点汇总【实践】》

《手把手教你JS开发H5游戏【黄金矿工】》

《手把手教你JS实现监控浏览器上下左右滚动》

《JS 经典实例知识点整理汇总【实践】》

《2.6万字JS干货分享,带你领略前端魅力【基础篇】》

《2.6万字JS干货分享,带你领略前端魅力【实践篇】》

《简单几步让你的 JS 写得更漂亮》

《恭喜你获得治疗JS this的详细药方》

《谈谈前端关于文件上传下载那些事【实践】》

《面试中教你绕过关于 JavaScript 作用域的 5 个坑》

《Jquery插件(常用的插件库)》

《【JS】如何防止重复发送ajax请求》

《JavaScript+Canvas实现自定义画板》

《Continuation 在 JS 中的应用「前端篇」》

译者: 李松峰 奇舞周刊

作者:Dr. Axel Rauschmayer

转发链接:

原文地址:

标签: #翻牌js