1 引言 JSON.parse 是浏览器内置的 API，但如果面试官让你实现一个怎么办？...2 概述 & 精读 要解析 JSON 首先要理解语法概念，之前的 精读《手写 SQL 编译器 - 语法分析》 系列也有介绍过，不过本文介绍的更形象，看下面这个语法图： 这是关于 Object 类型的语法描述图...原文提到的 JSON 错误提示优化非常棒，想想你在开发中突然看到下面的提示，是不是很蒙圈： Unexpected token "a" 既然我们是自己写的 JSON 解析器，就可以进行更友好的异常提示，...语法解析入门系列文章，建议阅读顺序： 精读《手写 SQL 编译器 - 词法分析》 精读《手写 SQL 编译器 - 文法介绍》 精读《手写 SQL 编译器 - 语法分析》 精读《手写 SQL 编译器 -...回溯》 精读《手写 SQL 编译器 - 语法树》 精读《手写 SQL 编译器 - 错误提示》 精读《手写 SQL 编译器 - 性能优化之缓存》 精读《手写 SQL 编译器 - 智能提示》 syntax-parser
手写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 形式拼接进去就行了
搞懂了有限状态机，手写各种解析器都不在话下，主要区别也就是考虑怎么去设计各种状态流转。...手写JSON.parse有两种实现方式，第1种初级版没啥难度，第2种利用状态机自己去解析字符流，需要先学习下编译原理相关的知识，否则理解起来可能有点蒙。...初级版本 JSON parse直接通过 eval 函数实现，不过注意需要在 json 字符串前后拼上括号，否则会当成代码块报错解析导致报错：function parse(json) { const txt...= '(' + json + ')' return eval(txt)}高级版本 JSON parse主要利用有限状态机来做分词，然后再根据拿到的分词数据组装成 json 对象。...下面是一个简版的 JSON.stringify，只是为了展示核心原理，很多异常情况并未处理，主要就是利用递归方法去处理值里的对象和数组，其他的基本数据类型只用直接转成对应的 toString 形式拼接进去就行了
# 思路 创建 XMLHttpRequest 实例 发出 HTTP 请求 服务器返回 XML 格式的字符串 JS 解析 XML 字符串 随着历史推进，XML 已经被淘汰，取而代之的是 JSON # 版本...if (xhr.status >= 200 && xhr.status <= 300) { let string = xhr.responseText; let json...= JSON.parse(string); } } }; xhr.send(); } # Promise 版本 function ajax (url) { return...if (xhr.status >= 200 && xhr.status <= 300) { let string = xhr.responseText; let json...= JSON.parse(string); resolve(json); } else { reject(new Error(xhr.statusText
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。...
创建一个对象类型，需要创建一个指定其名称和属性的函数；对象的属性可以指向其他对象，看下面的例子： 当代码 new Foo(...) 执行时，会发生以下事情：
# 思路 节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效 # 场景 拖拽 固定时间内只执行一次，防止超高频...
MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_...
console.log("array flat"); // 1. 因为只有数组才有 concat 方法，所以这里必须写入初始值 空数组 只能打平一层 // ...
只是有点复杂先用with,在用Proxy with with这个特性,也算是一个比较鸡肋的,他和eval并列为js两大SB特性. 不说无用, bug还多,安全性就没谁了......> 这样，就可以保证js脚本的执行，但是禁止iframe里的javascript执行top.location = self.location。...targetOrigin, [transfer]); message是传递的信息,targetOrigin指定的窗口内容,transfer取值为Boolean 表示是否可以用来对obj进行序列化,相当于JSON.stringify..., 不过一般情况下传obj时,会自己先使用JSON进行seq一遍....设置基本的安全特性 <iframe sandbox='allow-scripts' id='sandboxed' src='frame.html'> // js
中的对象给属性加引号 { "name":"nic", "age":29 } //json //与javaScript对象的区别： 结尾;号 json...弹框会弹出 2.json对象的两个方法 （1）stringify() 把JavaScript对象序列化为json字符串 var book ={ title : "pro", authors...json数据类型的实例属性 JSON.stringify(book)除了要序列化的javascript对象外，还可接收两个参数 第一个是过滤器（可以是一个数组或者函数） 当过滤器是数组时...= JSON.stringify(book,null,4); console.log(json); 也可将缩进符 变为任意字符 var json = JSON.stringify(book,null...= JSON.stringify(book); 该方法返回图书的书名
本文首发于知乎专栏——前端面试题汇总，大家可以通过文章底部的阅读原来来访问原文地址 JSON.stringfy() 的说明 JSON.stringify()方法是将一个JavaScript值(对象或者数组...函数、undefined被单独转换时，会返回undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)....转化例子 JSON.stringify({}); // '{}' JSON.stringify(true); //...()和JSON.parse()的代码 if (!...中，所有字符串都需要用双引号包起来 参考文章 JSON.stringify 和 JSON.parse 的实现 JSON.stringify() JSON.parse()
# 思路 防抖函数原理：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时 防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一...
我们来谈谈关于「JS手写」的相关知识点和具体的算法。 该系列的文章，大部分都是前面文章的知识点汇总，如果想具体了解相关内容，请移步相关系列，进行探讨。...文章list CSS重点概念精讲 JS_基础知识点精讲 网络通信_知识点精讲 好了，天不早了，干点正事哇。...new ES5、ES6继承 instanceof debounce & throttle reduce compose 合并对象 函数柯里化 深复制对象 Object.create 函数缓存 数组去重 手写...352" // "abc" Array.from与set去重 function unique(arr) { return Array.from(new Set(arr)) } ---- 手写
initial-scale=1.0" /> Document // 手写实现
盘点那些 JS 手写题 1. JS 基础 1...."; xhr.setRequestHeader("Accept", "application/json"); // 发送 Http 请求 xhr.send(JSON.stringify...是此次传进来的数值5，m值还是上一步中的7，所以add(m+n)=add(7+5)=add(12)，此时m=12，并且返回temp函数 由于后面没有传入参数，等于返回的temp函数不被执行而是打印，了解JS...将js对象转化为树形结构 // 转换前： source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title...实现 JSONP JSONP，全称 JSON with Padding，为了解决跨域的问题而出现。虽然它只能处理 GET 跨域，虽然现在基本上都使用 CORS 跨域，但仍然要知道它。
js数组和json经常需要相互转换，在此记录它们之间的转换代码： //json字符串转数组 var array = [99, 100, { "name" : "Jerry" }, {"site..." : "hdjc8.com"} ]; JSON.stringify( array ); alert(array); //json字符串转数组 var jsonStr...= '[99, 100, {"age" : 20}, {"site" : "hdjc8.com"}]'; JSON.parse(jsonStr); alert(jsonStr) 发布者：
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
第二篇文章是看了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本身的库只是一个内核，只有中间件功能，来的请求会依次经过每一个中间件，然后再出来返回给请求者，这就是大家经常听说的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
