Gibt es eine Möglichkeit, benannte Parameter in einem Funktionsaufruf in JavaScript bereitzustellen?

Ich finde die Funktion für benannte Parameter in C # in einigen Fällen sehr nützlich.

calculateBMI(70, height: 175);

Was kann ich verwenden, wenn ich dies in JavaScript möchte?

Was ich nicht will ist folgendes:

myFunction({ param1: 70, param2: 175 });

function myFunction(params){
  // Check if params is an object
  // Check if the parameters I need are non-null
  // Blah blah
}

Diesen Ansatz habe ich bereits verwendet. Gibt es eine andere Art und Weise?

Ich bin in Ordnung, wenn ich dazu eine Bibliothek benutze.

ES2015 und höher

In ES2015 kann die Parameterdestrukturierung verwendet werden, um benannte Parameter zu simulieren. Der Aufrufer müsste ein Objekt übergeben, aber Sie können alle Überprüfungen innerhalb der Funktion vermeiden, wenn Sie auch Standardparameter verwenden:

myFunction({ param1 : 70, param2 : 175});

function myFunction({param1, param2}={}){
  // ...function body...
}

// Or with defaults, 
function myFunc({
  name = 'Default user',
  age = 'N/A'
}={}) {
  // ...function body...
}

ES5

Es gibt eine Möglichkeit, dem, was Sie wollen, nahe zu kommen, aber sie basiert auf der Ausgabe von Function.prototype.toString ^[ES5] , die in gewissem Maße von der Implementierung abhängt, sodass sie möglicherweise nicht browserübergreifend kompatibel ist.

Die Idee ist, die Parameternamen aus der Zeichenfolgendarstellung der Funktion zu analysieren, damit Sie die Eigenschaften eines Objekts dem entsprechenden Parameter zuordnen können.

Ein Funktionsaufruf könnte dann so aussehen

func(a, b, {someArg: ..., someOtherArg: ...});

wo aund bsind Positionsargumente und das letzte Argument ist ein Objekt mit benannten Argumenten.

Beispielsweise:

var parameterfy = (function() {
    var pattern = /function[^(]*\(([^)]*)\)/;

    return function(func) {
        // fails horribly for parameterless functions ;)
        var args = func.toString().match(pattern)[1].split(/,\s*/);

        return function() {
            var named_params = arguments[arguments.length - 1];
            if (typeof named_params === 'object') {
                var params = [].slice.call(arguments, 0, -1);
                if (params.length < args.length) {
                    for (var i = params.length, l = args.length; i < l; i++) {
                        params.push(named_params[args[i]]);
                    }
                    return func.apply(this, params);
                }
            }
            return func.apply(null, arguments);
        };
    };
}());

Welche würden Sie verwenden als:

var foo = parameterfy(function(a, b, c) {
    console.log('a is ' + a, ' | b is ' + b, ' | c is ' + c);     
});

foo(1, 2, 3); // a is 1  | b is 2  | c is 3
foo(1, {b:2, c:3}); // a is 1  | b is 2  | c is 3
foo(1, {c:3}); // a is 1  | b is undefined  | c is 3
foo({a: 1, c:3}); // a is 1  | b is undefined  | c is 3 

DEMO

Dieser Ansatz weist einige Nachteile auf (Sie wurden gewarnt!):

• Wenn das letzte Argument ein Objekt ist, wird es als "benannte Argumentobjekte" behandelt.
• Sie erhalten immer so viele Argumente, wie Sie in der Funktion definiert haben, aber einige von ihnen haben möglicherweise den Wert undefined(der sich davon unterscheidet, überhaupt keinen Wert zu haben). Das heißt, Sie können nicht arguments.lengthtesten, wie viele Argumente übergeben wurden.

Anstatt dass eine Funktion den Wrapper erstellt, können Sie auch eine Funktion verwenden, die eine Funktion und verschiedene Werte als Argumente akzeptiert, z

call(func, a, b, {posArg: ... });

oder sogar verlängern, Function.prototypedamit Sie tun können:

foo.execute(a, b, {posArg: ...});

Nein - der Objektansatz ist die Antwort von JavaScript darauf. Dies ist kein Problem, vorausgesetzt, Ihre Funktion erwartet ein Objekt und keine separaten Parameter.

Dieses Problem ist seit einiger Zeit ein Liebling von mir. Ich bin ein erfahrener Programmierer mit vielen Sprachen. Eine meiner Lieblingssprachen, die ich gerne benutzt habe, ist Python. Python unterstützt benannte Parameter ohne Tricks .... Seit ich vor einiger Zeit mit Python angefangen habe, wurde alles einfacher. Ich glaube, dass jede Sprache benannte Parameter unterstützen sollte, aber das ist einfach nicht der Fall.

