AST看这一篇就够了

作者: vincent_z | 来源:发表于2023-10-20 22:59 被阅读0次

抽象语法树（AST）是一种在编程领域中常见的数据结构，用于表示代码的语法结构。AST（抽象语法树）的解析和转换整个流程可以概括为：源代码 → 词法分析 → 语法分析 → AST 转换 → 生成代码 → 最终代码。

在 JavaScript 领域，常用的工具有 Babel、Esprima、Acorn 等，它们提供了丰富的 API 和插件系统，用于解析和转换 JavaScript 代码的 AST。本文相关知识点学习以Babel作为AST解析与转换的工具链。

AST 解析和转换

1. 词法分析（Lexical Analysis）和语法分析（Parsing）阶段：使用Babel 的解析器@babel/parser将源代码解析为 AST。

// example.js
function power(n) {
  return n * n;
}

console.log(power(5));

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
const t = require('@babel/types');
const fs = require('fs');

// 读取 example.js 文件的源代码
const sourceCode = fs.readFileSync('example.js', 'utf8');

// 解析源代码为 AST
const ast = parser.parse(sourceCode, {
  sourceType: 'module',
});

2. AST 转换（AST Transformation）阶段：使用@babel/traverse 遍历AST各个节点，使用 @babel/types 提供的 API 来创建、修改和删除 AST 节点。

// 遍历和修改 AST
traverse(ast, {
  FunctionDeclaration(path) {
    if (path.node.id.name === 'square') {
      // 将 square 函数改名为 power
      path.node.id.name = 'power';

      // 将函数参数 n 名称改为 x
      path.node.params[0].name = 'x';

      // 创建一个新的 ReturnStatement 节点
      const returnStatement = t.returnStatement(
        t.binaryExpression('*', t.identifier('x'), t.identifier('x'))
      );

      // 替换原来的 ReturnStatement 节点
      path.get('body').pushContainer('body', returnStatement);
      path.get('body').unshiftContainer('body', t.variableDeclaration('var', [t.variableDeclarator(t.identifier('y'), t.numericLiteral(10))]));    
    }
  },
});

3. 生成代码（Code Generation）阶段：使用@babel/generator将修改后的 AST 重新生成为源代码。

// 生成修改后的代码
const { code } = generator(ast);

// 将修改后的代码写入新文件 output.js
fs.writeFileSync('output.js', code);

结果

function power(x) {
  var y = 10;
  return x * x;
}

console.log(power(5));

使用Babel转换的常见节点类型

当使用 Babel 进行代码转换时，不同类型的节点对应于不同的代码结构。以下是一些常见的节点类型：

FunctionDeclaration：表示函数声明语句。
VariableDeclaration：表示变量声明语句。
ExpressionStatement：表示表达式语句。
CallExpression：表示函数调用表达式。
Identifier：表示标识符，如变量名、函数名等。
Literal：表示字面量，如数字、字符串等。

1. `FunctionDeclaration`（函数声明）节点：

输入：

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

对应的 AST 节点：

{
  "type": "FunctionDeclaration",
  "id": {
    "type": "Identifier",
    "name": "add"
  },
  "params": [
    {
      "type": "Identifier",
      "name": "a"
    },
    {
      "type": "Identifier",
      "name": "b"
    }
  ],
  "body": {
    "type": "BlockStatement",
    "body": [
      {
        "type": "ReturnStatement",
        "argument": {
          "type": "BinaryExpression",
          "operator": "+",
          "left": {
            "type": "Identifier",
            "name": "a"
          },
          "right": {
            "type": "Identifier",
            "name": "b"
          }
        }
      }
    ]
  }
}

对应的代码示例：

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

2. `VariableDeclaration`（变量声明）节点：

输入：

var x = 5;
let y = 10;
const z = 15;

对应的 AST 节点：

{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "x"
      },
      "init": {
        "type": "NumericLiteral",
        "value": 5
      }
    }
  ],
  "kind": "var"
}

对应的代码示例：

var x = 5;

3. `CallExpression`（函数调用表达式）节点：

输入：

console.log('Hello, world!');

对应的 AST 节点：

{
  "type": "ExpressionStatement",
  "expression": {
    "type": "CallExpression",
    "callee": {
      "type": "MemberExpression",
      "object": {
        "type": "Identifier",
        "name": "console"
      },
      "property": {
        "type": "Identifier",
        "name": "log"
      }
    },
    "arguments": [
      {
        "type": "StringLiteral",
        "value": "Hello, world!"
      }
    ]
  }
}

对应的代码示例：

console.log('Hello, world!');

4. `Identifier`（标识符）节点：

输入：

var x = 5;
console.log(x);

对应的 AST 节点：

{
  "type": "Identifier",
  "name": "x"
}

对应的代码示例：

5. `Literal`（字面量）节点：

输入：

var x = 5;
var str = 'Hello, world!';

对应的 AST 节点：

{
  "type": "NumericLiteral",
  "value": 5
}

对应的代码示例：

这些示例展示了不同节点类型与对应输入和代码之间的关系。通过遍历 AST 并处理不同类型的节点，你可以对代码进行修改、分析或生成新的代码。

场景与应用

1. 静态代码分析

