Heim Web-Frontend js-Tutorial Beispiele zur Erläuterung relevanter Kenntnisse über Objektoperationen in JavaScript_Grundkenntnisse

Beispiele zur Erläuterung relevanter Kenntnisse über Objektoperationen in JavaScript_Grundkenntnisse

May 16, 2016 pm 03:32 PM
javascript 对象

Vom Array zum Objekt

var myarr = ['red','blue','yellow','purple']; 
myarr;// ["red","blue","yellow","purple"] 
myarr[0];//"red" 
myarr[3];//"purple' 
Nach dem Login kopieren


Jeder ist mit Arrays vertraut. Wir können verstehen, dass ein Schlüssel einem Wert entspricht und dieser Schlüssel bereits im Array voreingestellt ist (wie im obigen Code sind seine Schlüssel 0, 1, 2, 3 und die Werte sind). rot, blau, gelb, lila).
Dann kann ein Objekt als Array benutzerdefinierter Schlüssel verstanden werden. Schauen Sie sich den folgenden Code an

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 
Nach dem Login kopieren


Aus dem obigen Code können wir Folgendes verstehen:
1. Der Name des Objekts ist hero.
2. Anders als beim Array wird das Symbol „{“ anstelle von „[“
verwendet 3. Die Attribute des Objekts (z. B. Rasse und Beruf) werden durch die Symbole ','
getrennt 4. Die Syntax von Schlüssel und Wert lautet KEY:VALUE
Es ist auch wichtig zu beachten, dass die Ergebnisse unabhängig davon, ob das Attribut (d. h. der Schlüssel) in doppelte Anführungszeichen, einfache Anführungszeichen oder keine Anführungszeichen gesetzt wird, gleich sind. Der folgende Code ist derselbe

var obj={a:1,b:2}; 
var obj={'a':1,'b':2}; 
var obj={"a":1,"b":2}; 
Nach dem Login kopieren

Die empfohlene Schreibweise besteht darin, Attribute nicht in Anführungszeichen zu setzen. Es sei denn, der Attributname ist ein spezielles Symbol, beispielsweise eine Zahl, oder enthält Leerzeichen usw.

Dieser Artikel ist sehr einfach. Es ist zu beachten, dass das Symbol zum Definieren eines Arrays [] ist, während das Symbol zum Definieren eines Objekts {}
ist
Element, Attribut, Methode
Wenn wir Arrays lernen, können wir sagen, dass das Array Elemente enthält. Wenn wir über Objekte sprechen, können wir die Aussage ändern

var animal={ 
   name: 'dog', 
   run:function(){ 
    alert("running"); 
  } 
} 
Nach dem Login kopieren

name ist eine Eigenschaft und run selbst ist eine Funktion. In diesem Objekt nennen wir es eine Methode.

Zugriff auf die Eigenschaften eines Objekts
Es gibt zwei Möglichkeiten, auf die Eigenschaften eines Objekts zuzugreifen.
Verwenden Sie die Form eines Arrays wie: animal['name']
Verwenden Sie den Punkt, um auf folgendes zuzugreifen: animal.name
Die erste Zugriffsmethode ist für jede Situation geeignet. Wenn das Attribut jedoch einen ungültigen Namen hat, wie z. B. das im vorherigen Abschnitt erwähnte Attribut „1name“ oder „mein Name“, ist es falsch, mit Punkten darauf zuzugreifen. Dies sollte beachtet werden.

Schauen wir uns ein Beispiel für den Objektzugriff im Detail an

var book = { 
  name:'Javascript Fundation', 
  published:jixie. 
  author:{ 
    firstname:'nicholas', 
    lastname:'xia' 
  } 
}; 
Nach dem Login kopieren


1. Rufen Sie das Vorname-Attribut des Autorenobjekts
ab

book.author.firstname //nicholas
Nach dem Login kopieren


2. Rufen Sie das Nachname-Attribut des Autorenobjekts ab. Versuchen wir es mit einer anderen Schreibweise

book['author']['lastname'] //xia
Nach dem Login kopieren

Wir können auch gemischte Zugriffsmethoden verwenden
book.author['lastname'] oder book['author'].lastname sind allesamt gültige Methoden und sollten flexibel verwendet werden

Wenn die Eigenschaften dynamisch sind, wird im Allgemeinen die Array-Methode für den Zugriff auf das Objekt verwendet.

var key ='lastname' 
book.author[key];//xia 
Nach dem Login kopieren

Methode des Objekts aufrufen

var hero = { 
breed: 'Turtle', 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
} 
hero.say(); 
Nach dem Login kopieren


Die Methode zum Zugriff auf Objekte ist sehr einfach, nur ein bisschen reicht aus, aber Sie können auch ein Array verwenden, was seltsam aussieht
Wie zum Beispiel hero['say']();
Diese Schreibweise wird nicht empfohlen, wenn Sie auf Objekte zugreifen.

Eigenschaften und Methoden ändern
Da Javascript eine dynamische Sprache ist, können die Eigenschaften und Methoden von Objekten jederzeit geändert werden. Siehe das Beispiel unten

var hero={}; 
Nach dem Login kopieren

Held ist ein leeres Objekt.

typeof hero.breed;//undefined 
Nach dem Login kopieren

Es zeigt, dass das Heldenobjekt nicht über das Rasseattribut verfügt
Als nächstes können Sie Eigenschaften und Methoden hinzufügen

hero.breed = 'turtle'; 
hero.name = 'Leonardo'; 
hero.sayName = function() {return hero.name;}; 
Nach dem Login kopieren

Aufrufmethode

 hero.sayName();//Leonardo
Nach dem Login kopieren

Attribut löschen

delete hero.name;//true 
hero.sayName();//方法失败 

Nach dem Login kopieren

Dies

var hero = { 
  name : 'Rafaelo', 
  sayName : function(){ 
   return this.name;   
 } 
} 
hero.sayName();//Rafaelo 
Nach dem Login kopieren

Die Bedeutung dieses Objekts wird später besprochen.

Konstruktorfunktionen
Eine andere Möglichkeit, ein Objekt zu erstellen, ist die Verwendung eines Konstruktors. Schauen Sie sich einfach das Beispiel an

function Hero(){ 
 this.name ='Refaelo'; 
} 
var hero = new Hero();
hero.name;//Refaelo
Nach dem Login kopieren

Der Vorteil dieser Methode besteht darin, dass Sie beim Erstellen eines Objekts Parameter übergeben können

function Hero(name){ 
  this.name = name; 
  this.whoAreYou = function(){ 
    return this.name; 
  } 
} 
 
var hi = new Hero('nicholas'); 
hi.whoAreYou();//nicholas 
Nach dem Login kopieren

Achten Sie darauf, den neuen Operator nicht wegzuwerfen. . .
Globales Objekt
Wir haben in den letzten Abschnitten darüber gesprochen, dass wir versuchen sollten, globale Variablen zu vermeiden. Als wir etwas über Objekte lernten, haben wir uns angesehen, was mit globalen Variablen passiert Variablen. Das Objekt hat eine Eigenschaft. Wenn die Hostumgebung ein Webbrowser ist, ist die globale Variable window.
Wenn wir var a = 1;
definieren Wir können es so verstehen:
Eine globale Variable a,
Als Attribut a von window können wir window.a oder window['a']
aufrufen Schauen wir uns die vordefinierte Funktion parseInt('123 m') an. Wir können sie als window.parseInt('123 m');
schreiben
Konstruktorattribut
Nachdem das Objekt erstellt wurde, wird im Hintergrund ein verstecktes Attribut erstellt, der Konstruktor.

h2.constructor;//Hero(name)
Nach dem Login kopieren

Weil das Attribut des Konstruktors ein Verweis auf die Funktion ist. Wenn es Ihnen egal ist, woraus das h2-Objekt erstellt wird, sondern Sie nur daran interessiert sind, ein neues Objekt ähnlich wie h2 zu erstellen, verwenden Sie die folgende Schreibweise

var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas 
Nach dem Login kopieren

我们来看看如下写法的意思

var o = {}; 
o.constructor;//Object() 
typeof o.constructor;//"functions" 
Nach dem Login kopieren

其实就是隐藏了 new Object() ,更深的层次应用以后几个教程在说明。

instanceof 操作符
用instanceof来判断对象是否是指定的构造函数创建的。

function Hero(){ 
} 
var h = new Hero(); 
var o = {}; 
h instanceof Hero;//true 
h instanceof Object;//false 
o instanceof Object;//true 
Nach dem Login kopieren


要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误

函数返回对象
可以用构造函数来创建个对象,也可以通过普通函数返回对象来创建对象

function factory(name){ 
  return { 
   name:name 
 }; 
} 
Nach dem Login kopieren

用这个方法创建对象

var o = factory('one'); 
o.name
Nach dem Login kopieren


让我们接下来看看比较少见的构造函数返回对象的例子

function C(){ 
 this.a = 1; 
 return {b:2}; 
} 
 
var c2 = new C(); 
typeof c2.a //undefined 
c2.b; // 2 
Nach dem Login kopieren

说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意

传递对象
如果传递一个对象到函数里,那么传递的是个引用。如果改变了这个引用,也就会改变原始的对象。
下面是个对象赋值的例子

var original = {name:'nicholas'}; 
var copy =original; 
copy.name;//'nicholas'; 
copy.name = 'Jason'; 
original.name;// 'Jason'; 
Nach dem Login kopieren


修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中,也是同样的。

function modify(o){ 
  o.name ='Jason' 
} 
var original={name:'nicholas'}; 
modify(original); 
original.name;//Jason 
Nach dem Login kopieren


对象的比较
两个对象的比较如果是true的话,那么他们就是同一个对象的引用。

var fido ={breed:'dog'}; 
var benji ={breed:'dog'}; 
 
benji===fido; //false; 
benji==fido; //false; 
Nach dem Login kopieren

 
 以上的代码都不是同一引用,所以都是false

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Apr 29, 2024 pm 01:09 PM

So konvertieren Sie ein MySQL-Abfrageergebnis-Array in ein Objekt: Erstellen Sie ein leeres Objekt-Array. Durchlaufen Sie das resultierende Array und erstellen Sie für jede Zeile ein neues Objekt. Verwenden Sie eine foreach-Schleife, um die Schlüssel-Wert-Paare jeder Zeile den entsprechenden Eigenschaften des neuen Objekts zuzuweisen. Fügt dem Objektarray ein neues Objekt hinzu. Schließen Sie die Datenbankverbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Was ist der Unterschied zwischen Arrays und Objekten in PHP? Was ist der Unterschied zwischen Arrays und Objekten in PHP? Apr 29, 2024 pm 02:39 PM

In PHP ist ein Array eine geordnete Sequenz, und auf Elemente wird über einen Index zugegriffen. Ein Objekt ist eine Entität mit Eigenschaften und Methoden, die über das Schlüsselwort new erstellt werden. Der Array-Zugriff erfolgt über einen Index, der Objektzugriff über Eigenschaften/Methoden. Es werden Array-Werte und Objektreferenzen übergeben.

Was ist das Request-Objekt in PHP? Was ist das Request-Objekt in PHP? Feb 27, 2024 pm 09:06 PM

Das Request-Objekt in PHP ist ein Objekt, das zur Verarbeitung von HTTP-Anfragen verwendet wird, die vom Client an den Server gesendet werden. Über das Request-Objekt können wir die Anforderungsinformationen des Clients abrufen, z. B. die Anforderungsmethode, die Anforderungsheaderinformationen, die Anforderungsparameter usw., um die Anforderung zu verarbeiten und zu beantworten. In PHP können Sie globale Variablen wie $_REQUEST, $_GET, $_POST usw. verwenden, um angeforderte Informationen zu erhalten, aber diese Variablen sind keine Objekte, sondern Arrays. Um Anfrageinformationen flexibler und bequemer bearbeiten zu können, können Sie dies tun

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Apr 19, 2024 pm 12:15 PM

In C++ sind drei Punkte zu beachten, wenn eine Funktion ein Objekt zurückgibt: Der Lebenszyklus des Objekts wird vom Aufrufer verwaltet, um Speicherlecks zu verhindern. Vermeiden Sie baumelnde Zeiger und stellen Sie sicher, dass das Objekt nach der Rückkehr der Funktion gültig bleibt, indem Sie dynamisch Speicher zuweisen oder das Objekt selbst zurückgeben. Der Compiler optimiert möglicherweise die Kopiegenerierung des zurückgegebenen Objekts, um die Leistung zu verbessern. Wenn das Objekt jedoch anhand der Wertesemantik übergeben wird, ist keine Kopiegenerierung erforderlich.

See all articles