JavaScript基本语法-JSON的解析,JSON.parse

简介:

JSON,即JavaScript Object Notation,是一种轻量级的数据交换格式。JSON可以被用于几乎所有的编程语言中,JSON是一种文本格式,所以可以被人和机器阅读。JSON非常容易被实现和使用,仅仅一个字处理程序就能完成。JavaScript提供了JSON的解析API。

JSON解析之eval:

eval几乎无所不能,用eval函数可以解析JSON字符串,例如,下面的代码是正确的:

function parse_program_language(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var json = eval('(' + programStr + ')')
  console.log(json);

}

然而,eval函数存在安全隐患,一个简单的例子就是:如果有人恶意攻击,将javascript攻击代码拼凑在字符串中,甚至形成一个不完全规格的JSON字符串,eval依然可以执行。 我们强烈建议不要使用eval进行解析。

用JSON.parse解析JSON字符串:

建议用户使用JSON.parse来进行JSON的解析。

JavaScript提供了JSON.parse函数来解析JSON字符串 ,有两种写法:

JSON.parse(text) 

JSON.parse(text[, fun])

说明:fun是一个转换结果的函数, 将为对象的每个成员调用此函数。

下面,看一个例子(用JSON.parse(text) 进行解析):

json_parse.js:

function parse_program_language(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var json = JSON.parse(programStr);
  console.log(json);

  var node = window.document.getElementById("program");
  for (var i = 0; i<json.length;i++) {
    //console.log(json[i]);

    var li = document.createElement("li");
    li.innerHTML = json[i].language + ":" + json[i].author;
    
    node.appendChild(li);
  }

}

parse_json_test.html:

<!DOCTYPE html>
<html>
<body>
	<script src="./json_parse.js"></script>

<h1>Json Parse测试:</h1>
<h1>编程语言列表</h1>
<div>
	<ul id="program">
        
    </ul>
</div>

<script>
	parse_program_language();
</script>
</body>
</html>

运行结果:

 再看JSON.parse的第二种写法:

JSON.parse(text[, fun])

例如,上面的js代码可以写成:

function parse_program_language2(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var node = window.document.getElementById("program");
  var language = null;
  var author = null;
  var json = JSON.parse(programStr,function(key,value){
      console.log(key+":" + value);
      var li = null;
      if (key == "language") {
        language = value;
      }
      if (key == "author") {
        author = value;
        li = document.createElement("li");
      }
      if (li != null) { //language !=null && author != null
        li.innerHTML = language + ":" + author;
        node.appendChild(li);
        language = null;
        author = null;
      }
      
  });
}

运行效果和第一种写法一样。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liranke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值