Comment obtenir le nom du paramètre de la fonction JS ? Analyse de la méthode d'utilisation d'AST pour obtenir les noms des paramètres de fonction js

Ce que cet article vous apporte, c'est comment obtenir le nom du paramètre de la fonction JS ? L'analyse de la méthode d'obtention des noms de paramètres de fonction js à l'aide d'AST a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Écrivez-le d'abord

Un projet récent nécessite d'obtenir les noms des paramètres de fonction. Cela semble très simple, mais avec ES6, les paramètres et les fonctions sont écrits de toutes sortes de manières étranges. quelques-unes sur github Les bibliothèques sont fondamentalement régulières.
peut couvrir les méthodes d'écriture courantes. Cependant, si elle dépasse légèrement la limite, elle ne peut souvent pas être adaptée correctement.

J'ai donc eu l'idée d'utiliser AST pour effectuer une recherche de couverture.

Concept

L'arbre de syntaxe abstrait (en abrégé AST), ou arbre de syntaxe (arbre de syntaxe), est une représentation arborescente de la structure syntaxique abstraite du code source

Pourquoi utiliser AST

Grâce à AST, nous pouvons rechercher le code. Il semble que les expressions régulières puissent également le faire, alors pourquoi utiliser AST au lieu d'expressions régulières ?

Cela signifie obtenir le nom du paramètre de la fonction. Pour exagérer, s'il y a l'expression suivante :

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){}

Les paramètres sont [a,b,c,d,e,f ,g,h ]

Êtes-vous sûr de vouloir toujours utiliser des expressions régulières pour faire correspondre les noms de paramètres...

AST est modifié à partir de la signification du code, tandis que les expressions régulières ne peuvent être édité à partir du sens littéral du code.

En utilisant AST pour analyser la fonction exagérée ci-dessus, vous pouvez facilement obtenir son nom de paramètre

Esprima

Nous utilisons esprima, qui peut analyser le code Javascript dans une bibliothèque d'arborescence abstraite.

Nous devons d'abord l'installer :

npm install esprima

Puis appelez :

const esprima=require('require'')

Ensuite, il est temps de procéder à l'analyse

Un exemple AST simple

Prenons d'abord un exemple simple :
fonction a(b){}

Passé après esprima analyse, le diagramme de structure généré est le suivant :

{
    "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"
}

Idée :

1 La description FunctionDeclaration est une expression de fonction, entrez l'attribut params.

2. Déterminez si le type de chaque paramètre est Identifiant. L'identifiant sous l'attribut params représente un paramètre.

3. Trouvez la valeur de l'attribut name, le résultat est ['b'].

Sur la base des idées ci-dessus, nous pouvons écrire une méthode simple pour obtenir des paramètres.

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
}

Testez-le, obtenez le résultat ["b"] et célébrez la fin des travaux.

Eh bien, ne soyez pas trop content. Il faut savoir qu'il n'y a pas moins de 10 façons de créer des fonctions, et il existe plusieurs façons d'écrire des paramètres...

Voici ce qui suit. certaines des méthodes de création de fonctions et des idées sur la façon d'écrire des paramètres

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){}})()")

 ? Si vous avez l'idée de​​prononcer "I K", c'est que ma simulation est assez réussie - -...

En fait, il suffit de la diviser en plusieurs situations (les types de de nombreuses méthodes d'écriture sont les mêmes), il peut être complètement pénétré dans tous les objets paramètres ci-dessus, puis l'obtention des paramètres est une question de boucle + jugement.

En raison de problèmes d'espace, nous ne les analyserons pas un par un ici, mais uniquement les types utilisés dans l'arbre d'analyse AST et quelques points d'attention.

Structure de la fonction

Instruction de déclaration de variable et instruction d'expression

Dans les commentaires ci-dessus, laissez a=function(x=1){} et a=function(... x ){} a deux significations.

où let a=function(x=1){} fait référence à l'instruction de déclaration de variable. Le type correspondant de

est VariableDeclaration. Vous devez entrer sa valeur initiale init pour obtenir l'emplacement. de la fonction. L'objet de syntaxe, son type est l'expression de fonction FunctionExpression, puis recherchez-le dans les paramètres.

Instruction de déclaration de variable :

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

Et a=function(...x){} est une instruction d'expression, et le type correspondant de

est ExpressionStatement, qui doit être saisi Son expression expression est obtenue à l'intérieur de l'expression. À ce stade, nous devons entrer le côté droit (attribut droit) de l'expression d'affectation (le type est AssignmentExpression
obtient l'objet syntaxique où se trouve la fonction). localisé. Son type est également une expression de fonction FunctionExpression.

Instruction d'expression :

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

Déclaration de classe et constructeur de fonction

Le type de déclaration de classe correspondant est ClassDeclaration(class xx{...}) ou ClassExpression( let x=class{...}), l'un d'eux est une déclaration et l'autre est une expression, et les méthodes de traitement sont les mêmes
Entrez l'objet, recherchez l'objet dont le type est le constructeur et obtenez le. données de paramètres.

Instruction de déclaration de classe :

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

Le type correspondant au constructeur Function est NewExpression ou ClassExpression. Les paramètres sont à l'intérieur des arguments de la propriété, mais les paramètres de Function sont tous des chaînes, et enfin Un paramètre doit être une instruction interne de la fonction, donc pour le constructeur Function, la chaîne est traitée.

Constructeur de fonction

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

Fonction flèche

Le type de fonction flèche est ArrowFunctionExpression, seul le nom est différent et la structure interne est presque la même.

C'est tout pour le type de structure fonctionnelle.

Structure des paramètres

Les types de paramètres sont les suivants :

Identifiant : Le type de valeur de paramètre que nous devons finalement obtenir

Propriété : Quand il y a est un paramètre déconstruit, par exemple, [a,b] ou {x,y>

ArrayPattern : les paramètres de déstructuration existent et sont des tableaux, tels que [a,b]

ObjectPattern : déstructuration les paramètres existent et sont des objets, tels que { x,y>

RestElement : Il existe des opérateurs d'expansion, tels que (...args)

Il suffit de mettre en place une boucle récursive. L'idée est la même que ci-dessus, un calque entre dans un autre calque, regardez à l'intérieur.

Résumé

L'espace est limité, je vais donc juste écrire ceci, puis faire un résumé.

Il n'y a qu'un seul objectif principal dans cet article. Grâce à l'analyse de type de chaque objet dans l'arborescence AST, le type représente la signification du code correspondant et la sémantique du code. Par exemple,

VariableDeclaration doit. have internal Il y a init, pourquoi ? Parce que la déclaration de variable a une valeur initiale Si vous ne la définissez pas, elle ne sera pas définie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!