javaScript的序列化与反序列化

render函数的基本实现

javaScript的序列化与反序列化

- 一，js中的序列化
- 二，序列化
- 三，反序列化
- 四，总结

一，js中的序列化

js中序列化就是对象转换成json格式的字符串，使用JSON对象的stringify方法，接收一个javaScript对象，返回一个json字符串。主要使用场景用于数据传输和对象全等对比。

const person = {name: "John",age: 30,test: {tips: '我叫王大锤',site: 'http://www.example.com',screen: null},city: "New York",
};JSON.stringify(person)

反序列化使用JSON对象的parse方法，接收一个json字符串。返回javaScript对象。主要使用场景，处理接口返回的数据，缓存数据处理。

JSON.parse(JSON.stringify(person))

本文主要讲述该功能的实现及序列化原理和反序列化

二，序列化

观察json数据的格式，发现结构和javaScript的对象结构一样，只是整体都是字符串。原本的对象键都是用双引号包裹，值如果是字符串类型是也是双引号包裹，如果不是则是没有引号包裹。
在这里插入图片描述
数字和null值都没有被引号包裹。所以只有值是字符串的时候才需要被双引号包裹，其他类型直接转字符串。通过json字符串的规律，可以把对象对象变成json字符串。

class CustomJson {/*** 序列化函数* @param {object} param * @returns {string}*/stringify(param) {// 判断是否对象如果不是或不可转换成序列化字符串,抛出错误if (typeof param === 'object' && param !== null) {// 序列化回调函数const stringify = (p) => {const result = []// 分三种类型, 对象数组, 和非数组和对象或null类型// 使用栈的特性保存处理后的字符串, 也可以使用字符串拼接// 要手动拼接逗号// 字符串数据用双引号包裹再转成字符串, 其他基本类型数据直接转字符串if (Array.isArray(p)) {result.push('[')p.forEach((item, index) => {result.push(`${stringify(item)}${index !== p.length - 1 ? ',' : ''}`)})result.push(']')} else if (typeof p === 'object' && p !== null) {result.push('{')const len = Object.keys(p).lengthObject.keys(p).forEach((key, index) => {result.push(`"${key}":${stringify(p[key])}${(len - 1 !== index) ? ',' : ''}`)})result.push('}')} else {if (typeof p === 'string') {result.push(`"${p}"`)} else {result.push(`${p}`)}}// 最后将数组转换成字符串return result.join('')}return stringify(param)} else {throw new Error('param is not object')}
}

序列化验证一下

const person = {name: "John",age: 30,test: {tips: '我叫王大锤',site: 'http://www.example.com',screen: null,test: {tips: '我叫王大锤',site: 'http://www.example.com',screen: null,test: {tips: '我叫王大锤',site: 'http://www.example.com',screen: null,}}},city: "New York",list: ['1',2,3,{a: [{b: [1,2,3,4,5]}]}]
};
const test2 = ['1',2,3,{a: [{b: [1,2,3,4,5]}]}
]
const explamJSon = new CustomJson()
const testStr = explamJSon.stringify(person)
console.log('testStr 序列化测试对象', testStr)
console.log('JSON.parse 使用原生反序列化', JSON.parse(testStr))const testStr2 = explamJSon.stringify(test2)
console.log('testStr2 序列化测试对象', testStr2)
console.log('JSON.parse 使用原生反序列化', JSON.parse(testStr2))

可以正常转换成json字符串
在这里插入图片描述
为了验证格式的正确性，使用原生的JSON.parse反序列化转换成对象

const explamJSon = new CustomJson()
const testStr = explamJSon.stringify(person)console.log(testStr)console.log(JSON.parse(testStr))

在这里插入图片描述

测试结果，使用自定义序列化函数序列化的结果可以被原生的JSON.parse函数反序列化。验证成功。

三，反序列化

顾名思义反序列化与序列化的作用相反，序列化的时候我们将js对象转换成了json字符串。现在将json字符串转换成js对象。这个方法比序列化要复杂一些，序列化的时候对象本身格式是固定的。有特定的方法来处理。反序列化本身是要处理字符串，通过两分半的观察，json格式的字符串也是有规律的。每个属性之间的逗号可以作为分割符号来拆解字符串。拆解到最小颗粒度将值还原，最后返回结果。

class CustomJson {/*** 反序列化* @param {string} jsonData * @returns {object}*/parse (jsonData) {/*** 查询索引, 因为json之中使用英文逗号作为分割每一项, 使用栈先出,后进后出的特性, 获取,的坐标. 用数组存储返回* @param {string} str * @returns {array}*/const queryIdx = (str) => {const list = []let tempArr = []for (let i = 0; i < str.length; i += 1) {if (str[i] === '{' || str[i] === '[') {tempArr.push(str[i])}if (tempArr[tempArr.length - 1] === '{' && str[i] === '}') {tempArr.pop()}if (tempArr[tempArr.length - 1] === '[' && str[i] === ']') {tempArr.pop()}if (str[i] === ',' && tempArr.length === 0) {list.push(i)}}return list}/*** 还原数组, 在拿到分割坐标的基础之上, 将json字负串分解成字符串片段, 用数组存储返回* @param {string} val * @returns {array}*/const splitObject = (val) => {const s = val.slice(1, val.length - 1)const idxList = queryIdx(s)const tempArr = []let silceIdx = 0idxList.forEach(idx => {tempArr.push(s.slice(silceIdx, idx))silceIdx = idx + 1})tempArr.push(s.slice(silceIdx))return tempArr}/*** 分解字符串, 分别处理数组和对象* @param {string} str * @returns {object}*/const decomposeStr = (str) => {/*** 判断是不是一个合法的json字符串, 如果不是抛出错误*/if (jsonData[0] === '{' && jsonData[jsonData.length - 1] !== '}' || jsonData[0] === '[' && jsonData[jsonData.length - 1] !== ']') {throw new Error('jsonData is not json string')} else if (jsonData[0] != '{' || jsonData[0] === '[') {throw new Error('jsonData is not json string')}const result = str[0] === '[' ? [] : {}if (Array.isArray(result)) {const arr = splitObject(str)arr.forEach(item => {if (item.trim()[0] === '{' && item.trim()[item.trim().length - 1] === '}' || item.trim()[0] === '[' && item.trim()[item.trim().length - 1] === ']'){result.push(decomposeStr(item.trim()))} else {result.push(convertVlaue(item.trim()))}})} else {const arr = splitObject(str)arr.forEach(item => {if (item.trim()[0] === '{' && item.trim()[item.trim().length - 1] === '}' || item.trim()[0] === '[' && item.trim()[item.trim().length - 1] === ']'){result.push(decomposeStr(item.trim()))} else {const keyValues = item.trim()const divideIdx = keyValues.indexOf(':')const key = keyValues.slice(0, divideIdx)const value = keyValues.slice(divideIdx + 1)result[key.trim().slice(1, key.length - 1)] = convertVlaue(value)}})}return result}/*** 转换值, 根据之前不同的类型,将值还原, * 在序列化的时候, 因为特殊处理了字符串数据,发现是有双引号包裹的去掉双引号.* 没有双引号包裹的特殊值,特殊处理* @param {string} val * @returns {any}*/const convertVlaue = (val) => {if (val[0] === '"' && val[val.length - 1] === '"') {return val.slice(1, val.length - 1)} else if (val === 'null') {return null} else if (val === 'true') {return true} else if (val === 'false') {return false} else if (val === 'NaN') {return NaN} else if (Number(val) === 0 || Number(val)) {return Number(val)} else if (val[0] === '{' && val[val.length - 1] === '}' || val[0] === '[' && val[val.length - 1] === ']') {return decomposeStr(val)} else {return val.trim()}}return decomposeStr(jsonData)}
}

测试


console.log('使用自定义反序列化', explamJSon.parse(testStr))
console.log('原生JSON.stringify序列化自定义反序列化结果', JSON.parse(testStr))

能够在原生与自定义之间转换。
在这里插入图片描述
异常判断

const explamJSon = new CustomJson()
// 非合法json字符串
console.log('异常判断', explamJSon.parse('1111'))
// 非合法对象
console.log('异常判断', explamJSon.stringify('1111'))