×

JavaScript里新的不可变数据类型:记录和元组【Records and Tuples】

作者:Web前端之家2021.01.15来源:Web前端之家浏览:605评论:1
关键词:js
微信公众号

微信公众号

记录和元组是当前在“TC39标准批准流程”的第2阶段中新的JavaScript不可变数据类型。它们可能会有所更改,并且当前在任何浏览器或运行时中均不可用,但是有效的实现应在明年之内到来。他们帮助解决了编码员面临的一些令人困惑的难题……

不断变化【Constant Changes】

专业的JavaScript专家会告诉您,const在可行的情况下,最好的做法是分配变量。它使变量不可变。值无法更改,因此您需要处理的问题更少。

不幸的是,const仅使原始值不可变(字符串,数字,BigInt,布尔值,符号和undefined)。您不能重新分配数组或对象,但是可以修改它们包含的值和属性。例如:

// array constant
const myArray = [1, 2, 3];

// change array values
myArray[0] = 99;
myArray.push(42);

console.log(myArray); // [ 99, 2, 3, 42 ]

myArray = 'change'; // ERROR!

对于对象类似:

// object constant
const myObj = { a: 1, b: 2, c: 3 }

// change object properties
myObj.a = 99;
myObj.d = 42;

console.log(myObj); // { a:99 ,b:2, ,c:3, ,d:42 }

myObj = 'change'; // ERROR!

Object.freeze()方法可以提供帮助,但是仅将浅冻结应用于对象的直接子属性:

const myObj = { a: 1, b: 2, c: { v: 3 } }
Object.freeze(myObj);

myObj.a = 99; // silently ignored
myObj.c.v = 99; // works fine

console.log(myObj); // { a: 1, b: 2, c: { v: 99 } }

因此,很难保证函数不会有意或无意地更改数组或对象中保存的值。开发人员必须希望最好,或者传递变量的克隆版本(这有其自身的挑战)。

等价不等式

当开发人员尝试进行看似合理的对象或数组比较时,可能会导致进一步的混乱:

const str = 'my string';
console.log( str === 'mystring' );  // true

const num = 123;
console.log( num === 123 );         // true

const arr = [1, 2, 3];
console.log( arr === [1, 2, 3] );   // false

const obj = { a: 1 };
console.log( obj === { a: 1 } );    // false

只能按值比较原始类型。对象和数组通过引用进行传递和比较。仅当两个变量指向内存中的相同项目时,它们才是等效的:

const a = [1, 2];

const b = a;
b.push(3);

console.log( a === b ); // true

// original array has changed
console.log( a ); // [1, 2, 3]

深度比较两个对象或数组需要递归比较功能,以便依次评估每个值。即使这样,您仍可能遇到日期或函数等类型的问题,这些问题可能以不同的方式存储。

元组:不可变的类似数组的数据结构

元组是非常不可变的类似数组的数据结构。它们是#在常规数组语法之前用修饰符标识的有效复合原始类型:

// new tuples
const t1 = #[1, 2, 3];
const t2 = #[1, 2, #[3, 4]];

另外,一种新Tuple.from()方法可以从数组创建元组:

// new tuple from an array
const t3 = Tuple.from( [1, 2, 3] );

与标准数组不同,元组必须满足以下要求:

  1. 它们不得带有未设置值的孔。例如,#[1,,,4]无效。

  2. 它们只能设置基元,其他元组或记录。不允许使用诸如数组,对象或函数之类的类型:

const t4 = #[ new Date() ]; // ERROR (sets an object)
  const t5 = #[1, 2, [3, 4]]; // ERROR (sets an array)

由于元组是基元,因此可以将它们与其他元组进行深度比较:

const t6 = #[1, 2];
console.log( t6 === #[1, 2] ); // true

注意,==如果元组持有单个值,则可以使用不太严格的运算符进行比较。例如:

const t7 = #[99];

console.log( t7 == #[99] ); // true
console.log( t7 == 99 );    // true
console.log( t7 == '99' );  // true

// tuple cannot be compared to an array
console.log( t7 == [99] );  // false

记录:不可变的类对象数据结构

记录是一种高度不变的,类似于对象的数据结构。同样,它们是#在普通对象语法之前用修饰符标识的复合基本类型:

// new records
const r1 = #{ a: 1, b: 2 };
const r2 = #{
  a: 1,
  b: #{ c: 2 }, // child record
  d: #[ 3, 4 ]  // child tuple
};

另外,新的Record()构造函数可以从对象创建记录:


// new record from an object// #{ a: 1, b: 2 }const r3 = Record({ a: 1, b: 2 });

或者该Record.fromEntries()方法可以根据一系列数组或元组值对创建记录:

// new record from array of name-values// #{ a: 1, b: 2 }const r4 = Record.fromEntries([
  ['a', 1],
  ['b', 2]]);

与标准对象不同,记录必须满足以下要求:

  1. 它们必须使用字符串属性名称。例如,#{ Symbol(): 1 }无效。

  2. 它们只能使用基元,其他元组或记录来设置值。不允许使用诸如数组,对象或函数之类的类型:

 const r5 = #{ 'd': new Date() };   // ERROR (sets an object)
 const r6 = #{ a: 1, b: { c: 2 } }; // ERROR (sets an object)

记录可以与其他记录进行深度比较,并且属性顺序无关紧要:

const r7 = #{ a: 1, b: 2 };
console.log( r7 === #{ b: 2, a: 1 } ); // true

记录只能与其他记录进行比较,因此使用=====运算符没有区别。但是,可以提取对象keys()values()进行特定比较。例如:

const r8 = #{ a: 99 };
console.log( Object.values(r8) == 99 ); // true

不变的更新

元组和记录听起来可能像复杂的计算机科学术语,但是它们最终将允许健壮的不可变数据存储和JavaScript中的比较。您可以今天使用这种polyfill进行尝试,但是请注意,建议的实施方式可能在未来几个月内发生变化。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210115a2.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 访客

    Windows10要求电脑配置啊。...

  • ab234

    博主辛苦了,这个VUE分享很不错,收藏了。...

  • Web前端之家

    已加上...

  • 访客

    您好,我这边是http://www.liulanqi.com.cn/360/浏览器下载爱站权2,...

  • Web前端之家

    已加上...

  • WordPress主题

    已添加贵站友链网站名称:WordPress主题网站地址:https://www.bigethem...

  • jing35

    不可变数据类型...

  • aboy

    不错的flexbox教程,收藏。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria