ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象

这篇文章主要来讲HTML5中的新方法：parse()把字符串转换成josn格式的数据和stringify()把josn格式的数据转换成字符串

 

eval()方法的回顾

eval()方法可以将任何字符串解析成js，下面来解析一个函数，并且解析完后执行这个函数

var str = 'function show(){alert(3)}';
eval(str);
show();  //结果可以alert出3

但是这个方法有个缺点，就是如果这个字符串里面带有攻击性的代码，那么转换成js后就会不安全

 

 

parse()把字符串转换成josn格式的数据

只能解析JSON形式的字符串变成JS  (所以安全性要高一些)，另外需要注意的是需要转换的字符串必须是严格的的JSON形式的字符串（字符串中的属性要严格的加上引号）

var str = '{"name":"hello"}';   //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name );  //打印出hello

 

 

stringify()把josn格式的数据转换成字符串

 这个JSON格式的数据可以不是严格的，比如{name : "hello"}，name没有加上双引号，使用stringify()方法转换成字符串时会自动的把双引号加上

var json = {name : "hello"};
var str = JSON.stringify(json);
alert( str );  //{"name" : "hello"},自动加上了引号

 

 

parse()和stringify()的应用——深度克隆新对象

首先来看一下对象引用赋值的的实例

var a = {
  name : 'hello'
};
var b = a;  //将a这个对象的引用赋值给了b,就相当于两个人共用一台电脑，当改变这个对象的时候，a也会跟着改变
b.name = 'hi';   //
alert( a.name ); //hi

再来看一下对象克隆的一个实例

var a = {
  name : 'hello'
};
var b = {};

//遍历对象a的属性和方法，并且赋给b对象，b对象拥有了a的所有属性和方法，当b改变属性的时候不会影响到a
for(var attr in a){
  b[attr] = a[attr];
}
b.name = 'hi';
alert( a.name );  //hello
alert( b.name );  //hi

但这这种克隆是浅层次的克隆，当a对象里面还有一个对象的时候，在将对象的属性赋给b的时候还是会存在引用的关系，所以这种方法无法做到深层次的克隆

如果还是使用这种方法来做深层次的克隆的话，就要使用到递归来一层层的来拷贝a对象里面的属性或者方法，详情请查看对象的克隆（包括深度克隆）的几种方法

那么接下来我们使用parse()和stringify()这两个方法来深度克隆对象

原理是使用stringify()将a对象解析成字符串，然后再使用parse()方法解析成对象并且赋值给b对象，这种方式可以做到深度的克隆和浅层次的克隆（方法都是一样的）

var a = {
  name : { age : 100 },
  num: [2,3,4]
};
var str = JSON.stringify(a);  //将a对象解析成字符串
var b = JSON.parse(str);   //将str字符串解析成对象并且赋值给b，那么b这个对象就跟a对象没有引用关系
b.name.age = 200;
b.num = [5,6,7];
alert( a.name.age );   //100
alert( b.name.age );    //200
alert( a.num );   //2,3,4
alert( b.num );     //5,6,7

 

 

 

 

如何做到与其他浏览器兼容

这两个方法非常好用但又写浏览器不支持（IE低版本），那么如果需要兼容低版本的话，需要去josn官网去下载json2.js这个插件

然后直接将这个插件引入进来就可以了