Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der JavaScript-Array-Objekte und Argumentinstanzen

Detaillierte Erläuterung der JavaScript-Array-Objekte und Argumentinstanzen

巴扎黑
Freigeben: 2017-08-16 10:55:50
Original
1341 Leute haben es durchsucht
Array-ähnliches Objekt

Das sogenannte Array-ähnliche Objekt:
hat ein Längenattribut und mehrere Indexattribute Objekt
Zum Beispiel:
var array = ['name', 'age', 'sex'];
  
var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}
Nach dem Login kopieren

Warum wird es dennoch als Array-ähnliches Objekt bezeichnet?
Dann schauen wir uns diese beiden Objekte unter drei Gesichtspunkten an: Lesen und Schreiben, Längenbeschaffung und Durchqueren.

Lesen und schreiben

console.log(array[0]); // name
console.log(arrayLike[0]); // name
  
array[0] = 'new name';
arrayLike[0] = 'new name';
Nach dem Login kopieren

Länge

console.log(array.length); // 3
console.log(arrayLike.length); // 3
Nach dem Login kopieren

Traverse

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}
Nach dem Login kopieren
Ist das nicht ähnlich?
Kann diese Art von Array-Objekt Array-Methoden verwenden? Zum Beispiel:
arrayLike.push(&#39;4&#39;);
Nach dem Login kopieren

Der obige Code meldet jedoch einen Fehler: arrayLike.push ist keine Funktion
Es ist also immer noch eine Array-Klasse. Jetzt...

Array-Methode aufrufen

Was wäre, wenn die Array-ähnliche Methode ist willkürlich und Sie möchten die Array-Methode verwenden?
Da es nicht direkt aufgerufen werden kann, können wir Function.call verwenden, um indirekt aufzurufen:
var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
  
Array.prototype.join.call(arrayLike, &#39;&&#39;); // name&age&sex
  
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到类数组转数组
  
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]
Nach dem Login kopieren

Array-ähnliches Konvertierungsobjekt

Im obigen Beispiel wurde eine Methode zum Konvertieren eines Arrays in ein Array erwähnt und drei weitere Methoden hinzugefügt:
var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)
Nach dem Login kopieren

Warum sprechen wir also über arrayartige Objekte? Und was sind die Anwendungen von Klassenarrays?
Apropos Array-ähnliche Objekte: Das Arguments-Objekt ist ein Array-ähnliches Objekt. In clientseitigem JavaScript geben einige DOM-Methoden (document.getElementsByTagName() usw.) auch Array-ähnliche Objekte zurück.

Arguments-Objekt

Als nächstes konzentrieren wir uns auf das Arguments-Objekt.
Das Arguments-Objekt ist nur im Funktionskörper definiert, einschließlich der Parameter und anderen Eigenschaften der Funktion. In einem Funktionskörper bezieht sich arguments auf das Arguments-Objekt der Funktion.
Zum Beispiel:
function foo(name, age, sex) {
    console.log(arguments);
}
  
foo(&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;)
Nach dem Login kopieren

Das Druckergebnis ist wie folgt:
Detaillierte Erläuterung der JavaScript-Array-Objekte und Argumentinstanzen
Wir können sehen, dass es neben dem Indexattribut und dem Längenattribut des Arrays auch ein Callee-Attribut gibt. Als nächstes werden wir sie einzeln vorstellen.

Längenattribut

Das Längenattribut des Arguments-Objekts stellt die Länge des tatsächlichen Parameters dar, zum Beispiel:
function foo(b, c, d){
    console.log("实参的长度为:" + arguments.length)
}
  
console.log("形参的长度为:" + foo.length)
  
foo(1)
  
// 形参的长度为:3
// 实参的长度为:1
Nach dem Login kopieren
Aufgerufenes Attribut

Das aufgerufene Attribut des Arguments-Objekts, über das die Funktion ausgeführt wird selbst aufgerufen werden kann.
Erzählen Sie mir von einer Lösung für eine klassische Abschlussfrage im Vorstellungsgespräch mit callee:
var data = [];
  
for (var i = 0; i < 3; i++) {
    (data<i> = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}
  
data[0]();
data[1]();
data[2]();
  
// 0
// 1
// 2</i>
Nach dem Login kopieren


Als nächstes sprechen wir über einige wichtige Punkte des Arguments-Objekts:


Bindung von Argumenten und entsprechenden Parametern

function foo(name, age, sex, hobbit) {
  
    console.log(name, arguments[0]); // name name
  
    // 改变形参
    name = &#39;new name&#39;;
  
    console.log(name, arguments[0]); // new name new name
  
    // 改变arguments
    arguments[1] = &#39;new age&#39;;
  
    console.log(age, arguments[1]); // new age new age
  
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
  
    sex = &#39;new sex&#39;;
  
    console.log(sex, arguments[2]); // new sex undefined
  
    arguments[3] = &#39;new hobbit&#39;;
  
    console.log(hobbit, arguments[3]); // undefined new hobbit
  
}
  
foo(&#39;name&#39;, &#39;age&#39;)
Nach dem Login kopieren
Die Werte der übergebenen Parameter, tatsächlichen Parameter und Argumente werden gemeinsam genutzt. Wenn sie nicht übergeben werden, werden die Werte der tatsächlichen Parameter und Argumente gemeinsam genutzt nicht geteilt werden
Darüber hinaus befindet sich das Obige im nicht-strikten Modus. Wenn es sich im strikten Modus befindet, werden die tatsächlichen Parameter und Argumente nicht geteilt.

Parameter übergeben

Parameter von einer Funktion an eine andere übergeben
// 使用 apply 将 foo 的参数传递给 bar
function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
   console.log(a, b, c);
}
  
foo(1, 2, 3)
Nach dem Login kopieren
Leistungsstarkes ES6

Mit dem ...-Operator von ES6 können wir problemlos in ein Array konvertieren.
function func(...arguments) {
    console.log(arguments); // [1, 2, 3]
}
  
func(1, 2, 3);
Nach dem Login kopieren
Anwendungen

Es gibt tatsächlich viele Anwendungen für Argumente , wie folgt: In dieser Serie, der JavaScript-Spezialserie, werden wir Argumente in der Extend-Implementierung, dem Funktions-Currying, der Rekursion und anderen Szenarien von jQuery sehen. In diesem Artikel wird nicht auf Details eingegangen.
Wenn Sie diese Szenarien zusammenfassen möchten, sind vorerst folgende denkbar:
  1. Parameter variabler Länge

  2. Funktions-Currying

  3. Rekursiver Aufruf

  4. Funktionsüberladung ...

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Array-Objekte und Argumentinstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage