Heim > Web-Frontend > js-Tutorial > Datensätze und Tupel: Die neuen unveränderlichen Datentypen von JavaScript.

Datensätze und Tupel: Die neuen unveränderlichen Datentypen von JavaScript.

Christopher Nolan
Freigeben: 2025-02-12 08:25:09
Original
233 Leute haben es durchsucht

Records and Tuples: JavaScript's New Immutable Data Types

JavaScript -Datensätze und Tupel: Die Zukunft unveränderlicher Datenstrukturen

JavaScript steht kurz vor zwei neuen unveränderlichen Datentypen: Datensätze und Tupel. Sie befinden sich derzeit in Phase 2 des TC39 -Standardgenehmigungsprozesses und sind weiterhin verbessert und sind in keiner Browser- oder Laufzeitumgebung verfügbar. Implementierungsversionen werden jedoch voraussichtlich innerhalb des nächsten Jahres verfügbar sein. Sie sollen einige der schwierigen Probleme lösen, mit denen Entwickler bei der Verwendung von Arrays und Objekten konfrontiert sind.

Schlüsselpunkte

  • Aufzeichnungen und Tupel sind neue unveränderliche Datentypen, die in JavaScript entwickelt werden, und werden voraussichtlich im nächsten Jahr verfügbar sein. Sie sind so konzipiert, dass sie Herausforderungen für Entwickler lösen, z.
  • Tupel sind Array-ähnliche Datenstrukturen mit unveränderlicher Tiefe. Sie können keine nicht festgelegten Werte haben, sie können nur Grundtypen, andere Tupel oder Datensätze festlegen. Tupel sind primitive Typen, sodass Sie mit anderen Tupeln nach Wert vergleichen können.
  • Datensätze sind Datenstrukturen, die wie Objekte mit unveränderlicher Tiefe ähnlich sind. Sie müssen String -Attributnamen verwenden und können nur Werte mit primitiven Typen, anderen Tupeln oder Datensätzen festlegen. Datensätze können mit anderen Datensätzen ausführlich verglichen werden, und die Reihenfolge der Attribute ist irrelevant.

Einschränkungen von const

erfahrene JavaScript -Entwickler wissen, dass die Verwendung von const zur Deklaration von Variablen Best Practice ist. Es macht Variablen unveränderlich. Der Wert kann nicht geändert werden, daher müssen Sie sich mit weniger Problemen befassen.

Leider kann const die Basiswerte nur unveränderlich machen (Zeichenfolgen, Zahlen, Bigint, Booleans, Symbole und undefinierte). Sie können Arrays oder Objekte nicht neu zuweisen, aber die Werte und Eigenschaften, die sie enthalten, sind können geändert werden. Zum Beispiel:

Gleiches gilt für die
// 数组常量
const myArray = [1, 2, 3];

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

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

myArray = 'change'; // 错误!
Nach dem Login kopieren
Nach dem Login kopieren
-Objekte:

Die
// 对象常量
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'; // 错误!
Nach dem Login kopieren
Nach dem Login kopieren

Methode kann helfen, wendet jedoch nur das flache Einfrieren auf die direkten Kindereigenschaften des Objekts an: Object.freeze()

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 } }
Nach dem Login kopieren
Nach dem Login kopieren
Daher ist es schwierig sicherzustellen, dass Funktionen die in Arrays oder Objekten gespeicherten Werte nicht absichtlich oder unbeabsichtigt ändern. Entwickler lassen die Dinge entweder in Ruhe oder passieren geklonte Versionen von Variablen - (dies hat auch seine eigenen Herausforderungen).

inkonsistenter Vergleich

kann mehr Verwirrung auftreten, wenn Entwickler versuchen, scheinbar vernünftige Objekte oder Array -Vergleiche zu machen:

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
Nach dem Login kopieren
Nach dem Login kopieren
Nur die Grundtypen können nach Wert verglichen werden. Objekte und Arrays werden mit Referenz

übergeben und verglichen. Nur wenn zwei Variablen auf das gleiche Element im Speicher hinweisen, sind sie gleichermaßen:

Tiefvergleich von zwei Objekten oder Arrays erfordert eine rekursive Vergleichsfunktion, um jeden Wert wiederum zu bewerten. Selbst dann haben Sie möglicherweise Probleme mit Typen wie Daten oder Funktionen, die auf unterschiedliche Weise gespeichert werden können.
const a = [1, 2];

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

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

// 原始数组已更改
console.log(a); // [1, 2, 3]
Nach dem Login kopieren
Nach dem Login kopieren

Tupel: Unveränderliche Array-ähnliche Datenstruktur

Tupel sind Array-ähnliche Datenstrukturen mit unveränderlicher Tiefe. Sie sind tatsächlich zusammengesetzte primitive Typen, die mit dem # -Modifikator vor der normalen Array -Syntax identifiziert wurden:

// 数组常量
const myArray = [1, 2, 3];

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

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

myArray = 'change'; // 错误!
Nach dem Login kopieren
Nach dem Login kopieren

oder die neue Tuple.from() Methode kann ein Tupel aus einem Array erstellen:

// 对象常量
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'; // 错误!
Nach dem Login kopieren
Nach dem Login kopieren

Im Gegensatz zu Standard -Arrays müssen Tupel die folgenden Anforderungen erfüllen:

  1. Sie können keine leeren Räume mit einem Wert von undefined haben. Zum Beispiel ist #[1,,,4] ungültig.
  2. Sie können nur Grundtypen, andere Tupel oder Datensätze festlegen. Arrays, Objekte oder Funktionen dürfen nicht verwendet werden:
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 } }
Nach dem Login kopieren
Nach dem Login kopieren

