Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve a simple version of JSON.stringify". In daily operation, I believe many people have doubts about how to achieve a simple version of JSON.stringify. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve a simple version of JSON.stringify"! Next, please follow the editor to study!

Catalogue

Preface

Six characteristics of JSON.stringify

Feature one

Characteristic two

Characteristic 3

Characteristic 4

Characteristic five

Feature 6

Implement stringify manually

Preface

JSON.stringify is an API that uses very high frequency, but it has a feature that we need to pay attention to in the process of using it to avoid burying mines for code programs.

Six characteristics of JSON.stringify

Feature one

The wrapper objects of Boolean values, numbers, and strings are automatically converted to the corresponding original values during serialization.

Now there is such an object:

Const obj = {bol: new Boolean (true), num: new Number (1), str: new String (1)}

Using typeof to detect the data types of each attribute of obj

Typeof obj.bol; / / objecttypeof obj.num; / / objecttypeof obj.str; / / object

After serializing it to stringify

JSON.stringify (obj); / / {"bol": true, "num": 1, "str": "1"}

At this point, the data type of each attribute is parsed by parse.

Const stringifyObj = JSON.parse (JSON.stringify (obj)); typeof stringifyObj.bol; / / booleantypeof stringifyObj.num; / / numbertypeof stringifyObj.str; / / string

NaN, Infinity,-Infinity, and null are all treated as null when serializing stringify

Const obj = {nan: NaN, infinity: Infinity, null: null,}; JSON.stringify (obj); / / {"nan": null, "infinity": null, "null": null}

When an object is serialized, if there is a toJSON function, the value returned by this function is the result of the serialization of the entire object.

Const obj = {nan: NaN, infinity: Infinity, null: null, toJSON () {return "owns toJSON function";},},}; JSON.stringify (obj); / / "owns toJSON function"

You can see that only the return value of the toJSON function exists in the serialized data, and the rest of the data is ignored.

⚠️: Date data will be serialized normally because the toJSON function is deployed on Date, which can be known by printing Date.prototype.toJSON on the console.

Const obj = {date: new Date (),}; JSON.stringify (obj); / / {"date": "2021-10-08T11:43:31.881Z"} feature 4

Undefined, function and symbol with different performance

As an object key-value pair:

As a value:

Const obj = {undefined: undefined, fn () {}, symbol: Symbol ()}; JSON.stringify (obj); / / {}

As key:

Const fn = function () {}; const obj = {[undefined]: undefined, [fn]: function () {}, [Symbol ()]: Symbol ()}; JSON.stringify (obj); / / {}

When undefined, function, and symbol are key and value of objects, they are ignored when serialized

⚠️: the original order of objects may be changed at this time, because the above three types of data will be ignored during serialization.

As an array value:

Const arr = [undefined, function fn () {}, Symbol ()]; JSON.stringify (arr); / / [null,null,null]

When undefined, function, and symbol are value of an array, they are all converted to null when serialized

When it exists alone:

JSON.stringify (undefined); / / undefinedJSON.stringify (function () {}); / / undefinedJSON.stringify (Symbol ()); / / undefined

When undefined, function, and symbol exist alone, they are all converted to undefined when serialized

Characteristic five

During serialization, only enumerable properties will be serialized, and non-enumerable properties will be ignored

Const obj = {name: "nordon", age: 18,}; / / modify age to non-enumerable attribute Object.defineProperty (obj, "age", {enumerable: false,}); JSON.stringify (obj); / / {"name": "nordon"}

⚠️: this will also change the original order of objects

Feature 6

A circular referenced object that throws an exception when serialized

Const obj = {name: "nordon", age: 18,}; const p = {name: 'wy', obj} obj.p = pJSON.stringify (obj)

This will cause the console to throw an exception:

Uncaught TypeError: Converting circular structure to JSON-- > starting at object with constructor 'Object' | property 'p'-> object with constructor' Object'-property 'obj' closes the circle at JSON.stringify ()

Implement stringify manually

Now that you understand some of the features of JSON.stringify, you can implement a version of kack based on these features.

Before implementing it, use Corification to encapsulate some tool functions for data type verification:

Const currying = (fn,... outParams) = > {/ / get the number of parameters needed by the fn function const paramsLen = fn.length; return (... args) = > {/ / collect all parameters let params = [... outParams,... args]; / / if the parameters do not reach the parameters required by fn, continue to collect the parameters if (params.length)

< paramsLen) { return currying(fn, ...params); } return fn(...params); };};/** * type: 类型 - [object Array]、[object Number]等 * source: 数据源 */const judgeType = (type, source) =>

{return Object.prototype.toString.call (source) = type;}; const isUndefined = currying (judgeType, "[object Undefined]"); const isSymbol = currying (judgeType, "[object Symbol]"); const isFunction = currying (judgeType, "[object Function]"); const isObject = currying (judgeType, "[object Object]"); const isNull = currying (judgeType, "[object Null]")

The following goes directly to the code:

Function jsonStringify (data) {let type = typeof data; if (isNull (data)) {/ / null returns the string 'null' return "null directly;} else if (data.toJSON & & typeof data.toJSON =" function ") {/ / configures the toJSON function, directly uses the data returned by toJSON and ignores other data return jsonStringify (data.toJSON ()) } else if (Array.isArray (data)) {let result = []; / / if it is an array, then each item in the array may be multiple data.forEach ((item, index) = > {if (isUndefined (item) | | isSymbol (item) | isFunction (item)) {result [index] = "null" } else {result [index] = jsonStringify (item);}}); result = "[" + result + "]"; return result.replace (/'/ g,'"');} else if (isObject (data)) {/ / handle normal objects let result = [] Object.keys (data) .forEach ((item, index) = > {if (typeof item! = = "symbol") {/ / key if it is a symbol object Ignore if (data [item]! = = undefined & & typeof data [item]! = = "function" & & typeof data [item]! = = "symbol") {/ / key values if undefined, function, symbol are attribute values Ignore result.push (''+ item +''+ ":" + jsonStringify (data [item])) }); return ("{" + result + "}"). Replace (/'/ g,'"');} else if (type! = =" object ") {let result = data / / data may be the basic data type. Handle if (Number.isNaN (data) | | data = Infinity) {/ / NaN and Infinity serialization returned "null" result = "null" here } else if (isUndefined (data) | | isSymbol (data) | | isFunction (data)) {/ / since undefined is returned from function serialization, return undefined;} else if (type = = "string") {result =''+ data +'';} return String (result) is processed together with undefined and symbol. }} at this point, the study on "how to implement a simple version of JSON.stringify" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.