English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Teil der täglichen Lerninhalte von JavaScript: Arrays und Objekte

Objektteil 

Object-Typ 

Object ist eine unsortierte Sammlung, die beliebige Arten von Objekten speichern kann, und alle anderen Objekte werden von diesem Objekt abgeleitet. 

Es gibt zwei Arten, Object zu erstellen: mit dem new-Operator und mit der Literalschreibweise. 

1. Erstellen von Object mit dem new-Operator
 var obj = new Object();//Beachten Sie die Großschreibung, sie kann auch direkt als Object() geschrieben werden
Beachten Sie, dass die Schreibweise new Object() zur Erstellung eines neuen Objekts mit der Schreibweise obj = {} äquivalent ist. 

2. Erstellen durch Literalexpression:

 var obj = {
 name : 'trigkit4',
 age : 21
};//Punkt und Komma am besten hinzufügen 

Bei der Verwendung von Literalexpressionen zur Deklaration von Object-Objekten wird der Konstruktorenfunktion Object() nicht aufgerufen (ausgenommen FF) 

Object.prototype-Objekt 

Jeder Konstruktorenfunktion hat eine prototype-Eigenschaft, die auf ein Prototypenobjekt verweist.

Object.prototype.print = function() { console.log(this); };
var obj = new Object();
obj.print(); // Object 

Der Instanz obj wird direkt die Attribute und Methoden von Object.prototype weitergegeben
1.Objekte sind nur eine spezielle Art von Daten. Objekte haben Attribute und Methoden. JavaScript ist eine objektorientierte Sprache, aber JavaScript verwendet keine Klassen. JavaScript basiert auf [prototype][1], nicht auf Klassen basierend.

2.Attribute: sind Variablen, die zu einem bestimmten Objekt gehören. Methoden: sind Funktionen, die nur von einem bestimmten Objekt aufgerufen werden können.

3.js-Objekte sind eine Sammlung von Attributen und Methoden. Eine Methode ist eine Funktion, die ein Mitglied des Objekts ist. Attribute sind Werte oder eine Gruppe von Werten (in Form eines Arrays oder eines Objekts), die ein Mitglied des Objekts sind.

4.js-Objekte basieren auf Konstruktorenfunktionen. Wenn man mit einer Konstruktorenfunktion ein neues Objekt erstellt, kann man sagen, dass man ein neues Objekt instanziert hat. Attribute sind Variablen im Konstruktorenfunktion.
Objekte, die durch Konstruktorenfunktionen instanziert werden:
 cat = new Animal();
Javascript ist eine auf Objekten basierende (object)-In einer auf Objekten basierenden Sprache sind fast alle Dinge, die du siehst, Objekte. Aber es ist auch keine echte objektorientierte Programmiersprache (OOP), da ihre Syntax keine Klassen (class) enthält.

 <script type="text/javascript">
 //Objekte sind Namens/Sammlung von Wertpaaren
  var browser = {  //Objekte sind durch eckige Klammern umgeben
   name:"Firefox",
   kernel:"Gecko"
  };
</script> 
//Objekteigenschaften können durch Punkt (.) oder "[]" erreicht werden
 browser.name   //"Firefox"
 browser["kernel"] //"Gecko" 

Objekte (objct) sind eine Sammlung von Eigenschaften (property), jede Eigenschaft besteht aus einem 'Namen/Wertpaare构成,js definiert ebenfalls ein spezielles Objekt - das Array, das eine geordnete Sammlung von numerierten Werten ist. 

js definiert auch ein spezielles Objekt - die Funktion, die ein Objekt ist, das mit dem zugehörigen ausführbaren Code verbunden ist, und der Code wird durch Aufruf der Funktion ausgeführt und das运算ergebnis zurückgegeben. 

In JavaScript gibt es keine Klassen, aber sie hat einen neuen Namen 'Prototypobjekt' angenommen, daher 'Klasse == Prototypobjekt', Details siehe: JavaScript-Klassen-Schreibweise (I) 

Zwei: Unterschiede und Beziehungen zwischen Klasse (Prototypobjekt) und Objekt (Einzelbeispiel)
1.Klasse (Prototypobjekt) ist abstrakt und konzeptionell, sie stellt eine Art von Dingen dar.
2.Objekte sind konkret und konkret, sie stellen ein konkretes Ding dar.
3.Klasse (Prototypobjekt) ist das Muster für Objekteinzelbeispiele, Objekteinzelbeispiele sind Individuen einer Klasse.
Eine häufige Verwechslung ist, dass die numerischen Literalwerte (literal) keine Objekte sind. Dies liegt daran, dass der JavaScript-Parser einen Fehler macht und versucht, den Punktoperator als Teil eines Fließkommaliterals zu interpretieren. 

