Eine kurze Analyse der JavaScript-Grundtypen und Referenztypen_Grundkenntnisse

Für JavaScript-Typen kann es einfach wie folgt zusammengefasst werden: Im Vergleich zu stark typisierten Sprachen handelt es sich um eine schwach typisierte (lose) typisierte Sprache. Der Unterschied zwischen ihnen besteht darin, dass es einen festen Raum gibt Im Stapelspeicher wird ein nicht festgelegter Speicherplatz im Heapspeicher und ein Zeiger auf den Implementierungsort im Stapelspeicher gespeichert.

Viele Bücher auf dem Markt bieten viel Platz, um darüber zu sprechen. In diesem Artikel werden mehrere Aspekte behandelt, die möglicherweise grundlegende Kenntnisse von JavaScript, insbesondere von JavaScript-Typen, erfordern. Wenn Sie es immer noch nicht verstehen, können Sie sich ein Buch über JavaScript besorgen und es lesen, bevor Sie diesen Artikel lesen.

1. Grundtypen und Referenztypen

1. Grundtypen: Undefiniert/Null/Boolesch/Zahl/String
2. Referenztypen: Objekt/Array/Funktion/Datum/RegExp/Fehler/Map/Set…

Warum wurden die Referenztypen nicht aufgezählt? Weil es für Sie ausreicht, so viel zu wissen, zumindest für diesen Artikel, über den ich spreche. Andere werden möglicherweise selten verwendet, und selbst Dinge wie Map und Set werden nicht von allen Browsern unterstützt.

2. Beurteilung des JavaScript-Typs

Es gibt zwei Operatoren in JavaScript, die zur Bestimmung von Typen verwendet werden können. Sie sind Typof und Instanzof, aber der Kreis ist sehr klein, sie passen nicht gut zusammen und sie sind bekanntermaßen unzuverlässig. In einigen Fällen ist es korrekt, in vielen Fällen jedoch unzuverlässig. Werfen Sie einfach einen Blick darauf und Sie werden es wissen:

Code kopieren Der Code lautet wie folgt:

// Wenn zuverlässig:
typeof ' sofish' // string
new String('sofish') Instanz von String // true

// Wenn unzuverlässig:
typeof [] // object
typeof null // object
'sofish' instanceof String // false

Hmm~ Vielleicht werden viele JavaScript-Anfänger aus diesem Grund fluchen. Die meisten Leute haben bereits Bibliotheken wie jQuery, wenn sie JS verwenden müssen. Sie haben sie gekapselt, damit Sie Typen leicht erkennen können. Tatsächlich ist die Erkennung natürlich nicht schwierig, da das Sprichwort „In JavaScript ist alles ein Objekt“ natürlich, wie in vielen Dokumenten erwähnt, undefiniert eigentlich nur eine globale Eigenschaft wie NaN und Infinity ist. Das wissen Sie wahrscheinlich. Aber „Objekt“ kann uns helfen:

Code kopieren Der Code lautet wie folgt:

/ * Erkennungsobjekttyp
* @param: obj {JavaScript-Objekt}
* @param: Typ {String} JS-Typname, beginnend mit Großbuchstaben
* @return: {Boolean}
*/
function is(obj, type) {
return Object.prototype.toString.call(obj).slice(8, -1) === type;
}

In diesem Fall können wir die Funktion is verwenden, um den Typ zu bestimmen. Diese einfache Funktion ist gut kompatibel und kann in Ihrem Projekt verwendet werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

is('sofish', 'String' ) // true
is(null, 'Null') // true
is(new Set(), 'Set') // true

3. JavaScript-Typkonvertierung

In JavaScript kann der Typ von Variablen (Eigenschaften) geändert werden. Am häufigsten kommt die Konvertierung zwischen String und Number vor. Wie verwandelt man aus 1 „2“ 12? Es ist notwendig, den Operator zu verstehen, bei dem es sich in JavaScript um einen mathematischen Operator und einen String-Bindestrich handelt. Daher werden Anfänger oft ein interessantes Phänomen beobachten. Bei der Verwendung des Zeichens ist die Berechnung manchmal nicht das, was sie wollen, aber die Verwendung des - Zeichens kann immer die „richtige“ Antwort erhalten.

Code kopieren Der Code lautet wie folgt:

1 '2' // '12'
1 ( '2') // 3
1 - '2' // -1

Dies wird tatsächlich durch die Doppelrolle von verursacht. Im obigen Code können Sie feststellen, dass der zweite Ausdruck eine Zahl vor String verwendet, was die Konvertierung seiner Klasse in Number erzwingt. Für das Verständnis der JavaScript-Typkonvertierung reicht es in den meisten Fällen aus, zu verstehen, dass sie eine Doppelrolle hat. Andere verständliche Klassen können durch Zuweisung/Überladung geändert werden, einschließlich Fehler:

Code kopieren Der Code lautet wie folgt:

var err = new Error();
console .log(err instanceof Error); // true

err = 'sofish';
console.log(err); // 'sofish'

4. JavaScript-Referenztypen

Dies ist eine Schwierigkeit in diesem Artikel. Im Vergleich zu Basistypen können Referenzen Eigenschaften und Methoden hinzufügen. Ein referenzähnlicher Wert ist eine Referenz, und ein Wert eines Referenztyps wird einer Variablen zugewiesen, und sie verweisen auf denselben im Heapspeicher gespeicherten Wert. Variablen (Eigenschaften) können überladen sein, aber das Kopieren kann eine sehr interessante Sache sein, wir werden später ausführlich darauf eingehen.

1. Eigenschaften und Methoden hinzufügen

