JSON.parse() 的实现

时间 2020-08-21

标签 json.parse json parse 实现栏目 JSON 繁體版

原文原文链接

1. JSON.parse()

JSON.parser() 是JSON 格式的一个函数, 它用于将object 数据类型转换成为JSON 数据类型, 这里咱们来本身实现一下JSON.parser() 函数.git

2. 前置知识

2.1 JSON格式中的数据类型

JSON 格式中, 能够将须要处理数据类型分为如下6类, 注意这里的意思是须要处理的属性类型有如下6 类, 表示的是数据处理的6 种状况;
真实的数据分类并非按如下分类的, 这里须要注意.github

字符串
数字
布尔值
null 值
符号
包含转义字符的字符串(字符串和包含转义字符的字符串处理方式不一样)

2.2 转义字符的处理

2.2 判断对象是否相等

本身实现一个函数, 用于判断两个对象是否相等, 实现代码以下:json

// 判断两个对象是否相等的函数
const objectEquals = (a, b) => {
    // 若是 a, b相等，则返回 true，不然返回 false

    // Object.getOwnPropertyNames()方法返回一个由指定对象的全部自身属性的属性名（包括不可枚举属性但不包括Symbol值做为名称的属性）组成的数组
    // 换句话来讲 Object.getOwnPropertyNames()方法返回的是对象全部 key 组成的数组 list
    var aProps = Object.getOwnPropertyNames(a)
    var bProps = Object.getOwnPropertyNames(b)
    if (aProps.length != bProps.length) {
        return false
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i]
        if (typeof a[propName] === 'object') {
            let judge = objectEquals(a[propName], b[propName])
            if (!judge) {
                return false
            }
        } else if (a[propName] !== b[propName]) {
            return false
        }
    }
    return true
}

2.3 寻找匹配的字符串

这里匹配的字符串主要是括号的匹配, 理解下面的代码数组

// 返回对象 '{' 对应的 '}'，返回数组 '[' 对应的 ']'
const getAimIndex = (string, index) => {
    let str = string
    // breakStr是结束判断字符
    let startStr = str[index]
    let breakStr = startStr === '{' ? '}' : ']'
    let judgeNum = 0
    /*
    判断逻辑：
        1. 遍历从 i = 1 开始
        2. if temp = '{' || '[', judgeNum++
        3. if temp = '}' || ']', judgeNum--
        4. if temp = '}' || ']' && judgeNum === 1, return i
     */
    for (let i = index, len = str.length; i < len; i++) {
        let temp = str[i]
        if (temp === startStr) {
            judgeNum++
        } else if (temp === breakStr && judgeNum !== 1) {
            judgeNum--
        } else if (temp === breakStr && judgeNum === 1) {
            return i
        }
    }
    // log('judgeNum: ', judgeNum)
}

let str = '{{{}}}'
console.log(getAimIndex(str, 0))

2.4 基础的递归思想

这个实现过程当中, 不少内容的实现都须要递归去完成, 所以对于递归有基本的了解会比较好理解.app

理解过程可能不会很费劲, 可是若是本身实现的话, 我的认为若是可以将 Title2.2 判断对象是否相等独立实现就能够本身实现JSON.parse()函数

3. 实现流程

3.1 将JSON 字符串解析成为tokens 数组

在生产tokens 数组中, 直观上, 咱们会认为咱们只须要将JSON 中有意义的字符串添加在tokens 数组中便可, 可是, 这样作会存在一个问题:jsonp

对于以下代码this

{
    "obj1": true,
    "obj2": "true"
}

上面代码中, obj1 obj2 属性本质上是不同的, 一个是String 类型, 一个是Boolean 类型, 而咱们从JSON 中读取的内容类型均为String 类型; 所以为了确保完美解析JSON 数据, 咱们必须在tokens 数组中存储JSON 数据的值类型prototype

同时, 因为咱们生成对象的时候必须依赖值的类型, 值自己去生成对象, 所以须要提供一个方法返回值内容code

综上所述, 咱们使用面向对象的思想来解决这个问题:

const log = console.log.bind(console)

const TYPE = {
    "[object Number]": 1,
    "[object String]": 2,
    "[object Null]": 3,
    "[object Boolean]": 4,
    "character": 5,
    "escapeCharater": 6
}

const includeEscapeCharacter = function(str) {
    let asciiEscape = [0, 39, 34, 92, 10, 13, 11, 9, 8, 12]
    for (let i = 0, len = str.length; i < len; i++) {
        let temp = str[i].charCodeAt(0)
        if (asciiEscape.indexOf(temp) !== -1) {
            return true
        }
    }
    return false
}

const dealEscape = (str) => {
    let escape = {
        b: `\b`,
        f: '\f',
        n: '\n',
        r: '\r',
        t: '\t',
        '\\': '\\',
        '\/': '\/',
        '\"': '\"',
        "\'": "\'"
    }
    let result = ''
    let string = str
    let i = 0
    let len = string.length
    // log(str)
    while (i < len) {
        let temp = string[i]
        if (temp === '\\') {
            let endIndex = i + 1
            result += escape[string[endIndex]]
            i = endIndex + 1
        } else {
            result += temp
            i++
        }
    }
    return result
}

const getType = function (value) {
    if (value === ':' || value === '{' || value === '}' || value === '[' || value === ']') {
        return 5
    }
    if (includeEscapeCharacter(value)) {
        return 6
    }
    let type = Object.prototype.toString.apply(value)
    return TYPE[type]
}

class JsonValue {
    constructor(value) {
        this.value = String(value)
        this.type = getType(value)
    }

    toString() {
        if (this.type === 1) {
            return Number(this.value)
        } else if (this.type === 2) {
            return String(this.value)
        } else if (this.type === 3) {
            return null
        } else if (this.type === 4) {
            return this.value === 'true'
        } else if (this.type === 5) {
            return String(this.value)
        } else if (this.type === 6) {
            return dealEscape(this.value)
        }
    }
}

const __main = () => {
    let a = new JsonValue('a')
    let b = new JsonValue(1)
    log(a)
    log(a.toString())
    log(b)
    log(b.toString())
}

__main()

tokens 数组中存储的都是JsonValue 类型的数据;

接下来遍历JSON 数据添加内容便可

3.2 将tokens 数组拼接成为Object 对象

这个过程就是遍历tokens 数组, 依照符号(:)的索引index, tokens[index - 1] 为key, tokens[index + 1] 为value; 找到key-value 对, 而后添加到结果便可; 须要注意的是这个过程须要考虑Object 的嵌套, 以及Array中Object 的嵌套, 这里须要使用递归去处理

这个过程的核心代码以下: 根据不一样的状况, 处理不一样的内容

// 获取key-value对的value值
const getTokensValue = (index, array) => {
    let judge = array[index].value
    if (judge === '{') {
        let nextIndex = getAimIndex(array, index)
        let sliceList = array.slice(index + 1, nextIndex)
        return parsedDict(sliceList)
    } else if (judge === '[') {
        let nextIndex = getAimIndex(array, index)
        let sliceList = array.slice(index + 1, nextIndex)
        return conversionObj(sliceList)
    } else {
        return array[index].toString()
    }
}

4. code

代码地址: JSON.parse() 的实现