JSON.stringify()和JSON.parse()应用场景

前言
JSON.stringify()：将对象、数组转换成字符串
JSON.parse()：将字符串转成json对象

应用场景
1、
a、浏览器创建、获取（sessionStorage、localStorage）数组内容
b、路由（浏览器地址）传参、获取数组内容
创建、传参的时候使用JSON.stringify()
(如果不使用JSON.stringify()存进去的将是[object object]，所以如果我们开发中遇到了获取内容的时候是[object object]不妨试试JSON.stringify())，
比如创建sessionStorage

sessionStorage.setItem("keyName",JSON.stringify(data))

传参成功之后我们肯定要获取使用，相对应的我们要用JSON.parse()将存进去的字符串转换为json对象，比如获取某个sessionStorage

let array = JSON.parse(sessionStorage.getItem("keyName"));

2、websocket中的使用

this.ws = new WebSocket(WS_URL);

//send(用户端发送数据给服务器端，也可以说是传参吧)中有数据就要JSON.stringify()，像下面这样需要多次JSON.stringify
let data = [
	'star',
	JSON.stringify({
		live_id: this.liveId,
		count: 1
	})
];
this.ws.send({
	data: JSON.stringify(data)
});

//onMessage(服务器端给客户端发送消息，也可以说是获取吧)返回数据需要JSON.parse()
this.wx.onMessage(function(res) {
	let parseData = JSON.parse(res.data);
	console.log('Message from server：', parseData);
});

3、赋值后修改其中一个值另一个值也被修改
做vue项目时，父组件Array传给子组件，但子组件值修改时父组件也会被改

this.childVal = this.parentVal; // parentVal父组件值传给childVal子组件
this.childVal = [123]; // this.parentVal也变成了[123]

后来同事说用JSON.parse(JSON.stringify(val))做深拷贝，改变指针方向，半信半疑使了下，还真好了

this.childVal = JSON.parse(JSON.stringify(this.parentVal)); 
this.childVal = [123]; // this.parentVal不变

4、数据更新
做vue项目时，改变数组中某个值时页面数据不更新（但推荐$set解决）

// data
list: [0, 0, 0]

// 修改list第一个（索引0）值为1
// this.$set(this.list, 0, 1)  // 推荐
this.list[0] = 1;  // 正常到这一步就结束
this.list= JSON.parse(JSON.stringify(this.list)); // 深拷贝

单独使用
1、indexOf()
先看看indexOf()的使用方法

//object对象或者对象中的某个字段值在array数组中存在（判断是否存在是否有相同字段值用indexOf()，for有时候不是很好用）
array.indexOf(object) > -1

场景：如果你发现某个对象或者对象中的某个字段值存在与否都返回-1或者不大于-1就可以试试JSON.stringify()；因为我之前遇到过，可能是因为我的array或object是从路由和浏览器中拿的
2、小程序中wx.uploadFile()方法(应该还有许多的方法返回数据需要处理，后期遇到再更新)

//wx.uploadFile() success回调中返回的数据需要用JSON.parse()转化
 wx.chooseImage({
     count: 1,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success: function (res) {
     var tempPaths = res.tempFilePaths
	 wx.uploadFile({
	    url: "接口地址", 
	    filePath: tempFilePaths[0],//chooseImage上传的图片
	    name: 'file',//需要传给后台的图片字段名称
	    formData: data,//需要传给后台的其他表单数据
	    header: {
	      "Content-Type": "multipart/form-data", //form-data格式
	      'Accept': 'application/json', 
	    },
	    success (res){
	      var jsonObj = JSON.parse(res.data);//返回的数据需要转为json格式
	      if (jsonObj.code == 200) {
	           //接口请求成功后在这一块处理
	      }else{
	         wx.showToast({jsonObj.message});
	      }
	    }
	})
  })
 }

拓展
与JSON.parse()相同的还有eval()函数，可以将字符串转化为对象或变量，eval()解析更强大但也更不安全，先举个例子

var jsondata = '{"script":alert(123)}';
var jsonobj = eval('('+jsondata+')');//注意eval()的转换，eval(jsondata)或者eval(‘+jsondata+’)都不对
console.log(jsonobj);//浏览器会弹出123，而用JSON.parse程序会报错
console.log(jsonobj.script);//也是只弹出一次123

上面的例子也就是说eval()能解析里面的代码，如果可以保证拿到的数据安全性或者就是想要脚本的效果就可以用eval()，如果不能保证拿到的数据是否安全尽量不要使用eval()，以免弹出恶意信息、页面跳转到恶意网站等。