Eine umfassende Einführung in das JavaScript-Argumentobjekt

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 wirklichen 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 Argumente[0], Argumente[1]... verwenden, um einen einzelnen Parameter zu erhalten.

2. Argumente-Operation

2.1 Argumente Länge

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

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?

Erstens ist das von der Slice-Methode erhaltene Ergebnis ein Array und die Parameter sind Argumente. Tatsächlich können Objekte, die bestimmte Bedingungen erfüllen, mit der Slice-Methode in Arrays 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) Attribute sind 0, 1, 2. ..;2 ) hat das Längenattribut;

Darüber hinaus ist zu beachten, dass die Argumente der Funktion nicht durchgesickert oder weitergegeben werden können. Was bedeutet das? 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 erheblichen Verlusten führt Leistungsverlust.

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 die Argumente von Array in der neuen Version wieder erben lassen? Tatsächlich war dies im ES5-Entwurf enthalten, wurde aber aus Gründen der Vorwärtskompatibilität 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 für Array

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

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

Wir können obj[0] und arr[0] verwenden, um die gewünschten Daten abzurufen, aber die Möglichkeiten, die Daten abzurufen, sind wirklich unterschiedlich. obj[0] verwendet das Schlüssel-Wert-Paar des Objekts, um auf Daten zuzugreifen, während arr[0] den Index des Arrays verwendet. Tatsächlich besteht der einzige Unterschied zwischen Object und Array darin, dass die Eigenschaften von Object Zeichenfolgen sind, während die Indizes von Array Zahlen sind.

Werfen wir einen Blick auf Array-ähnliche Objekte.

伪数组的特性就是长得像数组，包含一组数据以及拥有一个 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中的数组与伪数组的区别

MDN arguments

Avoid modifying or passing arguments into other functions — it kills optimization

Optimization killers

Why isn't a function's arguments object an array in Javascript?

arguments 对象

Advanced Javascript: Objects, Arrays, and Array-Like objects

JavaScript 特殊对象 Array-Like Objects 详解

What is a good way create a Javascript array-like object?