Es gibt viele Umgehungsmethoden, um die numerischen Literalwerte so auszusehen, als wären sie Objekte.
2..toString(); // Der zweite Punkt kann normal interpretiert werden
2 .toString(); // Beachten Sie den Leerzeichen vor dem Punkt
(2).toString(); // 2Wird zuerst berechnet

Eigenschaft löschen 

Der einzige Weg, um eine Eigenschaft zu löschen, ist die Verwendung des delete-Operators; das Setzen einer Eigenschaft auf undefined oder null löscht die Eigenschaft nicht wirklich, sondern nur die Verbindung zwischen Eigenschaft und Wert. 

Drei große Merkmale der objektorientierten Programmierung in JavaScript 

Verpackung: Ohne Rücksicht auf die interne Implementierung, nur auf die Funktionsnutzung zu achten
Vererbung: Neue Objekte werden von bestehenden Objekten abgeleitet
Polymorphie: Unter Polymorphie versteht man verschiedene Zustände einer Referenz in verschiedenen Situationen,

1.Verpackung 

Verpackung bedeutet, die Gemeinsamkeiten von Dingen desselben Typs (einschließlich Eigenschaften und Verhalten) in eine Klasse zu gruppieren, um ihre Verwendung zu erleichtern. Zum Beispiel kann der Mensch auf die folgende Weise verpackt werden: 

Person{
 Alter (Eigenschaft eins)
Körpergröße (Eigenschaft zwei)
Geschlecht (Eigenschaft drei)

Tun (Verhalten eins)
Gehen (Verhalten zwei)
Reden (Verhalten dreier)
} 

Vorteile der Verpackung: 

Verpackung schützt die Integrität der internen Daten;
Verpackung macht die Umstrukturierung von Objekten einfacher;
Schwächt die Kopplung zwischen Modulen ab und erhöht die Wiederverwendbarkeit von Objekten;
Hilft dabei, Namensraumkonflikte zu vermeiden;

Betrachten Sie ein Beispiel unten:

 <script type="text/javascript"> 
   var boy = {}; //Erstellen Sie ein leeres Objekt
     boy.name = "Xiaoming";//Nach der Zuweisung der Eigenschaften des Prototype-Objekts
     boy.age = 12;
   Erstellen Sie ein leeres Objekt
     girl.name = "Xiaohong";
     girl.age = 10;
 </script> 

Das ist die einfachste Verpackung, indem zwei Eigenschaften in einem Objekt verpackt werden. Allerdings hat diese Schreibweise zwei Nachteile: erstens wird es sehr lästig, wenn mehrere Instanzen generiert werden, und zweitens gibt es zwischen den Instanzen und dem Prototype keine Möglichkeit, eine Verbindung zu erkennen. 

Konstruktor-Modell 

Um das Problem der Generierung von Instanzen aus dem Prototype-Objekt zu lösen, bietet Javascript ein Konstruktor-Modell (Constructor-Modell) an. 

Ein "Konstruktor" ist eigentlich eine einfache Funktion, die intern das this-Variablen verwendet. Mit dem new-Operator kann ein Beispiel durch den Konstruktor erstellt werden, und das this-Variablen wird auf das Beispielobjekt gebunden. 

Zum Beispiel kann das Prototype-Objekt von boy und girl so written werden:

 <script type="text/javascript"> 
  function Person(name,age){
    this.name = name;
    this.age = age;
  }
</script> 

Jetzt können wir Instanzobjekte generieren.

 <script type="text/javascript"> 
  var boy = new Person("小明",12);
  var girl = new Person("小红",10);
  alert(boy.name); //Xiaoming
  alert(boy.age); //12
</script> 

In diesem Fall enthalten boy und girl automatisch eine constructor-Eigenschaft, die auf ihren Konstruktor verweist.

alert(boy.constructor == Person); //true

