商城网站建设公司,长垣做网站,手机上传视频网站开发,互联网舆情报告关注[前端小讴]#xff0c;阅读更多原创技术文章 JSON
JSON 是 JS 对象简谱#xff0c;是一种通用的数据格式和 JS 有相同的语法#xff0c;但不属于 JS#xff0c;很多语言都能解析和序列化 JSON
相关代码 →
语法
JSON 支持 3 种类型的值 简单值#xff1a;字符串、… 关注[前端小讴]原创技术文章 JSON
JSON 是 JS 对象简谱是一种通用的数据格式和 JS 有相同的语法但不属于 JS很多语言都能解析和序列化 JSON
相关代码 →
语法
JSON 支持 3 种类型的值 简单值字符串、数值、布尔值、nullundedined 不可以对象复杂数据类型有序键/值对每个值可以是简单值/复杂类型数组复杂数据类型通过数值索引访问的值的有序列表每个值可以是任意类型
简单值
可以是一个数值
5可以是一个字符串与 JS 字符串的区别在于必须使用双引号单引号会导致语法错误
1可以是布尔值、null但不能是 undefined
对象
与 JS 字面量的区别在于属性名必须使用双引号 还有 2 处不同在于没有变量声明、末尾无分号
// js字面量
let person {name: Nicholas,age: 29,
};// json对象
{name: Nicholas,age: 29
}属性的值也可以是复杂数据类型
{name: Nicholas,age: 29,school: {name: m college,lacation: a street}
}数组
与 JS 数组的区别在于没有变量声明、末尾无分号
// js数组
let values [25, hi, true];// json数组
[25, hi, true]数组和对象可以组合使用以表示更复杂的数据结构
[{name: Nicholas,age: 29,school: {name: m college,lacation: a street}},{name: Matt,age: 27,school: {name: n college,lacation: b street}}
]解析与序列化
JSON 对象 JSON 对象有 2 个方法 **stringify()**将 js 序列化为 JSON 字符串 let book {title: Professional,authors: [Nicholas, Matt],edition: 4,year: 2017,
};
let jsonText JSON.stringify(book);
console.log(jsonText); // {title:Professional,authors:[Nicholas,Matt],edition:4,year:2017}**parse()**将 JSON 字符串解析为原生 js 值 let bookCopy JSON.parse(jsonText);
let bookCopy JSON.parse(jsonText);
console.log(bookCopy);
/*
{title: Professional,authors: [ Nicholas, Matt ],edition: 4,year: 2017
}
*/可一并使用JSON.stringify()和JSON.parse()进行对象深拷贝 let bookCopy2 JSON.parse(JSON.stringify(book)); // 深拷贝
console.log(bookCopy2);序列化 JS 对象时所有函数、原型成员、值为 undefined的属性会在结果中省略
let book2 {title: Professional,authors: [Nicholas, Matt],edition: () {}, // 序列化时会被省略year: undefined, // 序列化时会被省略
};
let jsonText2 JSON.stringify(book2);
console.log(jsonText2); // {title:Professional,authors:[Nicholas,Matt]}
let bookCopy3 JSON.parse(jsonText2);
console.log(bookCopy3);
/*
{ title: Professional,authors: [ Nicholas, Matt ]
}
*/序列化选项 JSON.stringify()接受 2 个参数过滤器和用于缩进结果 JSON 字符串的选项 第 2 个参数是数组返回只包含该数组中列出的对象属性 let jsonText3 JSON.stringify(book, [title, edition]); // 只返回包含title和edition属性
console.log(jsonText3); // {title:Professional,edition:4}第 2 个参数是函数函数接受 2 个参数 key 和 value根据 key 决定要对应属性执行的操作 let jsonText4 JSON.stringify(book, (key, value) {switch (key) {case authors:return value.join(,); // 将数值转换为字符串case year:return 5000; // 返回5000case edition:return undefined; // 忽略该属性default:return value; // 必须设置默认返回值}
});
console.log(jsonText4); // {title:Professional,authors:Nicholas,Matt,year:5000}函数过滤器会应用到要序列化对象所包含的所有对象 let book3 {title: Professional,authors: [Nicholas, Matt],edition: 4,year: 2017,book3: {title: Professional2,authors: [Nicholas, Matt],edition: 4,year: 2017,}, // 对book3做序列化时内层的book3对象同样受影响
};
let jsonText5 JSON.stringify(book3, (key, value) {switch (key) {case authors:return value.join(,);case year:return 5000;case edition:return undefined;default:return value;}
});
console.log(jsonText5); // {title:Professional,authors:Nicholas,Matt,year:5000,book3:{title:Professional2,authors:Nicholas,Matt,year:5000}}JSON.stringify()的第 3 个参数控制缩进和空格且所有有效缩进都插入换行符 第 3 个参数是数值表示每级缩进的空格数最大为 10大于 10 自动为 10 let jsonText6 JSON.stringify(book, null, 4); // 每级缩进4个空格
console.log(jsonText6);
/*
{title: Professional,authors: [Nicholas,Matt],edition: 4,year: 2017
}
*/第 3 个参数是字符串表示使用该字符串缩进 let jsonText7 JSON.stringify(book, null, -); // 使用-缩进
console.log(jsonText7);
/*
{
-title: Professional,
-authors: [
--Nicholas,
--Matt
-],
-edition: 4,
-year: 2017
}
*/可在要序列化对象中添加 toJSON()方法使用 JSON.stringify()方法序列化时则自动适当的 JSON 表示 let book4 {title: Professional,authors: [Nicholas, Matt],edition: 4,year: 2017,toJSON: function () {return this.title; // 执行toJSON()返回值直接return},
};
let jsonText8 JSON.stringify(book4);
console.log(jsonText8); // Professional箭头函数不能定义 toJSON() 方法因为其作用域是全局作用域toJSON() 可与过滤函数一并使用① 调用 toJSON()获取实际返回值如没有则使用默认的序列化 ② 将该值传入过滤函数 let num {toJSON: function () {return 123;},
};
let book5 {title: Professional,authors: [Nicholas, Matt],edition: 4,year: 2017,num,
};
let jsonText9 JSON.stringify(book5, [title, edition, num], 4); // JSON.stringify()时默认调用num的toJSON()方法
console.log(jsonText9);
/*
{title: Professional,edition: 4,num: 123
}
*/解析选项
JSON.parse() 接受一个还原函数函数接受 2 个参数 key 和 value根据 key 决定要对应属性执行的操作
let book6 {title: Professional,authors: [Nicholas, Matt],edition: 4,year: 2017,num,
};
let jsonText10 JSON.stringify(book6);
let bookCopy4 JSON.parse(jsonText10, (key, value) key year ? value 1 : value
);
console.log(bookCopy4);
/*
{title: Professional,authors: [ Nicholas, Matt ],edition: 4,year: 2018,num: 123
}
*/与 JSON.stringify()第 2 个参数为函数时相似返回值为undefined的建将被忽略
let bookCopy5 JSON.parse(jsonText10,(key, value) (key year ? undefined : value) // 返回值为undefined的建将被忽略
);
console.log(bookCopy5);
/*
{title: Professional,authors: [ Nicholas, Matt ],edition: 4,num: 123
}
*/总结 问点
JSON 支持哪些类型的值各种类型相比 JS 分别有哪些不同的语法如何利用 JSON 序列化进行深拷贝哪些情况下序列化后对象的属性会被省略JSON.stringify()的第二个参数为数组或函数时分别对结果进行了怎样的过滤JSON.stringify()的第三个参数为数值或字符串时分别对结果进行了怎样的缩进写一段代码使用 toJSON()结合过滤函数对 JSON 进行序列化写一段代码利用 JSON.parse()的第二个参数还原函数进行字符串解析
