【Vue源码】AST抽象语法树 - 指针- 递归 - 栈 - 正则表达式 - 手写实现parse

YK菌

已于 2024-02-25 21:46:52 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架Vue 文章标签： vue.js 正则表达式前端

于 2021-07-28 19:54:01 首次发布

本文链接：https://blog.csdn.net/weixin_44972008/article/details/118058636

文章目录

1. 抽象语法树是什么
2. 知识储备
3. 实现AST

在这里插入图片描述
https://gitee.com/ykang2020/vue_learn

1. 抽象语法树是什么

模板语法
在这里插入图片描述

在这里插入图片描述

抽象语法树（Abstract Syntax Tree）本质上就是一个JS对象
在这里插入图片描述
抽象语法树与我们之前学的虚拟节点有什么关系呢

2. 知识储备

2.1 指针

在这里插入图片描述

// 试寻找字符串中，连续重复次数最多的字符
let str = 'aaaaaaabbbbbbbbbbbccccccccccccccccccccccddddddddd'

let i = 0
let j = 1

let maxRepeatCount = 0
let maxRepeatChar = ''

while (i <= str.length - 1) {
   
   
  if (str[i] !== str[j]) {
   
   
    console.log(`${
     
     i}和${
     
     j}之间的字母${
     
     str[i]}连续重复了${
     
     j-i}次`)
    if (j - i > maxRepeatCount) {
   
   
      maxRepeatCount = j - i
      maxRepeatChar = str[i]
    }
    i = j
  }
  j++
}
console.log(`字母${
     
     maxRepeatChar}连续重复次数最多，重复了${
     
     maxRepeatCount}次`)

在这里插入图片描述

2.2 递归

在这里插入图片描述
直接暴力递归

function fib(n) {
   
   
	return n === 0 || n === 1 ? 1 : fib(n-1) + fib(n-2)
}

加入缓存对象

let cache = {
   
   }
function fib(n) {
   
   
	if(cache.hasOwnProperty(n)){
   
   
		return cache[n]
	}
	let value =  n === 0 || n === 1 ? 1 : fib(n-1) + fib(n-2)
	cache[n] = value
	return value
}

在这里插入图片描述

let arr = [1, 2, 3, [4, 5, [6, 7], 8], 9, [10, 11]]

function convert(arr){
   
   
  let result = []
  arr.forEach(item => {
   
   
    if(typeof item === 'number'){
   
   
      result.push