本文由 千趣源码 – qianqu 发布，转载请注明出处，如有问题请联系我们！解析json字符串的方式-json格式和字典区别

序

JSON是一种轻量的数据类型，能够便捷地表明繁杂的算法设计。JSON目标有这两种方式:stringify()和parse()。在一个简易的事例中，这两个办法可以各自将JavaScript实例化为JSON字符串数组和将JSON分析为该设备JavaScript值。

文中关键详细介绍JSON.stringify()的使用方法和常见问题。

最先，怎么使用它。

1.基本上使用方法。

JSON.stringify()能够将一个JavaScript目标实例化为一个JSON字符串数组。

let json1 = { title: "Json.stringify", author: [ "浪里行舟" ], year: 2021};let jsonText = JSON.stringify(json1);

默认设置状况下，JSON.stringify()輸出不包含空表格中或缩近的JSON字符串数组，因而jsonText的值如下所示:

"{"title":"Json.stringify","author":["浪里行舟"],"year":2021}"

实例化JavaScript目标时，全部涵数和原形组员都被有心从結果中省去。除此之外，一切未定义值的特性也将被绕过。最后結果是表明全部案例特性全是合理的JSON基本数据类型。

JSON.stringify()方式一共能够接纳三个主5201;1442;数，包含2个可选主要参数(分别是第二个和第三个主要参数)。这两个可选主要参数可用以特定实例化JavaScript目标的别的方法。第二个主要参数是一个过滤装置，它能够是一个二维数组或涵数。第三个因素是缩近转化成的JSON字符串数组的选择项。您能够在直接或组成应用这种主要参数来更好的操纵JSON实例化。

2.第二个主要参数——过滤器。

假如第二个主要参数是二维数组，JSON.stringify()回到的效果将只包括二维数组中列举的目标特性。比如，下列实例:

let json1 = { title: "Json.stringify", author: [ "浪里行舟" ], year: 2021, like: 'frontend', weixin: 'frontJS'};let jsonText = JSON.stringify(json1, ['weixin']);

在本例中，JSON.stringify()方式的第二个主要参数是一个包括字符串数组“weixin”的二维数组。它相匹配于要实例化的另一半中的特性，因而转化成的JSON字符串数组将只包括该特性:

"{"weixin":"frontJS"}"

假如第二个主要参数是涵数，则个人行为不一样。给予的涵数接受2个主要参数:特性名(键)和特性值(值)。依据这一键，您需要决策如何处理相对应的特性。该键自始至终是一个字符串数组，可是当值不属于键/值校时，它将是空字符串。

const students = [ { name: 'james', score: 100, }, { name: 'jordon', score: 60, }, { name: 'kobe', score: 90, }];function replacer (key, value) { if (key === 'score') { if (value === 100) { return 'S'; } else if (value >= 90) { return 'A'; } else if (value >= 70) { return 'B'; } else if (value >= 50) { return 'C'; } else { return 'E'; } } return value;}console.log(JSON.stringify(students, replacer, 4))

上边的编码，大家将根据更换器用级别更换来源于百分位数系统软件的级别。

特别注意的是，假如stringify的第二个主要参数是一个涵数，那麼假如它的传参是未定义的，那麼相匹配的特性就不易被实例化，假如回到了其余的值，那麼传参会替代原先的值开展实例化。

3.第三个主要参数——字符串数组缩近。

JSON.stringify()方式的第三个主要参数操纵缩近和空网格图。当此参数为标值时，它标示每一级缩近的空表格中的总数。比如，每一个等级缩近4 空帧，如下所示所显示:

let json1 = { title: "Json.stringify", author: [ "浪里行舟" ], year: 2021};let jsonText = JSON.stringify(json1, null, 4);

那样获得的jsonText文件格式如下所示:

{ "title": "Json.stringify", "author": [ "浪里行舟" ], "year": 2021}

JSON.stringify()在解决数据信息时兼具了数据交换和载入的便捷性。殊不知，阅读文章的便捷性常常被忽略。

4.toJSON()方式–自定JSON实例化。

有时候，目标必须在JSON.stringify()以上自定JSON实例化。这时，能够将toJSON()方式加上到要实例化的另一半中，而且在实例化过程中将根据该方式回到适度的JSON表明。

下列目标为自定义序列化加上了toJSON()方式:

let json1 = { title: "Json.stringify", author: [ "浪里行舟" ], year: 2021, like: 'frontend', weixin: 'frontJS', toJSON: function () { return this.author }};console.log(JSON.stringify(json1)); // ["浪里行舟"]

