JSON.stringify()妙用
语法：JSON.stringify(value,replacer,space)
value：将要序列化成一个JSON字符串的值。
replacer（可选）：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中；如果该参数为null或者未提供，则对象所有的属性都会被序列化。
space（可选）：指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。
将JS对象转换为JSON字符串
案例：
constperson={name:"末晨曦吖",age:"18"}console.log(JSON.stringify(person));{"name":"末晨曦吖","age":"18"}
转为JSON字符串的用处：
本地存储的时候只能是存储基本数据类型，数组和对象等类型存入的话会是[object,object]，所以存数组或对象类型时，我们就可以想把数组或对象转为JSON字符串形式，就可以了。
向后端传递参数时，有时数组或对象类型参数，后端接收的是字符串格式，所以我们在向后端传递的时候，可以向用JSON.stringify()转为字符串格式就可以了。
存储localStorage对象
案例：
person:{name:"末晨曦吖",age:"18"}//使用JSON.stringify转换为JSON字符串//然后使用localStorage保存在person名称里localStorage.setItem(person,JSON.stringify(this.person));//取person数据，JSON.parse()将字符串转为对象JSON.parse(localStorage.getItem(person))
数组去重
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18"},{name:"一笑而过",age:"20"},{name:"一笑而过",age:"20"},]}},mounted(){this.filter()},methods:{filter(){letobj={};this.list.forEach(function(item){obj[JSON.stringify(item)]=item;//键名不会重复})this.list=Object.keys(obj).map(function(item){//Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将obj对象的键名还原成对象数组returnJSON.parse(item);})console.log(this.list)}}}/scriptstylescoped/style
效果：存在的问题:{x:1,y:2}与{y:2,x:1}通过JSON.stringify字符串转化值不同，但显然他们是重复的对象。
看起来只要把里面的属性排序一下，然后再进行下一步就可以了，我调整了一下，代码如下：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18"},{name:"一笑而过",age:"20"},{age:"20",name:"一笑而过",},]}},mounted(){this.filter()},methods:{filter(){letobj={};this.list.forEach(function(item){letnewData={};Object.keys(item).sort().map(key={//调整属性顺序newData[key]=item[key]})obj[JSON.stringify(newData)]=item;//键名不会重复})this.list=Object.keys(obj).map(function(item){//Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将obj对象的键名还原成对象数组returnJSON.parse(item);})console.log(this.list)}}}/scriptstylescoped/style
实现深拷贝
实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程就是利用JSON.stringify将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[1,2,3]}},mounted(){this.deepClone()},methods:{deepClone(){letarr=JSON.parse(JSON.stringify(this.list))console.log(this.list,查看两个数组是否相同,arr)this.list[0]=2console.log(this.list,改变其中一个是否影响另个,arr)}}}/scriptstylescoped/style
效果：
判断数组是否包含某对象，或者判断对象是否相等。
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18"},{name:"一笑而过",age:"20"},]}},mounted(){this.handerData()},methods:{handerData(){//判断数组中是否包含某个对象letobj={name:"末晨曦吖",age:"18"}if(JSON.stringify(this.list).indexOf(JSON.stringify(obj))!==-1){console.log(数组包含对象)}//判断数组是否相等letarr=[{name:"末晨曦吖",age:"18"},{name:"一笑而过",age:"20"}]console.log(数组是否相等,JSON.stringify(this.list)===JSON.stringify(arr))}}}/scriptstylescoped/style
stringify函数第二个参数的妙用
还是上面这道题，我们可以在第二个参数上解决对象属性的顺序问题，给它加上一个数组[name,age]，代码改为下面这个就没问题了。适用于参数少的情况下，参数多的话，还是用上面是先排序最好。
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18"},{name:"一笑而过",age:"20"},{age:"20",name:"一笑而过",},]}},mounted(){this.filter()},methods:{filter(){letobj={};this.list.forEach(function(item){obj[JSON.stringify(item,[name,age])]=item;//键名不会重复})this.list=Object.keys(obj).map(function(item){//Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将obj对象的键名还原成对象数组returnJSON.parse(item);})console.log(this.list)}}}/scriptstylescoped/style
比如说有一个对象{a:1,b:2,c:3,d:4,e:5},现在我们只需要b属性和e属性，可以这样来操作
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{obj:{name:"末晨曦吖",age:"18",hobby:1}}},mounted(){this.handerData()},methods:{handerData(){letarr=JSON.stringify(this.obj,[name,age])console.log(arr)//{"name":"末晨曦吖","age":"18"}}}}/scriptstylescoped/style
我们给stringify的第一参数传入json对象，第二参数定义一个数组，写下需要留下的属性即可。
如果是一个数组对象，也是可以的
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18",hobby:1},{name:"一笑而过",age:"20",hobby:1},]}},mounted(){this.handerData()},methods:{handerData(){letarr=JSON.stringify(this.list,[name,age])console.log(arr)//[{"name":"末晨曦吖","age":"18"},{"name":"一笑而过","age":"20"}]}}}/scriptstylescoped/style
JSON.stringify()的第二个参数为一个函数
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{obj:{name:"末晨曦吖",age:18,}}},mounted(){this.handerData()},methods:{handerData(){constarr=JSON.stringify(this.obj,function(key,val){console.log(key,val);if(typeofval===string)returnundefined;returnval;})console.log(arr)//{"age":18}}}}/scriptstylescoped/style
JSON.stringify()的第三个参数
我们想让stringify的格式更加好看点，我们可以把stringify的参数传入json对象，第二个参数传入null，第三个参数传入‘\t’即可，这样就会以制表符的形式输入，就像这样
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{obj:{name:"末晨曦吖",age:18,}}},mounted(){this.handerData()},methods:{handerData(){constarr=JSON.stringify(this.obj,null,\t)//换行符console.log(arr)//{"age":18}不在是这样//{//"name":"末晨曦吖",//"age":18//}}}}/scriptstylescoped/style
JSPN.stringify()第三个参数为一个数字，添加缩进
案例：
templatedivid="app"/div/templatescriptexportdefault{name:App,data(){return{list:[{name:"末晨曦吖",age:"18",hobby:1},{name:"一笑而过",age:"20",hobby:1},]}},mounted(){this.handerData()},methods:{handerData(){constarr=JSON.stringify(this.list,null,4)//缩进console.log(arr)}}}/scriptstylescoped/style
效果：
来源：