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

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
}

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';

Länge

console.log(array.length); // 3
console.log(arrayLike.length); // 3

Traverse

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

Ist das nicht ähnlich?
Kann diese Art von Array-Objekt Array-Methoden verwenden? Zum Beispiel:

arrayLike.push('4');

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: 'name', 1: 'age', 2: 'sex', length: 3 }
  
Array.prototype.join.call(arrayLike, '&'); // 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"]

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: 'name', 1: 'age', 2: 'sex', 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)

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('name', 'age', 'sex')

Das Druckergebnis ist wie folgt:

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

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>

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 = 'new name';
  
    console.log(name, arguments[0]); // new name new name
  
    // 改变arguments
    arguments[1] = 'new age';
  
    console.log(age, arguments[1]); // new age new age
  
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
  
    sex = 'new sex';
  
    console.log(sex, arguments[2]); // new sex undefined
  
    arguments[3] = 'new hobbit';
  
    console.log(hobbit, arguments[3]); // undefined new hobbit
  
}
  
foo('name', 'age')

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)

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);

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!