一文搞懂JSON.stringify和JSON.parse（五）JSON.parse使用说明

一 JSON.parse特性

JSON.parse()就是将JSON字符串解析成字符串描述的JavaScript值或对象（将JSON数据解析为js原生值），例如：

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

1.1写法 JSON.parse(text[, reviver])

text 将要反序列化的字符串

reviver 可选 函数转换器，用于修改解析生成的原始值，调用时机在parse函数返回之前

2.2 标签：json规范

JSON.parse() json需符合规范，不允许用逗号作为结尾

JSON.parse("[1, 2, ]");
// 异常，逗号结尾
JSON.parse('{"a" : 1, }');
// 异常，逗号结尾

2.3 使用说明

后端返回的数据中有数组或对象的结构，却仍然以字符串的形式返回给前端；

let data = {
	records: [
		{
			"idid": "1",
			"infoinfo": '[{"name":"张","age":60},{"name":"李","age":80}]'
		},
		{
			"idid": "2",
			"infoinfo": '[{"name":"王","age":90},{"name":"郑","age":100}]'
		}
	]
}


data.records.forEach(element => {
	element.infoinfo = JSON.parse(element.info)
	for(let i = 0, len = element.infoinfo.length; i < len; i++) {
		console.log(element.infoinfo[i].name) //张 李 王 郑
	}
})

如果字符串外层使用双引号，内层也使用双引号，可以使用 \ 转义一下；这个大家注意一下

let data = {
	records: [
		{
			"id": "1",
			"info": "[{\"name\":\"张三\",\"age\":60},{\"name\":\"李四\",\"age\":80}]"
		},
		{
			"id": "2",
			"info": “[{\"name\":\"王五\",\"age\":90},{\"name\":\"郑六\",\"age\":90}]”
		}
	]
}

2.4参数使用说明

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

//注意解析顺序从里往外的顺序

  created() {
    let JSONparse1 = '{"p": 5}';
    let JSONparse2 = '{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}';
    let JSONparse11 = JSON.parse(JSONparse1, function (k, v) {
      if (k === "") {
        return v;
      }
      return v * 2;
    });

    let JSONparse22 = JSON.parse(JSONparse2, function (k, v) {
      console.log(k); // 输出当前属性，最后一个为 ""
      //'1','2','4','6','5','3',''
      //注意解析顺序从里往外的顺序
      return v; // 返回修改的值
    });

    console.log(JSONparse11); //{p: 10}
    console.log(JSONparse22);
  },

关于序列化和反序列化导致返回顺序不一致问题，这个后端有jar包可以处理，前端可以不用考虑

一文搞懂JSON.stringify和JSON.parse（四）JSON.stringify九大特性_前端小云儿的博客-CSDN博客

一文搞懂JSON.stringify和JSON.parse（五）JSON.parse使用说明

一 JSON.parse特性

猜你喜欢