alert(girl.constructor); //Geben Sie den gesamten Konstruktorcode aus und probieren Sie es selbst aus
Das Prototype-Modell in Javascript spezifiziert, dass jeder Konstruktor eine prototype-Eigenschaft hat, die auf ein anderes Objekt verweist. Alle Eigenschaften und Methoden dieses Objekts werden von den Instanzen des Konstruktors geerbt. 

Das bedeutet, dass wir unveränderliche Eigenschaften und Methoden direkt im Prototype-Objekt definieren können.

<script type="text/javascript">
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.type = "Mensch";
Person.prototype.eat = function(){
  alert("Essen Reis");
}
</script> 

Dann wird eine Instanz generiert:

 <script type="text/javascript">
var boy = new Person("小明","12");
var girl = new Person("小红","10");
alert(boy.type);//Mensch
boy.eat();//Essen
</script> 

In diesem Fall sind die type-Eigenschaften und die eat()-Methode aller Instanzen tatsächlich die gleiche Speicheradresse, die auf das Prototyp-Objekt verweist, was die Laufzeiteffizienz erhöht.
 alert(boy.eat == girl.eat); //true
Prototyp-Eigenschaften sind eine eingebaute Eigenschaft, die die Konstruktorfunction angibt, die das Objekt erweitert.
 Nachstehender Code fügt dem Konstruktorfunction Animal eine neue Eigenschaft size hinzu, die eine Prototyp-Eigenschaft des cat-Objekts ist. Durch die Verwendung von Prototyp-Eigenschaften können alle Objekte, die den Konstruktorfunction Animal erweitern, auf die Eigenschaft size zugreifen

cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat"; 

