JS 함수 매개변수 이름을 얻는 방법은 무엇입니까? AST를 사용하여 js 함수 매개변수 이름을 얻는 방법 분석

이 기사에서 제공하는 내용은 JS 함수 매개변수 이름을 얻는 방법입니다. AST를 사용하여 js 함수 매개변수 이름을 얻는 방법에 대한 분석은 특정 참고 가치가 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

앞에 쓰기

최근 프로젝트에서 함수 매개변수 이름을 얻어야 할 필요성이 생겼습니다. 아주 간단해 보이지만 ES6에서는 매개변수와 함수가 다음과 같이 작성됩니다. 온갖 이상한 방법이 다 있을 겁니다. 여러 라이브러리를 살펴보니 기본적으로는 규칙적입니다.
에서는 일반적인 작성 방법을 다룰 수 있지만 약간 경계를 넘으면 정확하게 일치하지 않는 경우가 많습니다.

그래서 AST를 활용하여 커버리지 검색을 해보자는 아이디어를 생각해냈습니다.

Concept

추상 구문 트리(추상 구문 트리 또는 약어로 AST) 또는 구문 트리(구문 트리)는 추상 구문 구조를 트리와 같이 표현한 것입니다. 소스 코드

AST를 사용하는 이유

AST를 통해 코드 검색도 가능한 것 같은데 왜 정규식 대신 AST를 사용할까요?

함수에서 매개변수 이름을 가져오는 것을 의미합니다. 과장하면 다음과 같은 표현이 있습니다.

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

매개변수는 [a,b,c,d,e ,f,g ,h]

매개변수 이름을 일치시키기 위해 정규식을 사용하시겠습니까...

AST는 코드의 의미에 따라 편집됩니다. 정규식은 코드의 문자 그대로의 의미로만 편집할 수 있습니다.

AST를 사용하여 위의 과장된 함수를 분석하면 해당 매개변수 이름을 쉽게 얻을 수 있습니다

Esprima

우리는 esprima를 사용합니다. Javascript 코드를 추상 트리로 구문 분석합니다.

먼저 설치해야 합니다:

npm install esprima

다음 호출:

const esprima=require( ' 요구'')

그럼 분석 시간입니다

간단한 AST 예시

먼저 간단한 예시를 들어보겠습니다: #🎜🎜 #function a(b){}

esprima로 구문 분석한 후 구조 다이어그램은 다음과 같이 생성됩니다.

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

Idea:

1. params 속성에 입력된 함수 표현식입니다.

2. params 속성 아래의 식별자가 매개변수를 나타내는지 여부를 확인합니다.

3. name 속성의 값을 찾으면 결과는 ['b']입니다.

위의 아이디어를 바탕으로 매개변수를 얻는 간단한 방법을 작성할 수 있습니다.

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
}

테스트하고 결과 ["b"]를 얻고 작업의 끝을 축하합니다.

글쎄, 너무 기뻐하지 마세요. 함수를 만드는 방법은 10가지가 넘고, 매개변수를 쓰는 방법도 여러 가지가 있다는 걸 아셔야 합니다...

#🎜🎜 #다음은 그 일부입니다. 함수 생성 방법 및 매개변수 작성 방법

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

어떤 아이디어가 있나요? "I K"라고 발화한다는 생각이 든다면, 나의 가식이 꽤 성공했다는 의미입니다 - -...

사실 여러 상황으로 나누어서 보면 됩니다( 많은 작성 방법의 종류는 동일합니다) 위의 모든 매개 변수 개체에 완전히 침투 할 수 있으며 그 다음 매개 변수를 얻는 것은 루프 + 판단의 문제입니다.

공간 문제로 인해 여기서는 하나씩 분석하지 않고 AST 분석 트리에서 사용되는 유형과 몇 가지 주의할 점만 분석하겠습니다.

함수 구조

변수 선언문 및 표현식문

위 주석에서 let a=function(x=1){} 및 a= function(...x){}에는 두 가지 의미가 있습니다.

let a=function(x=1){}은 변수 선언문을 참조합니다.

해당 유형은 VariableDeclaration입니다. 초기 값을 입력해야 합니다. 함수가 위치한 구문 객체의 유형은 FunctionExpression이며 params에서 검색합니다.

변수 선언문:

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

And a=function(...x){}는 표현식 문이고,

해당 유형은 다음과 같습니다. ExpressionStatement, 표현식 내부로 들어가려면 해당 표현식을 입력해야 합니다. 이때 할당 표현식(유형은 AssignmentExpression)의 오른쪽(오른쪽 속성)을 입력해야 합니다.

함수가 있는 구문 개체를 가져옵니다. 해당 유형이 동일합니다. 또한 FunctionExpression 함수 표현식입니다.

Expression 문:

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

class 선언 및 함수 생성자

클래스 선언에 해당하는 유형은 ClassDeclaration(class xx{...} ) 또는 ClassExpression(let x=class{...}) 중 하나는 선언이고 다른 하나는 표현식이며 처리 방법은 동일합니다.

객체를 입력하고 종류가 같은 객체를 찾습니다. 생성자를 생성하고 매개변수 데이터를 얻습니다.

class 선언문:

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

Function 생성자에 해당하는 유형은 NewExpression 또는 ClassExpression이고 매개변수는 속성 인수 내부에 있지만 Function의 매개변수는 모두 문자열입니다. , #🎜🎜 #그리고 마지막 매개 변수는 함수의 내부 명령문이어야 하므로 Function 생성자에 대해서는 문자열이 처리됩니다.

함수 생성자

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

화살표 함수

화살표 함수 종류는 ArrowFunctionExpression이고 이름만 다를 뿐 내부 구조는 거의 동일합니다. .

함수 구조 유형에 대한 내용은 이게 다입니다.

매개변수 구조

매개변수 유형은 다음과 같습니다.

식별자: 궁극적으로 획득해야 하는 매개변수 값 유형

#🎜🎜 #Property: [a,b] 또는 {x,y}와 같은 구조 분해 매개변수가 있는 경우

ArrayPattern: 분해 매개변수가 있고 배열인 경우 [a,b]

#🎜🎜 #ObjectPattern: 구조 분해 매개변수가 존재하며 {x,y}

RestElement: (...args와 같은 확장 연산자가 존재함) )

재귀 루프만 설정하면 됩니다. 아이디어는 위와 동일하며 한 레이어가 다른 레이어에 들어가고 검색이 내부적으로 수행됩니다.

요약

공간이 협소해서 너무 많이 적고 요약을 해보겠습니다.

이 글의 주요 주제는 단 하나입니다. AST 트리의 각 객체에 대한 유형 분석을 통해 유형은 해당 코드의 의미와 코드의 의미를 나타냅니다. 예를 들어

VariableDeclaration 내에 init가 있어야 합니다. ? 변수 선언에는 초기값이 있기 때문입니다. 설정하지 않으면 정의되지 않습니다.

Type은 제가 이번에 말한 것보다 훨씬 더 자세한 내용이 공식 홈페이지(또는 Google)에 나와 있습니다. .

위 내용은 JS 함수 매개변수 이름을 얻는 방법은 무엇입니까? AST를 사용하여 js 함수 매개변수 이름을 얻는 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!