一定要注意，箭头函数不可以用以界定toJSON()方式。关键因素是arrow函数的句法范畴是全局性范畴，不宜这类状况。

第二，应用情景。

1.明确二维数组是不是包括目标，或是这种目标是不是相同。

//分辨二维数组是不是包括某目标let data = [ {name:'浪里行舟'}, {name:'前面匠人'}, {name:'前端工程师'}, ], val = {name:'浪里行舟'};console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1);//true

大家还能够应用JSON.stringify()方式来明确2个目标是不是相同。

// 分辨目标是不是相同let obj1 = { a: 1, b: 2 } let obj2 = { a: 1, b: 2, }console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // true

殊不知，这类方式有一些局限。假如目标调节键的次序，便会错误！

// 调节目标键的地方后let obj1 = { a: 1, b: 2 } let obj2 = { b: 2, a: 1, }console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // false

2.应用localStorage/sessionStorage时。

LocalStorage/sessionStorage默认设置状况下只有储存字符串数组，但在具体开发设计中，大家常常必须储存目标种类，因此这时必须在储存时应用json.stringify()将目标变换为字符串数组，在获取当地缓存文件时应用json.parse()将目标转到。

// 存数据信息function setLocalStorage(key,val) { window.localStorage.setITEM(key, JSON.stringify(val));};// 取数据信息function GETLocalStorage(key) { let val = JSON.parse(window.localStorage.getItem(key)); return val;};// 检测setLocalStorage('Test',['前面匠人','浪里行舟']);console.log(getLocalStorage('Test'));localStorage

3.完成目标的深层拷贝。

在开发设计中，有时候我们害怕危害原始记录，因此常常对数据信息开展深层拷贝，开展任何实际操作。应用JSON.stringify()和JSON.parse()完成深层拷贝是一个很好的挑选。

let arr1 = [1, 3, { username: ' kobe'}];let arr2 = JSON.parse(JSON.stringify(arr1));arr2[2].username = 'duncan'; console.log(arr1, arr2)image.png

这就是用JSON.stringify把一个目标转化成JSON字符串数组，随后用JSON.parse把这个字符串数组分析成一个目标。你一走，便会创造一个新的目标，这将开启一个新的局部变量，完成深层拷贝。

这类办法尽管能够完成二维数组或目标的深层拷贝，但不可以处理函数和正则表达式性，由于根据JSON.stringify和JSON.parse解决后，获得的正则表达式性不会是正则表达式的(变为空目标)，获得的涵数也不会再是涵数(变为null)。

let arr1 = [1, 3, function () { }, { username: ' kobe'}];let arr2 = JSON.parse(JSON.stringify(arr1));arr2[3].username = 'duncan';console.log(arr1, arr2)三，应用常见问题。

JSON.stringify()尽管很强劲，可是有一些特性不可以是stringify，因此在开发设计时要需注意下列状况，防止出现一些意料之外的bug。

1.NaN和Infinity归属于变换后的值。

let myObj = { name: "浪里行舟", age: Infinity, money: NaN,};console.log(JSON.stringify(myObj));// {"name":"浪里行舟","age":null,"money":null}JSON.stringify([NaN, Infinity])// [null,null]

2.变换后的值中有未定义的随意涵数和符号值。

有这两种状况:

二维数组,undefined，随意的涵数及其symbol值在实例化的全过程时会被转化成 nullJSON.stringify([undefined, function () { }, Symbol(")]);// '[null,null,null]'非二维数组,undefined，随意的涵数及其symbol值在实例化的全过程时会被忽视JSON.stringify({ x: undefined, y: function () { }, z: Symbol(") });// '{}'

3.循环引用。

假如一个目标的特性值以某类间接性的方法引入回该目标自身，那麼它便是一个循环引用。比如:

let bar = { a: { c: foo }};let foo = { b: bar};JSON.stringify(foo)

在这样的情形下，实例化将汇报一个不正确:

// 错误报告Uncaught ReferenceError: foo is not defined at :3:8

4.当存有不可枚举的特性值时。

默认设置状况下，不可枚举的特性被忽视:

let personObj = Object.create(null, { name: { value: "浪里行舟", enumerable: false }, year: { value: "2021", enumerable: true },})console.log(JSON.stringify(personObj)) // {"year":"2021"}

四.引言

JSON.stringify()用以将JavaScript目标实例化为JSON字符串数组。此方式有一些选择项可用以变更过虑或改动步骤的默认设置个人行为。可是需要特别注意的是，有一些特性是不可以字符串数组化的，因此在开发设计的那时候要防止这种坑！