JSON笔记二：js对象和字符串的互相转换

字符串转js对象程序（JSON.parse()和JSON.eval()使用）（一般用于接收从服务器传来的json字符串）：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
  <p id="id"></p>
  <p id="id_0"></p>
  <p id="id_1"></p>
  <p id="id_2"></p>
  <p id="id_3"></p>
</body>
<script>
  //使用 JSON.parse() 方法将数据转换为 JavaScript 对象
  var data = '{"name":"不见人", "language":"javascript", "text":"测试JSON"}';
  var obj = JSON.parse(data);
  document.getElementById("id").innerHTML = obj.name + "使用" + obj.language + obj.text;
  
  //JSON 不能存储 Date 对象,需要将其转换为字符串。
  var data_1 = '{"name":"不见人", "language":"javascript", "text":"测试JSON", "time":"2018-09-22 10:13:30"}';
  obj = JSON.parse(data_1);
  //方法一
  //把时间转成时间戳
  var timestamp = Date.parse(new Date(obj.time));
  //显示 时间戳
  document.getElementById("id_0").innerHTML = timestamp;
  //把时间戳转成时间
  var date = new Date(timestamp);
  document.getElementById("id_1").innerHTML = date;
  //方法二， JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数
  obj = JSON.parse( data_1, function( key, value ){
      if( key == "time" ){
	    return new Date(value);
	  }else{
	    return value;
	  }
    });
	document.getElementById("id_2").innerHTML = obj.time;
	
	//JSON 不允许包含函数,可以将函数作为字符串存储
  var data_2 = '{"name":"不见人", "language":"javascript", "text":"测试JSON", "func":"function() {return true;}"}';
  obj = JSON.parse(data_2);
  // eval() 使用JavaScript 编译器将 JSON 文本转换为 JavaScript 对象
  //必须把文本包围在括号中
  obj.func = eval("(" + obj.func + ")");
  document.getElementById("id_3").innerHTML = obj.func();
  
</script>
</html>

运行结果：

js对象转为json字符串（JSON.stringify()）（一般用于发送JSON字符串到服务器端）：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
  <p id="id_0"></p>
  <p id="id_1"></p>
  <p id="id_2"></p>
  <p id="id_3"></p>
  <p id="id_4"></p>
</body>
<script>
  //把js对象转为json字符串
  var obj = {"name":"不见人", "language":"javascript", "str":"JSON"};
  var jsonStr = JSON.stringify(obj);
  document.getElementById("id_0").innerHTML = jsonStr;
  //把js数组转为json字符串
  obj = ["不见人","javascript","JSON"];
  jsonStr = JSON.stringify(obj);
  document.getElementById("id_1").innerHTML = jsonStr;
  //把时间转为json字符串
  obj = {"time":new Date};
  jsonStr  = JSON.stringify(obj);
  document.getElementById("id_2").innerHTML = jsonStr;
  //把函数转为json字符串
  obj = {"func":function() {return true;}};
  //先把函数转为字符串
  obj.func = obj.func.toString();
  jsonStr = JSON.stringify(obj);
  document.getElementById("id_3").innerHTML = jsonStr;
  
</script>
</html>

运行结果：

JSON.stringify()的函数接口：JSON.stringify(value[, replacer[, space]])

value：是一个js对象。

replacer：可以是函数或者数组。

space:文本添加缩进、空格和换行符。

JSON笔记二：js对象和字符串的互相转换

猜你喜欢