Viele Leute sagen, sie sollen nur den Trick "Objekt übergeben" verwenden, damit Sie Parameter benannt haben.

/**
 * My Function
 *
 * @param {Object} arg1 Named arguments
 */
function myFunc(arg1) { }

myFunc({ param1 : 70, param2 : 175});

Und das funktioniert großartig, außer ... wenn es um die meisten IDEs geht, verlassen sich viele von uns Entwicklern auf Typ- / Argument-Hinweise in unserer IDE. Ich persönlich benutze PHP Storm (zusammen mit anderen JetBrains-IDEs wie PyCharm für Python und AppCode für Objective C)

Das größte Problem bei der Verwendung des Tricks "Objekt übergeben" besteht darin, dass die IDE beim Aufrufen der Funktion einen einzigen Typhinweis gibt und das war's ... Wie sollen wir wissen, welche Parameter und Typen in die Funktion aufgenommen werden sollen? arg1 Objekt?

Also ... der Trick "Objekt übergeben" funktioniert bei mir nicht ... Es verursacht tatsächlich mehr Kopfschmerzen, wenn ich mir den Docblock jeder Funktion ansehen muss, bevor ich weiß, welche Parameter die Funktion erwartet ... Sicher, es ist großartig für Wenn Sie vorhandenen Code beibehalten, es aber schrecklich ist, neuen Code zu schreiben.

Nun, dies ist die Technik, die ich verwende ... Nun, es kann einige Probleme geben, und einige Entwickler sagen mir vielleicht, dass ich es falsch mache, und ich bin offen für diese Dinge ... Ich bin immer bereit, nach besseren Möglichkeiten zu suchen, um eine Aufgabe zu erfüllen ... Wenn es also ein Problem mit dieser Technik gibt, sind Kommentare willkommen.

/**
 * My Function
 *
 * @param {string} arg1 Argument 1
 * @param {string} arg2 Argument 2
 */
function myFunc(arg1, arg2) { }

var arg1, arg2;
myFunc(arg1='Param1', arg2='Param2');

Auf diese Weise habe ich das Beste aus beiden Welten ... neuer Code ist einfach zu schreiben, da meine IDE mir alle richtigen Argumentationshinweise gibt ... Und während ich später den Code pflege, kann ich auf einen Blick nicht nur den sehen Wert, der an die Funktion übergeben wird, aber auch der Name des Arguments. Der einzige Aufwand, den ich sehe, besteht darin, Ihre Argumentnamen als lokale Variablen zu deklarieren, um zu verhindern, dass der globale Namespace verschmutzt wird. Sicher, es ist ein bisschen mehr Tipparbeit, aber trivial im Vergleich zu der Zeit, die benötigt wird, um Docblocks nachzuschlagen, während neuer Code geschrieben oder vorhandener Code beibehalten wird.

Wenn Sie klarstellen möchten, um welche Parameter es sich handelt, anstatt nur aufzurufen

someFunction(70, 115);

Warum nicht folgendes tun?

var width = 70, height = 115;
someFunction(width, height);

Sicher, es ist eine zusätzliche Codezeile, aber sie gewinnt an Lesbarkeit.

Eine andere Möglichkeit wäre, Attribute eines geeigneten Objekts zu verwenden, z. B. wie folgt:

function plus(a,b) { return a+b; };

Plus = { a: function(x) { return { b: function(y) { return plus(x,y) }}}, 
         b: function(y) { return { a: function(x) { return plus(x,y) }}}};

sum = Plus.a(3).b(5);

Natürlich ist es für dieses erfundene Beispiel etwas bedeutungslos. Aber in Fällen, in denen die Funktion aussieht

do_something(some_connection_handle, some_context_parameter, some_value)

es könnte nützlicher sein. Es könnte auch mit der Idee "parameterfy" kombiniert werden, ein solches Objekt auf generische Weise aus einer vorhandenen Funktion zu erstellen. Das heißt, für jeden Parameter wird ein Element erstellt, das zu einer teilweise ausgewerteten Version der Funktion ausgewertet werden kann.

Diese Idee hängt natürlich mit Schönfinkeling aka Currying zusammen.

Es geht auch anders. Wenn Sie ein Objekt als Referenz übergeben, werden die Eigenschaften dieses Objekts im lokalen Bereich der Funktion angezeigt. Ich weiß, dass dies für Safari funktioniert (habe andere Browser nicht überprüft) und ich weiß nicht, ob diese Funktion einen Namen hat, aber das folgende Beispiel veranschaulicht ihre Verwendung.