静态代码分析是指在不执行代码的情况下，通过分析代码的结构和语义来发现潜在的问题和错误。抽象语法树为静态代码分析提供了一个强大的基础。通过遍历 AST，可以检查代码中的代码风格问题、潜在的错误、未使用的变量等。

2. 代码转换和重构

抽象语法树还可以用于代码转换和重构。通过分析和修改 AST，可以对代码进行自动化的转换和重构。例如，可以使用 AST 将一种编程语言转换为另一种，或者对现有代码进行重构以提高性能或可读性。

2.1 场景：修改函数调用参数

假设我们有以下输入代码：

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

console.log(add(2, 3));

现在，我们想要使用 Babel 修改函数调用 add(2, 3) 的参数为 add(5, 10)。

具体的可执行代码示例如下：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

const code = `
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
`;

const ast = parser.parse(code, {
  sourceType: 'module',
});

traverse(ast, {
  CallExpression(path) {
    if (
      path.node.callee.type === 'Identifier' &&
      path.node.callee.name === 'add' &&
      path.node.arguments.length === 2
    ) {
      path.node.arguments[0] = {
        type: 'NumericLiteral',
        value: 5,
      };
      path.node.arguments[1] = {
        type: 'NumericLiteral',
        value: 10,
      };
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode);

运行上述代码，输出的结果将是：

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

console.log(add(5, 10));

代码中的 traverse 遍历了 AST，并在遇到 CallExpression 节点时进行检查和修改。我们通过判断调用的函数名、参数数量等条件，找到了目标函数调用并修改了其中的参数。

2.2 场景：在函数体内插入代码

假设我们有以下输入代码：

function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice');

现在，我们想要使用 Babel 在 greet 函数的函数体内插入一条额外的 console.log 语句。

具体的可执行代码示例如下：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
const generator = require('@babel/generator').default;

const code = `
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice');
`;

const ast = parser.parse(code, {
  sourceType: 'module',
});

traverse(ast, {
  FunctionDeclaration(path) {
    if (path.node.id.name === 'greet') {
      path.node.body.body.push(
        t.expressionStatement(
          t.callExpression(
            t.memberExpression(
              t.identifier('console'),
              t.identifier('log')
            ),
            [t.stringLiteral('Additional console.log')]
          )
        )
      );
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode);

运行上述代码，输出的结果将是：

function greet(name) {
  console.log('Hello, ' + name + '!');
  console.log('Additional console.log');
}

greet('Alice');

代码中的 traverse 遍历了 AST，并在遇到函数声明的节点时进行检查和修改。我们找到了名为 greet 的函数声明，并在其函数体内部插入了一条新的 console.log 语句。

2.3 场景：修改变量声明的初始值

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
const generator = require('@babel/generator').default;

const code = `
var x = 5;
let y = 10;
const z = 15;
`;

const ast = parser.parse(code, {
  sourceType: 'module',
});

traverse(ast, {
  VariableDeclarator(path) {
    const { id } = path.node;
    if (id.name === 'x') {
      path.node.init = t.numericLiteral(10);
    } else if (id.name === 'y') {
      path.node.init = t.numericLiteral(20);
    } else if (id.name === 'z') {
      path.node.init = t.numericLiteral(30);
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode.code);

运行上述代码，输出的结果将是：

var x = 10;
let y = 20;
const z = 30;

3. 语法高亮和编辑器插件

许多文本编辑器和集成开发环境（IDE）使用抽象语法树来实现语法高亮和智能提示功能。通过解析代码为 AST，编辑器可以更好地理解代码的结构，并提供准确的代码高亮和自动补全功能。

总得来说，AST提供了许多强大的功能，包括代码转换、静态分析、代码生成、语言转换和编辑器增强等。通过利用AST，开发人员可以更好地理解、操作和优化代码，提高开发效率并实现更高质量的应用程序。

AST看这一篇就够了

AST 解析和转换

使用Babel转换的常见节点类型

1. `FunctionDeclaration`（函数声明）节点：

2. `VariableDeclaration`（变量声明）节点：

3. `CallExpression`（函数调用表达式）节点：

4. `Identifier`（标识符）节点：

5. `Literal`（字面量）节点：

场景与应用

1. 静态代码分析

2. 代码转换和重构

2.1 场景：修改函数调用参数

2.2 场景：在函数体内插入代码

2.3 场景：修改变量声明的初始值

3. 语法高亮和编辑器插件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

AST看这一篇就够了

AST 解析和转换

使用Babel转换的常见节点类型

1. FunctionDeclaration（函数声明）节点：

2. VariableDeclaration（变量声明）节点：

3. CallExpression（函数调用表达式）节点：

4. Identifier（标识符）节点：

5. Literal（字面量）节点：

场景与应用

1. 静态代码分析

2. 代码转换和重构

2.1 场景：修改函数调用参数

2.2 场景：在函数体内插入代码

2.3 场景：修改变量声明的初始值

3. 语法高亮和编辑器插件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1. `FunctionDeclaration`（函数声明）节点：

2. `VariableDeclaration`（变量声明）节点：

3. `CallExpression`（函数调用表达式）节点：

4. `Identifier`（标识符）节点：

5. `Literal`（字面量）节点：