Wie erhalte ich den Namen des JS-Funktionsparameters? Analyse der Methode zur Verwendung von AST zum Abrufen von Parameternamen für js-Funktionen

In diesem Artikel erfahren Sie, wie Sie den Namen des JS-Funktionsparameters erhalten. Die Analyse der Methode zum Erhalten von js-Funktionsparameternamen mithilfe von AST hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Schreiben Sie es zuerst

Ein aktuelles Projekt erfordert das Abrufen von Funktionsparameternamen. Es klingt sehr einfach, aber mit ES6 werden Parameter und Funktionen auf alle möglichen seltsamen Arten geschrieben Bei einigen Github-Bibliotheken handelt es sich grundsätzlich um reguläre
, die jedoch häufig die Grenze überschreiten und nicht korrekt zugeordnet werden können.

Also kam ich auf die Idee, AST für die Abdeckungssuche zu verwenden.

Konzept

Abstrakter Syntaxbaum (abgekürzt als AST) oder Syntaxbaum (Syntaxbaum) ist eine Baumdarstellung der abstrakten Syntaxstruktur des Quellcodes

Warum Verwenden Sie AST

Über AST können wir den Code durchsuchen. Es scheint, dass reguläre Ausdrücke dies auch können. Warum also AST anstelle regulärer Ausdrücke verwenden?

Es bedeutet, den Parameternamen von der Funktion zu erhalten, wenn es den folgenden Ausdruck gibt:

function x(a=5,b="a",c=function(x=1,y){console.log(x=function(i=8,j){})},d={x:1,y:2,z:'x=6'},e=x=>7,f=['3=5','x.1','y,2',1],g=(x,y)=>{let z=(i,j=6)=>{}},h){}

Die Parameter sind [a,b,c,d,e,f,g ,h]

Sind Sie sicher, dass Sie weiterhin reguläre Ausdrücke verwenden möchten, um Parameternamen abzugleichen...

AST wird anhand der Bedeutung des Codes bearbeitet, während reguläre Ausdrücke nur anhand der Bedeutung des Codes bearbeitet werden können die wörtliche Bedeutung des Codes.

Wenn Sie AST zur Analyse der oben genannten übertriebenen Funktion verwenden, können Sie leicht den Parameternamen erhalten

Esprima

Wir verwenden Esprima, das Javascript-Code in eine abstrakte Baumbibliothek analysieren kann.

Zuerst müssen wir es installieren:

npm install esprima

Dann rufen Sie auf:

