レコードとタプル：JavaScript＆＃x27;の新しい不変のデータ型

JavaScriptのレコードとタプル：不変のデータ構造の未来

JavaScriptは、レコードとタプルという2つの新しい不変のデータ型を案内しようとしています。現在、TC39標準承認プロセスのフェーズ2にあり、まだ改善されており、ブラウザやランタイム環境では利用できませんが、実装バージョンは来年中に利用可能になると予想されます。それらは、アレイやオブジェクトを使用するときに開発者が直面する厳しい問題のいくつかを解決するように設計されています。

キーポイント

• レコードとタプルは、JavaScriptで開発中の新しい不変のデータ型であり、来年中に利用可能になると予想されます。それらは、機能がアレイまたはオブジェクトに保存された値を意図的にまたは意図せずに変更しないようにするなど、開発者が直面する課題を解決するように設計されています。
• タプルは、不変の深さのアレイのようなデータ構造です。彼らは絶え間ない値を持つことができず、基本的なタイプ、その他のタプル、またはレコードのみを設定することができます。タプルは原始的なタイプなので、価値ごとに他のタプルと深く比較できます。
• レコードは、不変の深さのオブジェクトに似たデータ構造です。それらは、文字列属性名を使用する必要があり、プリミティブタイプ、その他のタプル、またはレコードで値を設定することができます。レコードは他のレコードと深く比較でき、属性の順序は無関係です。

const

の制限

経験豊富なJavaScript開発者は、変数を宣言するためにconstを使用することがベストプラクティスであることを知っています。変数を不変にします。値を変更できないため、より少ない問題に対処する必要があります。

残念ながら、constはベース値を不変にすることのみができます（文字列、数字、ビッグインチ、ブール人、シンボル、未定義）。アレイやオブジェクトを再割り当てすることはできませんが、それらに含まれる値とプロパティはに変更できます。たとえば、

同じことが

<code class="language-javascript">// 数组常量
const myArray = [1, 2, 3];

// 更改数组值
myArray[0] = 99;
myArray.push(42);

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

myArray = 'change'; // 错误！</code>

オブジェクトにも当てはまります：

<code class="language-javascript">// 对象常量
const myObj = { a: 1, b: 2, c: 3 };

// 更改对象属性
myObj.a = 99;
myObj.d = 42;

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

myObj = 'change'; // 错误！</code>

メソッドは役立ちますが、オブジェクトの直接子の特性に浅い凍結のみを適用します。 Object.freeze() したがって、関数がアレイまたはオブジェクトに保存された値を意図的または意図せずに変更しないようにすることは困難です。開発者は、物事をそのままにしておくか、バージョンのバージョンの変数を渡す - これには独自の課題もあります）。

<code class="language-javascript">const myObj = { a: 1, b: 2, c: { v: 3 } };
Object.freeze(myObj);

myObj.a = 99; // 静默忽略
myObj.c.v = 99; // 可以正常工作

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

一貫性のない比較

開発者が一見合理的なオブジェクトまたは配列の比較を作成しようとすると、さらに混乱が発生する可能性があります：

値で比較することができます。オブジェクトと配列は渡され、参照

によって比較されます。 2つの変数がメモリ内の同じアイテムを指している場合にのみ、それらは等しくなります。

<code class="language-javascript">const str = 'my string';
console.log(str === 'mystring');  // false

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</code>

2つのオブジェクトまたは配列の深い比較には、各値を順番に評価するために再帰的な比較関数が必要です。それでも、さまざまな方法で保存される可能性のある日付や関数などのタイプに問題がある場合があります。

タプル：不変のアレイのようなデータ構造

タプルは、不変の深さのアレイのようなデータ構造です。それらは実際には、通常の配列の構文の前に#モディファイアと識別される複合原始タイプです：

<code class="language-javascript">// 数组常量
const myArray = [1, 2, 3];

// 更改数组值
myArray[0] = 99;
myArray.push(42);

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

myArray = 'change'; // 错误！</code>

または、新しいTuple.from()メソッドは、配列からタプルを作成できます：

<code class="language-javascript">// 对象常量
const myObj = { a: 1, b: 2, c: 3 };

// 更改对象属性
myObj.a = 99;
myObj.d = 42;

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

myObj = 'change'; // 错误！</code>

標準配列とは異なり、タプルは次の要件を満たす必要があります。

値の空のスペースを持つことはできません。たとえば、
1. は無効です。 undefined #[1,,,4]基本的なタイプ、その他のタプル、またはレコードのみを設定できます。配列、オブジェクト、または関数を使用することは許可されていません。
タプルは基本的なタイプであるため、深さを他のタプルと価値ごとに比較できます。