In diesem Fall sind alle size-Eigenschaften der Animal-Objekte „fat“. Das Prototyp ist eine neue Instanz von Object, da es sich immer noch um ein Objekt handelt, können neue Eigenschaften diesem Objekt hinzugefügt werden. Das ist so, als wäre style ein Objekt in JavaScript, man kann auch Eigenschaften nach style hinzufügen.

 <script type="text/javascript">
  /*Definieren Sie eine Klasse Person*/
  function Person(_name,_age,_salary){
   //Öffentliche Eigenschaften der Klasse Person, die Art der Definition der öffentlichen Eigenschaften der Klasse ist: „this.Eigenschaftsname“
   this.Name=_name;
   //Private Eigenschaften der Klasse Person, die Art der Definition der privaten Eigenschaften der Klasse ist: „var Eigenschaftsname“
   var Age=_age;
   var Salary=_salary;
   //Definieren Sie die öffentliche Methode (privilegierte Methode) der Klasse Person, die Art der Definition der öffentlichen Methoden der Klasse
ist: „this.functionName=function(){.....}“
   this.Show=function(){
 alert("Age="+Age+"\t"+"Salary="+Salary);//Der Zugriff auf private Eigenschaften der Klasse in öffentliche Methoden ist erlaubt
   }
</script> 

Wenn ein Objekt eine Eigenschaft sucht, durchsucht es zunächst seine eigenen Eigenschaften. Wenn es diese nicht findet, sucht es fortlaufend im [[Prototype]]-Verweis auf das Objekt, und wenn es auch dort keine findet, sucht es im [[Prototype]].[[Prototype]]-Verweis auf das Objekt, und so weiter, bis [[Prototype]].….[[Prototype]] undefined ist (der [[Prototype]] von Object ist undefined) 

Kurz gesagt, es speichert eine Referenz auf ein anderes Objekt durch das [[Prototype]]-Objekt und führt durch diese Referenz eine Eigenschaftssuche aufwärts durch, was die Prototypen-Kette ist. 

null -Objekt 

Der Zweck der Zuweisung von null an eine Variable in JavaScript ist:
Ein Zuweisung einer leeren Zeiger macht es leicht zu verstehen, dass dieser Variable ein Objekt gespeichert werden soll. Es erleichtert auch das Debugging. 

Der globale window-Objekt 

Jede globale Funktion oder Variable in JavaScript ist eine Eigenschaft von window.
Der self-Objekt ist identisch mit dem window-Objekt, self wird normalerweise verwendet, um zu bestätigen, dass es sich um das aktuelle Fenster handelt. 

Die Hauptobjekte von window sind wie folgt:
 JavaScript document -Objekt
JavaScript frames -Objekt
JavaScript history -Objekt
JavaScript location -Objekt
JavaScript navigator -Objekt
JavaScript screen -Objekt

Einige häufig verwendete Methoden
 valueof() -Methode: Gibt den ursprünglichen Wert eines bestimmten Objekts zurück
Die split() -Methode teilt einen String in ein String-Array auf und gibt dieses Array zurück.
Die indexOf() -Methode kann die Position der ersten Erscheinung eines bestimmten Strings im String zurückgeben.   
Die substring() -Methode wird verwendet, um Zeichen aus einem String zwischen zwei bestimmten Indizes zu extrahieren.
Die substr() -Methode extrahiert einen bestimmten Text aus einem String, beginnend an der startPos-Position.   
Die join() -Methode wird verwendet, um alle Elemente eines Arrays in einen String zu setzen.
arrayObject.join(Trennzeichen)
Die reverse() -Methode wird verwendet, um die Reihenfolge der Elemente in einem Array umzukehren.   
Die slice() -Methode kann ausgewählte Elemente aus einem bestehenden Array zurückgeben.

Objektdefinition 

Eine Objektdefinition wird verwendet, um Prozesse zu erstellen, die viele Attribute enthalten, wie folgt gezeigt:

 <script type="text/javascript">
 var company = {
  name: "Microsoft",
  ages: 39,
  employees: 99000,
  CEO: "Nadella"
 };  
</script> 

Hier ist zu beachten, dass Attribut und Attributwert durch Doppelpunkt (:) getrennt sind; mehrere Attribute werden durch Komma (,) getrennt. Eine Objektdefinition kann auch Methoden enthalten, indem man einfach 'function' auf den Eigenschaften des Objekts schreibt. Dies ist eine anonyme Funktion, um sie aufzurufen, muss man nur den Methodennamen () angeben.

 <script type="text/javascript">
var dog = {
 name:"husky",
 age:2,
 run:function(){
    return "123";
}
}
alert(dog.run());//Wenn input dog.run, wird der Code im hinteren function-Teil ausgegeben
</script> 

Basic-Werttypen-Wrap 

js hat fünf grundlegende Werttypen: number, string, Boolean, null und undefined. Außer null und undefined haben die anderen drei sogenannte Basic-Wrap-Objekte. Man kann Packungsobjekte mit den eingebauten Konstruktoren Number(), String() und Boolean() erstellen.

 var num = new Number(10);
console.log(typeof num);//object 
Object() Methode
 Object(); // Gibt ein leeres Objekt zurück
Object(undefined); // Gibt ein leeres Objekt zurück
Object(null); // Gibt ein leeres Objekt zurück
Object(1) // Ist äquivalent zu new Number(1)
Object('foo'); // Ist äquivalent zu new String('foo')
Object(true); // Ist äquivalent zu new Boolean(true)
Object([]); // Gibt das ursprüngliche Array zurück
Object({}); // Gibt das ursprüngliche Objekt zurück
Object(function(){}); // Gibt die ursprüngliche Funktion zurück 

Array-Teil 

1.Array-Objekt 

Array-Objekt: Bietet Unterstützung für die Erstellung von Arrays jeglicher Datenart.
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

Definition: var arr = [2,3,45,6]); var arr = new Array(2,4,5,7) 

Es gibt keinen Unterschied zwischen beiden in der Definition, [] hat eine höhere Leistung, weil der Code kürzer ist. 

Verwenden Sie Array- und Objekt-Literal: var aTest = []; Eine Array-Literal ist eine gute Wahl beim Erstellen von Arrays; Ähnlich kann ein Objekt-Literal auch verwendet werden, um Platz zu sparen. Die folgenden beiden Zeilen sind gleich, aber die Verwendung eines Objekt-Literals ist kürzer:

 var oTest = new Object; //Vermeiden Sie es,
 var oTest = { }; //Die beste Wahl, oder var 0Test = [ ]; 

Durchsuchen Um die beste Leistung beim Durchsuchen eines Arrays zu erzielen, wird empfohlen, den klassischen for-Loop zu verwenden.

 var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
 console.log(list[i]);
} 

Der obige Code hat eine Bearbeitung, nämlich das Cachen der Länge des Arrays durch l = list.length. 

Array-Konstruktor 

Da der Array-Konstruktor in Bezug auf die Verarbeitung von Parametern etwas vage ist, wird empfohlen, die schriftliche Syntax der Arrays zu verwenden. - [] - um ein Array zu erstellen. 

Daher könnte das folgende Codebeispiel verwirrend sein:
 new Array(3, 4, 5); // Ergebnis: [3, 4, 5]