const esprima=require('require'')

Dann ist es Zeit für die Analyse

Ein einfaches AST-Beispiel

Nehmen wir zunächst ein einfaches Beispiel:
Funktion a(b){}

Passed After esprima Bei der Analyse sieht das generierte Strukturdiagramm wie folgt aus:

{
    "type": "Program",
    "body": [
        {   // 这个type表示这是一个函数表达式
            "type": "FunctionDeclaration",
            "id": {
                "type": "Identifier",
                "name": "a"
            },
            "params": [
                {
                    // 参数数组内的Identifier代表参数
                    "type": "Identifier",
                    "name": "b"
                }
            ],
            "body": {
                "type": "BlockStatement",
                "body": []
            },
            "generator": false,
            "expression": false,
            "async": false
        }
    ],
    "sourceType": "script"
}

Idee:

1 Die FunctionDeclaration-Beschreibung ist ein Funktionsausdruck, geben Sie das params-Attribut ein.

2. Bestimmen Sie, ob der Typ jedes Parameters ein Bezeichner ist. Der Bezeichner unter dem Parameterattribut stellt einen Parameter dar.

3. Finden Sie den Wert des Namensattributs. Das Ergebnis ist ['b'].

Basierend auf den oben genannten Ideen können wir eine einfache Methode zum Erhalten von Parametern schreiben.

function getParams(fn){
  // 此处分析的代码必须是字符串
  let astEsprima=esprima.parseScript(fn.toString())
  let funcParams = []
  let node = astEsprima.body[0]
  // 找到type，进入params属性
  if (node.type === "FunctionDeclaration") funcParams = node.params
  let validParam=[]
  funcParams.forEach(obj=>{
    if(obj.type==="Identifier")
      validParam.push(obj.name)
  })
  return validParam
}

Testen Sie es, erhalten Sie das Ergebnis ["b"] und feiern Sie das Ende der Arbeit.

Seien Sie nicht zu glücklich. Sie müssen wissen, dass es nicht weniger als 10 Möglichkeiten gibt, Funktionen zu erstellen, und es gibt mehrere Möglichkeiten, Parameter zu schreiben ...

Die folgenden sind einige der Methoden zum Erstellen von Funktionen und Irgendwelche Ideen zum Schreiben von Parametern

function a(x){}

// 注意：第二条和第三条在AST中意义不同
let a=function(x=1){}

a=function(...x){}

let a=([x]=[1])=>{}

async function a(x){}

function *a(x){}

class a{
constructor(x){}
}

new Function ('x','console.log(x)')

(function(){return function(x){}})()

eval("(function(){return function(a,b){}})()")

? Wenn Sie die Idee haben, „I K“ auszusprechen, bedeutet das, dass meine Vortäuschung ziemlich erfolgreich ist – –...

Tatsächlich muss es nur in mehrere Situationen (die Arten von) unterteilt werden Viele Schreibmethoden sind gleich. Sie können alle oben genannten Parameterobjekte vollständig durchdringen, und das Erhalten von Parametern ist eine Frage der Schleife + Beurteilung.

Aus Platzgründen werden wir sie hier nicht einzeln analysieren, sondern nur die im AST-Analysebaum verwendeten Typen und einige zu beachtende Punkte.

Funktionsstruktur

Variablendeklarationsanweisung und Ausdrucksanweisung

In den obigen Kommentaren sei a=function(x=1){} und a=function(... x ){} hat zwei Bedeutungen.

wobei let a=function(x=1){} auf die Variablendeklarationsanweisung verweist. Der entsprechende Typ von

ist VariableDeclaration. Sie müssen den Anfangswert init eingeben, um den Speicherort zu erhalten des Syntaxobjekts, sein Typ ist FunctionExpression-Funktionsausdruck, und durchsuchen Sie es dann in Parametern.

Anweisung zur Variablendeklaration:

├──VariableDeclaration....init
        ├──FunctionExpression.params

Und a=function(...x){} ist eine Ausdrucksanweisung, der entsprechende Typ von

ist ExpressionStatement, das müssen Sie tun Geben Sie es ein. Der Ausdruck wird innerhalb des Ausdrucks abgerufen. Zu diesem Zeitpunkt müssen wir die rechte Seite (das rechte Attribut) des Zuweisungsausdrucks eingeben (Typ ist Zuweisungsausdruck), um das Syntaxobjekt zu erhalten, in dem sich die Funktion befindet Typ ist auch ein FunctionExpression-Funktionsausdruck.

├──ExpressionStatement.expression
        ├──AssignmentExpression.right
                ├──FunctionExpression.params

Geben Sie das Objekt ein, suchen Sie das Objekt, dessen Art der Konstruktor ist, und rufen Sie die Parameterdaten ab.

├──ClassDeclaration...body...
        ├──{kind:constructor}
                ├──FunctionExpression.params

und der letzte Parameter Es muss eine Anweisung innerhalb der Funktion sein, damit der Funktionskonstruktor die Zeichenfolge verarbeitet.

├──NewExpression.arguments
        ├──{value:<String>}
         ---->对字符串进行处理，分割参数

ArrayPattern: Destrukturierende Parameter existieren und sind Arrays, wie zum Beispiel [a,b]

ObjectPattern: Destrukturierung Parameter existieren und sind Objekte, wie zum Beispiel { x,y}

RestElement: Es gibt Erweiterungsoperatoren, wie zum Beispiel (...args)

Wir müssen nur eine rekursive Schleife einrichten. Die Idee ist die gleiche wie oben: Eine Schicht geht in eine andere Schicht über. Schauen Sie hinein.

Zusammenfassung

Der Platz ist begrenzt, also schreibe ich einfach so viel und erstelle dann eine Zusammenfassung.

Es gibt nur einen Hauptzweck dieses Artikels: Durch die Typanalyse jedes Objekts im AST-Baum stellt der Typ die Bedeutung des entsprechenden Codes und die Semantik des Codes dar.

VariableDeclaration muss have internal Es gibt init, warum? Weil die Variablendeklaration einen Anfangswert hat. Wenn Sie ihn nicht festlegen, ist er undefiniert.

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Namen des JS-Funktionsparameters? Analyse der Methode zur Verwendung von AST zum Abrufen von Parameternamen für js-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!