Obwohl ich in der Praxis nicht denke, dass dies einen funktionalen Wert bietet, der über die bereits verwendete Technik hinausgeht, ist es semantisch etwas sauberer. Außerdem muss eine Objektreferenz oder ein Objektliteral übergeben werden.

function sum({ a:a, b:b}) {
    console.log(a+'+'+b);
    if(a==undefined) a=0;
    if(b==undefined) b=0;
    return (a+b);
}

// will work (returns 9 and 3 respectively)
console.log(sum({a:4,b:5}));
console.log(sum({a:3}));

// will not work (returns 0)
console.log(sum(4,5));
console.log(sum(4));

Beim Versuch mit Node-6.4.0 (process.versions.v8 = '5.0.71.60') und Node Chakracore-v7.0.0-pre8 und dann Chrome-52 (V8 = 5.2.361.49) habe ich festgestellt, dass benannte Parameter fast sind implementiert, aber diese Reihenfolge hat immer noch Vorrang. Ich kann nicht finden, was der ECMA-Standard sagt.

>function f(a=1, b=2){ console.log(`a=${a} + b=${b} = ${a+b}`) }

> f()
a=1 + b=2 = 3
> f(a=5)
a=5 + b=2 = 7
> f(a=7, b=10)
a=7 + b=10 = 17

Aber Bestellung ist erforderlich !! Ist es das Standardverhalten?

> f(b=10)
a=10 + b=2 = 12

Aufruffunktion fmit benannten Parametern als Objekt übergeben

o = {height: 1, width: 5, ...}

nennt im Grunde seine Zusammensetzung, f(...g(o))wo ich die Spread-Syntax verwende und gist eine "bindende" Map, die die Objektwerte mit ihren Parameterpositionen verbindet.

Die Bindungskarte ist genau die fehlende Zutat, die durch das Array ihrer Schlüssel dargestellt werden kann:

// map 'height' to the first and 'width' to the second param
binding = ['height', 'width']

// take binding and arg object and return aray of args
withNamed = (bnd, o) => bnd.map(param => o[param])

// call f with named args via binding
f(...withNamed(binding, {hight: 1, width: 5}))

Beachten Sie die drei entkoppelten Bestandteile: die Funktion, das Objekt mit den benannten Argumenten und die Bindung. Diese Entkopplung ermöglicht eine große Flexibilität bei der Verwendung dieses Konstrukts, bei dem die Bindung in der Funktionsdefinition beliebig angepasst und zum Zeitpunkt des Funktionsaufrufs beliebig erweitert werden kann.

Zum Beispiel möchten Sie möglicherweise abkürzen heightund widthals hund winnerhalb der Definition Ihrer Funktion, um sie kürzer und sauberer zu machen, während Sie sie aus Gründen der Klarheit immer noch mit vollständigen Namen aufrufen möchten:

// use short params
f = (h, w) => ...

// modify f to be called with named args
ff = o => f(...withNamed(['height', 'width'], o))

// now call with real more descriptive names
ff({height: 1, width: 5})

Diese Flexibilität ist auch für die funktionale Programmierung nützlicher, bei der Funktionen beliebig transformiert werden können, wobei ihre ursprünglichen Parameternamen verloren gehen.

Als ich aus Python kam, nervte mich das. Ich habe einen einfachen Wrapper / Proxy für Knoten geschrieben, der sowohl Positions- als auch Schlüsselwortobjekte akzeptiert.

https://github.com/vinces1979/node-def/blob/master/README.md

Im Gegensatz zu dem, was allgemein angenommen wird, können benannte Parameter in Standard-JavaScript der alten Schule (nur für boolesche Parameter) mithilfe einer einfachen, übersichtlichen Codierungskonvention implementiert werden, wie unten gezeigt.

function f(p1=true, p2=false) {
    ...
}

f(!!"p1"==false, !!"p2"==true); // call f(p1=false, p2=true)

Vorsichtsmaßnahmen:

• Die Reihenfolge der Argumente muss beibehalten werden - das Muster ist jedoch weiterhin nützlich, da deutlich wird, welches tatsächliche Argument für welchen formalen Parameter bestimmt ist, ohne nach der Funktionssignatur suchen oder eine IDE verwenden zu müssen.

• Dies funktioniert nur für Boolesche Werte. Ich bin jedoch sicher, dass ein ähnliches Muster für andere Typen unter Verwendung der einzigartigen Typ-Zwangssemantik von JavaScript entwickelt werden könnte.