首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

精读《手写 JSON Parser》

1 引言 JSON.parse 是浏览器内置的 API,但如果面试官让你实现一个怎么办?...2 概述 & 精读 要解析 JSON 首先要理解语法概念,之前的 精读《手写 SQL 编译器 - 语法分析》 系列也有介绍过,不过本文介绍的更形象,看下面这个语法图: 这是关于 Object 类型的语法描述图...原文提到的 JSON 错误提示优化非常棒,想想你在开发中突然看到下面的提示,是不是很蒙圈: Unexpected token "a" 既然我们是自己写的 JSON 解析器,就可以进行更友好的异常提示,...语法解析入门系列文章,建议阅读顺序: 精读《手写 SQL 编译器 - 词法分析》 精读《手写 SQL 编译器 - 文法介绍》 精读《手写 SQL 编译器 - 语法分析》 精读《手写 SQL 编译器 -...回溯》 精读《手写 SQL 编译器 - 语法树》 精读《手写 SQL 编译器 - 错误提示》 精读《手写 SQL 编译器 - 性能优化之缓存》 精读《手写 SQL 编译器 - 智能提示》 syntax-parser

62020

手写JSON.parse和JSON.stringify

手写JSON.parse 有两种实现方式,第1种初级版没啥难度,第2种利用状态机自己去解析字符流,需要先学习下编译原理相关的知识,否则理解起来可能有点蒙。...初级版本 JSON parse 直接通过 eval 函数实现,不过注意需要在 json 字符串前后拼上括号,否则会当成代码块报错解析导致报错: function parse(json) { const...txt = '(' + json + ')' return eval(txt) } 高级版本 JSON parse 主要利用有限状态机来做分词,然后再根据拿到的分词数据组装成 json 对象...stateMachine = stateMachine(char) } return tokens } return parse(str) } 将拿到的分词数组拼成 json...下面是一个简版的 JSON.stringify,只是为了展示核心原理,很多异常情况并未处理,主要就是利用递归方法去处理值里的对象和数组,其他的基本数据类型只用直接转成对应的 toString 形式拼接进去就行了

19710
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手写JSON.parse和JSON.stringify

    搞懂了有限状态机,手写各种解析器都不在话下,主要区别也就是考虑怎么去设计各种状态流转。...手写JSON.parse有两种实现方式,第1种初级版没啥难度,第2种利用状态机自己去解析字符流,需要先学习下编译原理相关的知识,否则理解起来可能有点蒙。...初级版本 JSON parse直接通过 eval 函数实现,不过注意需要在 json 字符串前后拼上括号,否则会当成代码块报错解析导致报错:function parse(json) { const txt...= '(' + json + ')' return eval(txt)}高级版本 JSON parse主要利用有限状态机来做分词,然后再根据拿到的分词数据组装成 json 对象。...下面是一个简版的 JSON.stringify,只是为了展示核心原理,很多异常情况并未处理,主要就是利用递归方法去处理值里的对象和数组,其他的基本数据类型只用直接转成对应的 toString 形式拼接进去就行了

    18310

    js高频手写题总结

    val; } } else { // 处理没有 value 的参数 paramsObj[param] = true; } }) return paramsObj;}手写...// 手写简化版// 节流函数const throttle = (fn, delay = 500) => { let flag = true; return (...args) => { if...(6)正则和 JSON 方法 在第4种方法中已经使用 toString 方法,其中仍然采用了将 JSON.stringify 的方法先转换为字符串,然后通过正则表达式过滤掉字符串中的数组的方括号,最后再利用...JSON.parse 把它转换成数组:let arr = [1, [2, [3, [4, 5]]], 6];function flatten(arr) { let str = JSON.stringify...是此次传进来的数值5,m值还是上一步中的7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数由于后面没有传入参数,等于返回的temp函数不被执行而是打印,了解JS

    89860

    手写Koa.js源码

    第二篇文章是看了Express的基本用法,更主要的是看了下他的源码:手写Express.js源码 Express的源码还是比较复杂的,自带了路由处理和静态资源支持等等功能,功能比较全面。...从上面两个例子的代码来看,Koa跟Express有几个明显的区别: ctx替代了req和res 可以使用JS的新API了,比如async和await 手写源码 手写源码前我们看看用到了哪些API,这些就是我们手写的目标...本文的手写源码全部参照官方源码写成,文件名和函数名尽量保持一致,写到具体的方法时我也会贴上官方源码地址。...Koa类 从Koa项目的package.json里面的main这行代码可以看出,整个应用的入口是lib/application.js这个文件: "main": "lib/application.js",...Express源码可以看我之前这篇文章:手写Express.js源码 Koa的思路看起来更清晰,Koa本身的库只是一个内核,只有中间件功能,来的请求会依次经过每一个中间件,然后再出来返回给请求者,这就是大家经常听说的

    1.1K20
    领券