Wir werden im folgenden Code sehen, dass, wenn wir einen grundsätzlich ähnlichen Wert zuweisen, kein Fehler gemeldet wird, dieser jedoch beim Abrufen ungültig ist:

Code kopieren Der Code lautet wie folgt:

var arr = [1,2,3];
arr.hello = 'world';
console .log(arr.hello); // 'world'

var str = 'sofish';
str.hello = 'world';
console.log(str.hello); // undefiniert

2. Operationen an Referenztypwerten

Da der Referenztyp als Referenz im Stapelspeicher gespeichert ist und wir auf denselben ursprünglichen Wert verweisen, wirkt sich die Operation auf den Wert hier auf alle Referenzen aus (nicht auf die Operation des Werts). Direkte Manipulation) erstellt ein Objekt neu, ohne den ursprünglichen Wert zu ändern. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var arr = [1, 2,3] , sofish = arr;
sofish.push('hello world');
console.log(arr); // [1, 2, 3, 'hello world']

//Nicht identischer Typ
sofish = ['not a fish'] // Wenn sofish auf ähnliche Weise geändert wird, wird der ursprüngliche Wert nicht geändert
console.log(arr);// [ 1, 2, 3, 'Hallo Welt']

3. Referenztypwerte kopieren

Operationen am ursprünglichen Wert wirken sich auf alle Referenzen aus, was nicht unbedingt das ist, was wir wollen. Manchmal müssen wir ein brandneues Objekt kopieren, ohne andere Referenzen während der Operation zu beeinflussen. Im Allgemeinen gibt es nur wenige spezifische Vorgänge wie Datum/Funktion/RegExp..., hauptsächlich Vorgänge wie das Hinzufügen von Elementen und Eigenschaften zu Array und Objekt. Das Wichtigste, was wir also verstehen müssen, ist, wie man Array- und Objektobjekte kopiert.

3.1 Arrays kopieren

Im Array-Objekt gibt es eine Slice-Methode, die ein abgefangenes Array zurückgibt. In ES5 geben Filter usw. auch ein neues Array zurück, sodass wir diese Methode zum Kopieren verwenden können.

Code kopieren Der Code lautet wie folgt:

var arr = [1, 2, 3 ];
var sofish = arr.slice();

// Der Betrieb des neuen Arrays hat keine Auswirkungen auf das ursprüngliche Array
sofish.push('hello world');
console.log(arr); // [1, 2, 3]

3.2 Kopie von Objekten

Wir verwenden die Slice-Methode, um Array zu kopieren. Tatsächlich können wir sowohl für Array als auch für Objekt die for ... in-Schleife verwenden, um zu kopierende Werte zu durchlaufen.

Code kopieren Der Code lautet wie folgt:

var obj = { name: 'sofish' }, sofish = {}, p;
for (p in obj) sofish[p] = obj[p];

//Vorgänge an neuen Objekten haben keinen Einfluss auf den ursprünglichen Wert
sofish.say = function() {};
console.log(obj); // { name: 'sofish' }

3.3 Schatten / Tiefenkopie

Operationen wie die oben genannten werden oft als flache Kopie (Schattenkopie) bezeichnet. Allerdings können sowohl Array als auch Objekt mehrere Ebenen (Dimensionen) haben. Eine solche Kopie berücksichtigt nur den Wert der obersten Ebene. Array und Objekt verweisen immer noch auf das ursprüngliche Objekt. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var arr = [1, { bio: 'kein Fisch' } ], sofish = [], p;
for(p in arr) {
sofish[p] = arr[p];
}

// Operationen auf dem in „sofish“ enthaltenen Objekt „cat“ wirken sich auf den ursprünglichen Wert aus
sofish[1].bio = 'hackable';
console.log(arr);// [1 , cat: { bio: 'hackable' } ]

Wie geht das? Lassen Sie uns eine copy()-Funktion verwenden, um dieses Problem zu lösen:

Code kopieren Der Code lautet wie folgt:

/* Objekt kopieren
* @param: obj {JavaScript-Objekt} Originalobjekt
* @param: isDeep {Boolean} Ob es sich um eine tiefe Kopie handelt
* @return: {JavaScript Object} Ein neues Objekt zurückgeben
*/
function copy(obj, isDeep) {
var ret = obj.slice ? [] : {}, p, prop;
// Verwendung mit is function
if(!isDeep && is(obj, 'Array')) return obj.slice();
for(p in obj) {
if(!obj.hasOwnProperty(p)) continue;
prop = obj[p];
ret[p] = (is(prop, 'Object') || is(prop, 'Array')) ?
copy(prop, isDeep) : prop ;
}
return ret;
}

Auf diese Weise können wir ein Array oder Objekt über die Funktion copy(obj, isDeep) kopieren. Sie können es testen:

Code kopieren Der Code lautet wie folgt:

var arr = [ 1, {bio: 'kein Fisch'}];
var sofish = copy(arr);

// Der flache Kopiervorgang auf der ersten Ebene wirkt sich nicht auf den ursprünglichen Wert aus, sondern auf die zweite Ebene
sofish.push('cat'); 1, {bio: 'kein Fisch'}]
sofish[1].bio = 'hello world';
console.log(arr) // [1, {bio: 'hello world'}]

// Tiefes Kopieren hat keinen Einfluss auf den Originalwert

sofish = copy(arr, 1);
sofish[1].bio = 'foo or bar';
console.log(arr) ; // [1, {bio: 'hello world'}]

Das ist es. Grundsätzlich sollten Sie alle schwierigen Punkte zu Typen verstehen, die Sie verstehen müssen. Natürlich ist das Kopieren der problematischste Punkt. Zusätzlich zu Array und Objekt, die häufig bearbeitet werden müssen, gibt es auch das Kopieren von Datum/Funktion/RegExp.