<code class="language-javascript">const myObj = { a: 1, b: 2, c: { v: 3 } };
Object.freeze(myObj);

myObj.a = 99; // 静默忽略
myObj.c.v = 99; // 可以正常工作

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

タプルに単一の値が含まれている場合、比較のためにゆるい

演算子を使用できることに注意してください。たとえば、

<code class="language-javascript">const str = 'my string';
console.log(str === 'mystring');  // false

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</code>

レコード：不変のオブジェクトのようなデータ構造==

レコードは、不変の深さのオブジェクトに似たデータ構造です。繰り返しますが、それらは複合原始タイプであり、通常のオブジェクトの構文の前に

<code class="language-javascript">const a = [1, 2];

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

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

// 原始数组已更改
console.log(a); // [1, 2, 3]</code>

モディファイアを使用して識別されます。

または、新しい

コンストラクターは、オブジェクトからレコードを作成できます。 #

または

<code class="language-javascript">// 新的元组
const t1 = #[1, 2, 3];
const t2 = #[1, 2, #[3, 4]];</code>

メソッドは、一連の配列またはタプルのキーと価値のペアからレコードを作成できます：

Record()

標準オブジェクトとは異なり、レコードは次の要件を満たす必要があります。

<code class="language-javascript">// 从数组创建新的元组
const t3 = Tuple.from([1, 2, 3]);</code>

文字列属性名を使用する必要があります。たとえば、Record.fromEntries()は無効です。

<code class="language-javascript">const t4 = #[new Date()]; // 错误（设置一个对象）
const t5 = #[1, 2, [3, 4]]; // 错误（设置一个数组）</code>

プリミティブタイプ、その他のタプル、またはレコードを使用して値を設定できます。配列、オブジェクト、または関数を使用することは許可されていません。

レコードは他のレコードと深く比較でき、属性の順序は無関係です。
1. #{ Symbol(): 1 }レコードは他のレコードとのみ比較できます。そのため、
または
2. オペレーターを使用することに違いはありません。ただし、特定の比較のために
および

を抽出できます。たとえば、

<code class="language-javascript">const t6 = #[1, 2];

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

不変のアップデート

<code class="language-javascript">const t7 = #[99];

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

// 元组不能与数组比较
console.log(t7 == [99]);  // false</code>

タプルとレコードは複雑なコンピューターサイエンスの用語のように聞こえますが、最終的にはJavaScriptの強力な不変のデータストレージと比較を可能にします。 == JavaScript FAQ ===のレコードとタプル Object.keys() JavaScriptのレコードとは何ですか？ JavaScriptのレコードは、ECMAScript 2022（ES12）で導入されたオブジェクトのような構造です。名前付きプロパティを使用してデータを表すように設計されており、デフォルトでは不可能であるため、作成後に値が変更されないデータ構造として使用するのに適しています。 Object.values()

レコードと通常のJavaScriptオブジェクトの違いはどうですか？通常のオブジェクトとは異なり、JavaScriptのレコードはデフォルトで不可能であり、一度設定すると、それらのプロパティを変更できません。また、レコードはより予測可能であり、より厳しい構造を持っているため、データコンテナとして使用するのに適しています。

<code class="language-javascript">// 新的记录
const r1 = #{ a: 1, b: 2 };
const r2 = #{
  a: 1,
  b: #{ c: 2 }, // 子记录
  d: #[3, 4]  // 子元组
};</code>

JavaScriptのタプルは何ですか？ JavaScriptのタプルは、各要素が異なるタイプになる可能性のある要素の順序付けられたコレクションです。タプルは不変で長さが固定されており、特定の順序で固定数の値を表現および処理する方法を提供します。

レコードとタプルは、コードの読みやすさと保守性をどのように高めますか？レコードとタプルは、データを表すためのより宣言的で構造化された方法を提供することにより、コードの読みやすさを向上させることができます。不変性の側面は、偶発的な変更を防ぐのにも役立ち、それによりコードの保守性が向上します。

レコードやタプルを使用する際にパフォーマンス上の考慮事項はありますか？レコードとタプルは不変のデータ構造として機能し、場合によってはパフォーマンスを改善できます。ただし、パフォーマンスの影響はJavaScriptランタイムの実装の詳細によって異なる場合があるため、ブラウザのサポートと特定のユースケースを考慮する必要があります。

ネイティブサポートのない環境でレコードやタプルにポリフィルを提供する方法は？私の前回の更新時点で、レコードとタプルは、ポリフィルまたは翻訳者を使用してネイティブサポートなしで環境でシミュレートできます。ただし、エコシステムが進化し続けるにつれて、JavaScriptの標準とツールの更新を最新の状態に保つことをお勧めします。

以上がレコードとタプル：JavaScript＆＃x27;の新しい不変のデータ型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。