vue源码解析---AST抽象语法树

最新推荐文章于 2025-05-29 13:51:05 发布

前端贾公子

最新推荐文章于 2025-05-29 13:51:05 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_63358859/article/details/126119350

本文介绍了抽象语法树（AST）的概念，通过JavaScript指针和递归应用到斐波那契数列和字符串格式化，展示了栈结构在构建智能重复函数中的运用。详细讲解了如何解析模板字符串和构建AST树的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先AST是什么？

在计算机科学中，抽象
语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

我们可以理解为：把 template（模板）解析成一个对象，该对象是包含这个模板所以信息的一种数据，而这种数据浏览器是不支持的，为Vue后面的处理template提供基础数据。

指针思想

JavaScript中的指针其实就是下标位置，下面以一个例子来使用指针思想。

寻找字符串中连续最多的字符

（如果i和j指向的字是一样的j不动，i后移，不一样说明之间的字母是连续的让j追上i 后移）

let str = 'aaaaabbcccdd'

// 指针
let i = 0, j = 0, maxlen = 0, maxStr = '';
while (i <= str.length) {
    if (str[i] != str[j]) {
        console.log(`${j}和${i}之间的文字相同都是字符${str[j]}他们重复了${i - j}次`);
        if (maxlen < i - j) {
            maxlen = i - j
            maxStr = str[j];
        }
        j = i
    }
    i++

}
console.log(maxStr);

递归深入（斐波那契数列）

规则复现就要想到递归

试输出斐波那契数列第十项思考是否有重复计算（采用缓存的思路减少重复计算）

function fib(n) {
    console.count('计数')
    let v = n == 0 || n == 1 ? 1 : fib(n - 1) + fib(n - 2)
    return v
}
let cache = {}
function fib2(n) {
    console.count('计数')
    // hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，
    if (cache.hasOwnProperty(n)) {
        return cache[n]
    }
    let v = n == 0 || n == 1 ? 1 : fib2(n - 1) + fib2(n - 2)
    cache[n] = v
    return v
}
for (let i = 0; i <= 9; i++) {
    fib2(i)

}
console.log(cache);