JS 中 JSON 与对象 的相互转换

1、Json 应用现状 

客户端和服务端的数据交换以一定的格式进行，目前，这种数据格式以xml和Json为主。Json是JavaScript Object
Notation的简写，采用JavaScript引擎自然匹配的格式，因此相较于xml更为易读，传输字节数也要远小于xml格式，相较之下，更受青睐，应用广泛。

2、转换方式

  前端开发中，数据传输格式中有一部分以JSON格式进行传递，比如Ajax，需要JSON和JS对象的相互转换。

      2.1 JSON转JS对象

两种方式：

  
1、JS自带的eval()函数;

       2、JSON.parse(str); //str为变量，即json字符串;

var data = '{'+
'"name":"iphone plus",'+
'"price":"666",'+
'"description":"手机中的战斗机",'+
'"youhuijia":"555",'+
'"sum":"333",'+
'"image":['+
'{'+
'"small":"../images/s11.jpg",'+
'"big":"../images/s11.jpg"'+
'},'+
'{'+
'"small":"../images/s12.jpg",'+
'"big":"../images/s12.jpg"'+
'},'+
'{'+
'"small":"../images/s13.jpg",'+
'"big":"../images/s13.jpg"'+
'}'+
']'+
'}';
console.log(data);
var jsonObj1 = JSON.parse(data);  //使用JSON.parse() 将JSON字符串转为JS对象;
console.log(jsonObj1);

var jsonObj2 = eval('(' + data + ')'); //使用eval() 将JSON字符串转为JS对象；
console.log(jsonObj2);

  2.2JS对象转JSON

一种方式：JSON.stringify(obj)

var json = {"name":"iphone","price":666}; //创建对象；
var jsonStr = JSON.stringify(json);       //转为JSON字符串
console.log(jsonStr);

    
     2.3 其他方式（未验证）

   
 JS对象转JSON ：Object.toJSONString()
    
JSON转JS对象：String.parseJSON()
     
有条件的同行可以验证一下。

3、实例应用

前几日在知乎上看到一个帖子，请教JSON转JS对象的问题，链接如下：
                https://www.zhihu.com/question/57309421?utm_source=qq&utm_medium=social
解决方案如下：

<script>

$(function(){
//测试验证
//console.log(data.name);
console.log(transformProduct(data));
});

var data = '{'+
'"name":"iphone plus",'+
'"price":"666",'+
'"description":"手机中的战斗机",'+
'"youhuijia":"555",'+
'"sum":"333",'+
'"image":['+
'{'+
'"small":"../images/s11.jpg",'+
'"big":"../images/s11.jpg"'+
'},'+
'{'+
'"small":"../images/s12.jpg",'+
'"big":"../images/s12.jpg"'+
'},'+
'{'+
'"small":"../images/s13.jpg",'+
'"big":"../images/s13.jpg"'+
'}'+
']'+
'}';

function transformProduct(data){
data = JSON.parse(data);
var product = new Product();
product.name = data.name;
product.description = data.description;
product.youhuijia = data.youhuijia;
product.normalPrice = data.price;
product.buySum = data.sum;
product.images = data.image;
product.bindDomImage();
return product;
}

function Product(){
this.name = '';
this.description = '';
this.normalPrice = 0;
this.youhuijia = 0;
this.buySum = 0;
this.images = [];
}

Product.prototype = {
bindDomImage:function(){
var str = '';
for(var i = 0,len = this.images.length;i<len;i++){
str +='<li>'+
'<img class = "smallImg" src = "'+this.images[i].small+'"/>'+
'<img class = "bigImg" src = "'+this.images[i].big+'"/>'+
'</li>';

}
console.log(str)
$("#etakage").html(str);
}
}

</script>