js 基础 json

用户4793865

发布于 2023-01-12 14:46:37

5.3K0

发布于 2023-01-12 14:46:37

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第26天，活动详情查看:8月更文挑战

一、语法

1.对象

var person ={
    name : "nic",
    age:29
};          // 对象的标准方式
var person ={
    "name":"nic",
    "age":29
};          // Json中的对象给属性加引号
{
    "name":"nic",
    "age":29
}                  //json
//与javaScript对象的区别： 结尾;号   json中属性值必须加引号

2.数组

[
    {
        "title":" profession",
        "author":[
            "Ninc"
        ],
        edition:2
    },
    {
        "title":" profession",
        "author":[
            "Ninc"
        ],
        edition:2  
    }
]

二、解析与序列化

Json可以解析为JavaScript对象

books[1].title     //就可以得到第二本书的书名

而XML数据结构要解析成DOM文档再从中提取出数据

doc.getElementByTagName("book")[2].getAttribute("title");

三、json对象

1.早期json解析器是eval()函数

var a= '{"session_key":"bsm+VwaGnpeTe9mRC2drdQ==",
"expires_in":7200,"openid":"oY8Ly0JzGKDvM9C7KwSjAIBt-8fM",
"unionid":"oB2ANwOMEJ9cPM2qKV3Zz1_R4zuM"}'; 
var a = eval("(" + a + ")");   
console.log(a.unionid);
console.log(typeof(eval("{}")));//undefined console.log(typeof(eval("({})")));//object

eval()对json数据结构求值存在风险，可能执行恶意代码，如果解析字符串中含有alert等也会被解析。弹框会弹出 2.json对象的两个方法（1）stringify() 把JavaScript对象序列化为json字符串

var book ={
    title : "pro",
    authors:[
        "Nio"
    ],
    edition:3,
    year:2011
}
var jsonText = JSON.stringify(book)
//{"title":"pro","authors":["Nio"],"edition":3,"year":2011}
// 输出的json字符串不包含任何空格

值为undefined的任何属性都会被跳过，结果最终都是有效json数据类型的实例属性

JSON.stringify(book)除了要序列化的javascript对象外，还可接收两个参数第一个是过滤器（可以是一个数组或者函数）

当过滤器是数组时

var book ={
    "title" : "pro",
    "authors":[
        "Nio"
    ],
    edition:3,
    year:2011
}
var jsonText = JSON.stringify(book,["title","edition"]);   // 是一个数组
//{"title":"pro","edition":3}

当过滤器是函数时需要传入两个参数，一个是属性名（键）和属性值

var book ={
    "title" : "pro",
    "authors":[
        "Nio"
    ],
    edition:3,
    year:2011
}
var jsonText = JSON.stringify(book,function(key,value){
   switch(key){
       case "authors":
           return value.join(",");
       case "year":
           return 5000;
       case "edition":
           return 12;
       default:
           return value;
   }
});     // {"title":"pro","authors":"Nio","edition":12,"year":5000}

第二个参数是一个选项（表示是否在json字符串中保留缩进）

var book ={
    "title" : "pro",
    "authors":[
        "Nio"
    ],
    edition:3,
    year:2011
}
var json = JSON.stringify(book,null,4);
console.log(json);

也可将缩进符变为任意字符

var json = JSON.stringify(book,null,"---");

（2）parse() 把json字符串转为JavaScript对象

var javascriptText = JSON.parse(jsonText)
console.log(javascriptText)
//{title: "pro", authors: Array(1), edition: 3, year: 2011}
//authors: ["Nio"]edition: 3title: "pro"year: 2011__proto__: Object

四、toJSON() 方法

1.有时候，JSON.stringfy()还是不足以满足某些对象进行自定义序列化的需求可以给对象定义toJSON() 方法

var book ={
    "title" : "pro",
    "authors":[
        "Nio"
    ],
    edition:3,
    year:2011,
    toJSON:function(){
    return this.title;
    }
}
var json = JSON.stringify(book);

该方法返回图书的书名

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

文件存储