通过JavaScript，认识JSON

  JSON JavaScript
 

是存储和交换文本信息的语法。

 是Web的编程语言
对象实例

 JSON对象是一种【JavaScript对象】表示法。

key 必须是字符串。

var person={
         "firstName":"John",
         "lastName":"Doe",
         "age":50,
         "eyeColor":"blue",
}

 

 

 

JavaScript对象是【变量】的容器。

JavaScript对象是【键值对（name:value）】的容器。

把【键值对】称为JavaScript对象的【属性】。

JavaScript对象是【属性】的容器。

var person={
         firstName:"John",
         lastName:"Doe",
         age:50,
         eyeColor:"blue",
}

 
 访问对象属性   
person.lastName;//方式1
person["lastName"];//方式2

 

   
person.lastName;//方式1
person["lastName"];//方式2

 
 数组对象实例   
var persons=[
            {
                   "firstName":"John",
                   "lastName":"Doe",
                   "age":50,
                   "eyeColor":"red",
             },  {
                   "firstName":"Amy",
                   "lastName":"Jok",
                   "age":25,
                   "eyeColor":"yellow",
             },
            {
                  "firstName":"Lili",
                   "lastName":"Yoo",
                   "age":3,
                   "eyeColor":"blue",
             },

];

还可以嵌套数组。

   
var persons=[
            {
                   firstName:"John",
                   lastName:"Doe",
                   age:50,
                   eyeColor:"red",
             }，  {
                   firstName:"Amy",
                   lastName:"Jok",
                   age:25,
                   eyeColor:"yellow",
             }，
            {
                   firstName:"Lili",
                   lastName:"Yoo",
                   age:3,
                   eyeColor:"blue",
             }，

];

访问对象属性

persons[0].firstName;

还可以嵌套数组。

 JSON.parse();

(把JSON字符串转换成JavaScript对象)

 JSON最常见的用法之一，是从web服务器上读取JSON数据， 将JSON数据转换为JavaScript对象，然后在网页中使用该数据。 
JSON.parse(text，【reviver】)；
//text：一个有效的JSON字符串。即text='JSON对象'。
//reviver：一个转换结果的函数。转换后的JavaScript对象，在调用每个成员时，都会进入这个reviver函数。

解析数据

//JSON 不能存储 Date 对象。
//如果需要存储 Date 对象，需要将其转换为字符串。
//之后再将字符串转换为 Date 对象。
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

解析函数

//JSON 不允许包含函数
//但可以将函数作为字符串存储，之后再将字符串转换为函数。
var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
 
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

JavaScript 函数 eval() ，可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。

必须把文本包围在括号中，这样才能避免语法错误：

var txt='JSON对象文本'；
var obj = eval ("(" + txt + ")");

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

 JSON.stringify()

(将JavaScript对象转换为JSON字符串)

 JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。

JSON.stringify(value,【replacer】,【space】);
//value：要转换的 JavaScript 值（通常为对象或数组）
//replacer：用于转换结果的函数或数组。
//如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。
//如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
//如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。
//成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
//space：文本添加缩进、空格和换行符。如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

解析数据

JSON.stringify() 会将所有日期转换为JSON字符串。

var obj = {name:"Runoob",initDate:newDate(),site:"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

解析函数

JSON.stringify() 会删除 JavaScript 对象里的函数，包括 key 和 value。

因为JSON 不允许包含函数。

var obj = { name:"Runoob", alexa:function () {return 10000;}, site:"www.runoob.com"};
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;
var obj = { name:"Runoob", alexa:function () {return 10000;}, site:"www.runoob.com"};
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

var obj = { name:"Runoob", alexa:function () {return 10000;}, site:"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

 
posted @ 2020-10-02 20:43  Strugglinggirl  阅读(99)  评论(0)  编辑  收藏  举报