Heim > Web-Frontend > js-Tutorial > Eine umfassende Einführung in das JavaScript-Argumentobjekt

Eine umfassende Einführung in das JavaScript-Argumentobjekt

高洛峰
Freigeben: 2016-10-13 09:10:49
Original
1001 Leute haben es durchsucht

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

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);
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) 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; 
 
    }; 
 
}
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 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; 
 
}
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 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);
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 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" ];
Nach dem Login kopieren

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(&#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中的数组与伪数组的区别

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?


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