new Array(3) // Ergebnis: [], die Länge dieses Arrays beträgt 3
Vermeiden Sie es, neue Arrays mit dem Array-Konstruktor zu erstellen. Es wird empfohlen, die schriftliche Syntax der Arrays zu verwenden. Sie sind kürzer und prägnanter, was die Lesbarkeit des Codes erhöht. 

Die Attribute des Array-Arrays 

Das Array-Array3Attribute: Das length-Attribut, das prototype-Attribut und das constructor-Attribut 

1.length-Eigenschaft 

Das length-Attribut gibt die Länge des Arrays an, d.h. die Anzahl der Elemente. Da die Indizes der Arrays immer von 0 beginnen, sind die Obergrenzen eines Arrays: 0 und length-1. Und anders als in den meisten anderen Sprachen ist das length-Attribut eines JavaScript-Arrays veränderlich, was besonders beachtet werden muss. 

2.prototype-Eigenschaft 

Gibt eine Referenz auf das Prototyp-Objekt des Objekts zurück. Das prototype-Attribut ist bei object gemeinsam. 

Für das Array-Objekt Array wird die Verwendung der prototype-Eigenschaft mit folgendem Beispiel erläutert.
 Fügen Sie eine Methode hinzu, die den größten Wert eines Arrays zurückgibt, zum Array-Objekt. Um dies zu erreichen, deklarieren Sie eine Funktion, fügen Sie sie zu Array.prototype hinzu und verwenden Sie sie.

 function array_max() 
{ 
var i,max=this[0]; 
for(i=1;i<this.length;i++) 
{ 
if(max<this[i]) 
max=this[i]; 
} 
return max; 
} 
Array.prototype.max=array_max; 
var x=new Array(1,2,3,4,5,6); 
var y=x.max(); 

Nach der Ausführung dieses Codes speichert y den größten Wert des Arrays x, oder anders gesagt6. 

3.constructor-Attribut 

stellt die Funktion dar, die ein Objekt erstellt. Erklärung: Das constructor-Attribut ist ein Mitglied aller Objekte, die ein prototype haben. Dazu gehören alle festen JScript-Objekte außer Global und Math-Objekten. Das constructor-Attribut speichert eine Referenz auf die Funktion, die spezifische Objektkontexte erstellt. 

Zum Beispiel:

 x = new String("Hi"); 
if(x.constructor==String) //verarbeitet werden (Bedingung wahr). 
//oder 
function MyFunc{ 
//Funktionshauptteil. 
} 
y=new MyFunc; 

if(y.constructor==MyFunc)//verarbeitet werden (Bedingung wahr).
Für Arrays:
 y = new Array();

Array Objekt Methode

sort() Methode 

Syntax
arrayObject.sort(sortby)
sortby optional. Bestimmt die Sortierreihenfolge. Muss eine Funktion sein.
var arr = [11,2,28,4,5,1});
console.log(arr.sort());//return [1, 11, 2, 28, 4, 5]
Warum hier11、28Wieso sind die Elemente nicht in der richtigen Reihenfolge angeordnet? Weil der sort ohne Parameter die Elemente nach dem Zeichencodierungsschema sortiert. 

Wie kann man die Elemente eines Arrays von klein nach groß sortieren? Sehen Sie sich den folgenden Code an:

 var arr = [11,2,28,4,5,1});
 console.log(arr.sort(function(a,b){
  return a-b;//return [1, 2, 4, 5, 11, 28]
 }); 

Wenn eine andere Sortierkriterien verwendet werden soll, muss eine Vergleichsfunktion bereitgestellt werden, die zwei Werte vergleicht und eine Nummer zurückgibt, die die relative Reihenfolge dieser Werte beschreibt. Die Vergleichsfunktion sollte zwei Parameter a und b haben und wie folgt zurückgeben:
 Wenn a kleiner als b ist und a im sortierten Array vor b stehen sollte, wird ein Wert kleiner 0 zurückgegeben.
Wenn a gleich b ist, wird 0 zurückgegeben.
Wenn a größer als b ist, wird ein Wert größer 0 zurückgegeben.

Das ist der Schluss des Artikels. Ich hoffe, es hat Ihnen bei Ihrem Lernen geholfen und ich hoffe, dass Sie die Anleitung weiterempfehlen.

Empfohlene Artikel