Da Tupel grundlegende Typen sind, können Sie Tiefe mit anderen Tupeln nach Wert vergleichen:

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
Nach dem Login kopieren
Nach dem Login kopieren

Beachten Sie, dass Sie den lockeren == -Operator zum Vergleich verwenden können, wenn das Tupel einen einzelnen Wert enthält. Zum Beispiel:

const a = [1, 2];

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

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

// 原始数组已更改
console.log(a); // [1, 2, 3]
Nach dem Login kopieren
Nach dem Login kopieren

Aufzeichnung: unveränderliche objektähnliche Datenstruktur

Datensätze sind Datenstrukturen, die wie Objekte mit unveränderlicher Tiefe ähnlich sind. Auch hier handelt es sich um zusammengesetzte primitive Typen, die mit dem # -Modifikator vor der normalen Objektsyntax identifiziert wurden:

// 新的元组
const t1 = #[1, 2, 3];
const t2 = #[1, 2, #[3, 4]];
Nach dem Login kopieren

oder der neue Record() Konstruktor kann einen Datensatz aus einem Objekt erstellen:

// 从数组创建新的元组
const t3 = Tuple.from([1, 2, 3]);
Nach dem Login kopieren

oder Record.fromEntries() Methode kann einen Datensatz aus einer Reihe von Array- oder Tuple-Schlüsselwertpaaren erstellen:

const t4 = #[new Date()]; // 错误(设置一个对象)
const t5 = #[1, 2, [3, 4]]; // 错误(设置一个数组)
Nach dem Login kopieren

Im Gegensatz zu Standardobjekten müssen Aufzeichnungen die folgenden Anforderungen erfüllen:

  1. Sie müssen String -Attributnamen verwenden. Zum Beispiel ist #{ Symbol(): 1 } ungültig.
  2. Sie können nur Werte mit primitiven Typen, anderen Tupeln oder Datensätzen festlegen. Arrays, Objekte oder Funktionen dürfen nicht verwendet werden:
const t6 = #[1, 2];

console.log(t6 === #[1, 2]); // true
Nach dem Login kopieren

Datensätze können eingehend mit anderen Datensätzen verglichen werden, und die Reihenfolge der Attribute ist irrelevant:

const t7 = #[99];

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

// 元组不能与数组比较
console.log(t7 == [99]);  // false
Nach dem Login kopieren

Datensätze können nur mit anderen Datensätzen verglichen werden, sodass es keinen Unterschied zwischen der Verwendung der == oder === -Operatoren gibt. Object.keys() und Object.values() können jedoch für spezifische Vergleiche extrahiert werden. Zum Beispiel:

// 新的记录
const r1 = #{ a: 1, b: 2 };
const r2 = #{
  a: 1,
  b: #{ c: 2 }, // 子记录
  d: #[3, 4]  // 子元组
};
Nach dem Login kopieren

unveränderliches Update

Tupel und Aufzeichnungen klingen nach komplexen Informatikbegriffen, ermöglichen jedoch letztendlich leistungsstarke, unveränderliche Datenspeicherung und Vergleich in JavaScript.

Datensätze und Tupel in JavaScript FAQ

Was ist ein Datensatz in JavaScript? Datensätze in JavaScript sind eine in ECMascript 2022 (ES12) eingeführte objektähnliche Struktur. Es ist so konzipiert, dass es Daten mit benannten Eigenschaften darstellt und standardmäßig unveränderlich ist. Es ist daher für die Verwendung als Datenstruktur geeignet, bei der die Werte nach der Erstellung nicht geändert werden.

Wie ist der Unterschied zwischen Datensätzen und gewöhnlichen JavaScript -Objekten? Im Gegensatz zu normalen Objekten sind Datensätze in JavaScript standardmäßig unveränderlich, und sobald die Eigenschaften festgelegt werden, können sie nicht geändert werden. Die Datensätze sind auch vorhersehbarer und haben strengere Strukturen, sodass sie als Datenbehälter verwendet werden können.

Was sind Tupel in JavaScript? Tupel in JavaScript sind eine geordnete Sammlung von Elementen, wobei jedes Element einen anderen Typ haben kann. Tupel sind unveränderlich und fixiert und bieten eine Möglichkeit, die feste Anzahl von Werten in einer bestimmten Reihenfolge darzustellen und zu verarbeiten.

Wie verbessern Datensätze und Tupel die Lesbarkeit und Wartbarkeit Ihres Codes? Datensätze und Tupel können die Lesbarkeit von Code verbessern, indem eine deklarativere und strukturiertere Möglichkeit zur Darstellung von Daten bereitgestellt wird. Der Aspekt der Unveränderlichkeit hilft auch, zufällige Änderungen zu verhindern, wodurch die Wartbarkeit des Codes verbessert wird.

Gibt es Leistungsüberlegungen bei der Verwendung von Datensätzen und Tupeln? Datensätze und Tupel wirken als unveränderliche Datenstrukturen, die in einigen Fällen die Leistung verbessern können. Der Browserunterstützung und spezifische Anwendungsfälle müssen jedoch berücksichtigt werden, da die Leistungsauswirkungen abhängig von den Implementierungsdetails der JavaScript -Laufzeit variieren können.

Wie kann man Polyfill für Datensätze und Tupel in einer Umgebung ohne native Unterstützung bereitstellen? Ab meinem letzten Update können Datensätze und Tupel in Umgebungen ohne native Unterstützung mit Polyfill oder Übersetzer simuliert werden. Es wird jedoch empfohlen, über Updates für JavaScript -Standards und -Tools auf dem Laufenden zu bleiben, während sich das Ökosystem weiterentwickelt.

Das obige ist der detaillierte Inhalt vonDatensätze und Tupel: Die neuen unveränderlichen Datentypen von JavaScript.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage