Detaillierte Erläuterung des JavaScript-Argumentobjekts

1. Was sind Argumente?

MDN erklärt:

Argumente sind ein Array-ähnliches Objekt. Stellt die an eine Funktion übergebene Parameterliste dar.

Lassen Sie uns zunächst anhand eines Beispiels intuitiv verstehen, wie Argumente in JavaScript aussehen.

function printArgs() {
    console.log(arguments);
}
printArgs("A", "a", 0, { foo: "Hello, arguments" })；

Das Ausführungsergebnis ist:

["A", "a", 0, Object]

Auf den ersten Blick ist das Ergebnis ein Array, aber es ist kein echtes Array, daher ist arguments ein arrayähnliches Objekt ( Wenn Sie den wahren Unterschied zwischen Arrays und arrayähnlichen Objekten kennen möchten, können Sie ihn bis zum Ende lesen.

Sehen Sie sich den durch Argumente dargestellten Inhalt an, der alle Parameter darstellt, die bei der Ausführung der Funktion an die Funktion übergeben werden. Im obigen Beispiel stellt es die vier Parameter dar, die an die Funktion printArgs übergeben werden. Sie können arguments[0], arguments[1]... verwenden, um einen einzelnen Parameter zu erhalten.

2. Argumente-Operation

2.1 Argumentlänge

Argumente ist ein Array-ähnliches Objekt, das ein length-Attribut enthält Parameter, die an die Funktion übergeben werden. arguments.length

function func() {
    console.log("The number of parameters is " + arguments.length);
}

func();
func(1, 2);
func(1, 2, 3);

Das Ausführungsergebnis ist wie folgt:

The number of parameters is 0
The number of parameters is 2
The number of parameters is 3

2.2 Argumente in Array konvertieren

Normalerweise verwenden Sie die folgende Methode, um Argumente in ein Array zu konvertieren:

Array.prototype.slice.call(arguments);

Es gibt auch eine kürzere Schreibweise:

[].slice.call(arguments);

Hier wird einfach die Slice-Methode des leeren Arrays aufgerufen, ohne sie von der Prototypebene des Arrays aus aufzurufen.

Warum können die beiden oben genannten Methoden konvertiert werden?

Zunächst ist das von der Slice-Methode erhaltene Ergebnis ein Array und die Parameter sind Argumente. Tatsächlich kann jedes Objekt, das bestimmte Bedingungen erfüllt, mit der Slice-Methode in ein Array umgewandelt werden. Nehmen Sie ein Beispiel:

const obj = { 0: "A", 1: "B", length: 2 };
const result = [].slice.call(obj);
console.log(Array.isArray(result), result);

Das Ausführungsergebnis ist:

true ["A", "B"]

Wie aus dem obigen Beispiel ersichtlich ist, sind die Bedingungen: 1) Die Attribute sind 0, 1, 2 ...; 2) Mit Längenattribut;

Außerdem ist zu beachten, dass die Argumente der Funktion nicht durchgesickert oder weitergegeben werden können. Was bedeutet es? Schauen Sie sich die folgenden Beispiele für undichte Argumente an:

// Leaking arguments example1:
function getArgs() {
    return arguments;
}

// Leaking arguments example2:
function getArgs() {
    const args = [].slice.call(arguments);
    return args;
}

// Leaking arguments example3:
function getArgs() {
    const args = arguments;
    return function() {
        return args;
    };
}

Der obige Ansatz lässt das Argumentobjekt der Funktion direkt durchsickern. Das Endergebnis ist, dass die V8-Engine die Optimierung überspringt, was zu einem erheblichen Leistungsverlust führt.

Sie können dies tun:

function getArgs() {
    const args = new Array(arguments.length);
    for(let i = 0; i < args.length; ++i) {
        args[i] = arguments[i];
    }
    return args;
}

Das ist sehr merkwürdig. Jedes Mal, wenn wir Argumente verwenden, besteht der erste Schritt darin, sie gleichzeitig in ein Array umzuwandeln Argumente können leicht zu Leistungseinbußen führen. Warum also Argumente nicht direkt als Array-Objekte entwerfen?

Dies muss am Anfang dieser Sprache beginnen. Argumente wurden in den frühen Tagen der Sprache eingeführt, als das Array-Objekt über vier Methoden verfügte: toString, join, reverse und sort. Der Hauptgrund dafür, dass Argumente von Object erben, ist, dass diese vier Methoden nicht benötigt werden. Jetzt hat Array viele leistungsstarke Methoden hinzugefügt, z. B. forEach, Map, Filter usw. Warum also nicht zulassen, dass Argumente in der neuen Version wieder von Array erben? Tatsächlich war dies im Entwurf von ES5 enthalten, aus Gründen der Vorwärtskompatibilität wurde es jedoch letztendlich vom Ausschuss abgelehnt.

2.3 Argumentwerte ändern

Im strikten Modus und im nicht strikten Modus sind die Ergebnisse der Änderung von Funktionsparameterwerten unterschiedlich. Schauen Sie sich die beiden folgenden Beispiele an:

function foo(a) {
    "use strict";
    console.log(a, arguments[0]);
    a = 10;
    console.log(a, arguments[0]);
    arguments[0] = 20;
    console.log(a, arguments[0]);
}
foo(1);

