Detaillierte Erläuterung des JavaScript-Argumentobjekts-js-Tutorial-php.cn

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" })；

Nach dem Login kopieren

Das Ausführungsergebnis ist:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Ausführungsergebnis ist wie folgt:

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

Nach dem Login kopieren

2.2 Argumente in Array konvertieren

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

Array.prototype.slice.call(arguments);

Nach dem Login kopieren

Es gibt auch eine kürzere Schreibweise:

[].slice.call(arguments);

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Ausführungsergebnis ist:

true ["A", "B"]

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Ausgabe:

1 1
10 1
10 20

Nach dem Login kopieren

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

Nach dem Login kopieren

Die Ausgabe ist:

1 1
10 10
20 20

Nach dem Login kopieren

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
}

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Ausführungsergebnis ist:

Method two
Method two

Nach dem Login kopieren

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)

Nach dem Login kopieren

Das Ausführungsergebnis ist wie folgt:

Result is 3
Result is 6

Nach dem Login kopieren

3. Argumente in ES6

3.1 Erweiterter Operator

Direkt zur Kastanie:

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

func(1, 2, 3);

Nach dem Login kopieren

Das Ausführungsergebnis ist:

1 2 3

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Ausführungsergebnis ist:

true
1 [2, 3]

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Ausführungsergebnis ist:

99 undefined
99 1

Nach dem Login kopieren

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" ];

Nach dem Login kopieren

我们利用 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(&#39;A&#39;);
console.log(foo, foo.length);
console.log("foo is an array? " + Array.isArray(foo));

Nach dem Login kopieren

执行结果是：

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

Nach dem Login kopieren

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

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

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

const bar = new Bar();
bar.push(&#39;A&#39;);
bar.push(&#39;B&#39;);
console.log(bar);

Nach dem Login kopieren

执行结果是：

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

Nach dem Login kopieren

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