Ausgabe:

1 1
10 1
10 20

Ein weiteres Beispiel für einen nicht-strikten Modus:

function foo(a) {
    console.log(a, arguments[0]);
    a = 10;
    console.log(a, arguments[0]);
    arguments[0] = 20;
    console.log(a, arguments[0]);
}
foo(1);

Die Ausgabe ist:

1 1
10 10
20 20

Wie aus den beiden obigen Beispielen ersichtlich ist, haben die Parameter in der Funktion im strikten Modus keine Verbindung mit dem Argumentobjekt, und die Änderung eines Werts ändert den anderen Wert nicht. Im nicht strengen Modus beeinflussen sich die beiden gegenseitig.

2.4 Übergabe von Parametern von einer Funktion an eine andere

Das Folgende ist die empfohlene Vorgehensweise für die Übergabe von Parametern von einer Funktion an eine andere.

function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
    // logic
}

2.5 Argumente und Überladung

Überladung ist in vielen Sprachen verfügbar, jedoch nicht in JavaScript. Schauen wir uns zunächst ein Beispiel an:

function add(num1, num2) {
    console.log("Method one");
    return num1 + num2;
}

function add(num1, num2, num3) {
    console.log("Method two");
    return num1 + num2 + num3;
}

add(1, 2);
add(1, 2, 3);

Das Ausführungsergebnis ist:

Method two
Method two

In JavaScript führen Funktionen also keine unterschiedlichen Aufrufe basierend auf unterschiedlichen Parametern durch.

Gibt es in JavaScript keine Überladung? Nein, wir können Argumente verwenden, um eine Überladung zu simulieren. Immer noch das obige Beispiel.

function add(num1, num2, num3) {
    if (arguments.length === 2) {
        console.log("Result is " + (num1 + num2));
    }
    else if (arguments.length === 3) {
        console.log("Result is " + (num1 + num2 + num3));
    }
}

add(1, 2);
add(1, 2, 3)

Das Ausführungsergebnis ist wie folgt:

Result is 3
Result is 6

3. Argumente in ES6

3.1 Erweiterter Operator

Direkt zur Kastanie:

function func() {
    console.log(...arguments);
}

func(1, 2, 3);

Das Ausführungsergebnis ist:

1 2 3

Kurz gesagt kann der Erweiterungsoperator Argumente in unabhängige Parameter erweitern.

3.2 Restparameter

Immer noch das Beste:

function func(firstArg, ...restArgs) {
    console.log(Array.isArray(restArgs));
    console.log(firstArg, restArgs);
}

func(1, 2, 3);

Das Ausführungsergebnis ist:

true
1 [2, 3]

Wie aus den obigen Ergebnissen ersichtlich ist , Restparameter stellen den verbleibenden Satz von Parametern dar, mit Ausnahme der explizit angegebenen, und der Typ ist Array.

3.3 Standardparameter

Kastanie:

function func(firstArg = 0, secondArg = 1) {
    console.log(arguments[0], arguments[1]);
    console.log(firstArg, secondArg);
}

func(99);

Das Ausführungsergebnis ist:

99 undefined
99 1

Es ist ersichtlich, dass die Standardparameter nein haben Auswirkung auf Argumente, Argumente sind immer noch Stellt nur alle Parameter dar, die beim Aufruf der Funktion übergeben werden.

3.4 Argumente in Array konvertieren

ist eine sehr empfohlene Methode, die alle Array-ähnlichen Objekte in Arrays konvertieren kann. Array.from()

4. Arrays und arrayähnliche Objekte

Arrays haben eine grundlegende Funktion: den Index. Das ist etwas, was gewöhnliche Objekte nicht haben.

const obj = { 0: "a", 1: "b" };
const arr = [ "a", "b" ];

我们利用 obj[0]、arr[0] 都能取得自己想要的数据，但取得数据的方式确实不同的。obj[0] 是利用对象的键值对存取数据，而arr[0] 却是利用数组的索引。事实上，Object 与 Array 的唯一区别就是 Object 的属性是 string，而 Array 的索引是 number。

下面看看类数组对象。

伪数组的特性就是长得像数组，包含一组数据以及拥有一个 length 属性，但是没有任何 Array 的方法。再具体的说，length 属性是个非负整数，上限是 JavaScript 中能精确表达的最大数字；另外，类数组对象的 length 值无法自动改变。

如何自己创建一个类数组对象？

function Foo() {}
Foo.prototype = Object.create(Array.prototype);

const foo = new Foo();
foo.push('A');
console.log(foo, foo.length);
console.log("foo is an array? " + Array.isArray(foo));

执行结果是：

["A"] 1
foo is an array? false

也就是说 Foo 的示例拥有 Array 的所有方法，但类型不是 Array。

如果不需要 Array 的所有方法，只需要部分怎么办呢？

function Bar() {}
Bar.prototype.push = Array.prototype.push;

const bar = new Bar();
bar.push('A');
bar.push('B');
console.log(bar);

执行结果是：

Bar {0: "A", 1: "B", length: 2}

 以上就是JavaScript arguments 对象详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！