用javascript解析json(JavaScript JSON.stringify的使用总结)
用javascript解析json
JavaScript JSON.stringify的使用总结目录
- 一、使用方法
- 1、基本用法
- 2、第二个参数--过滤器
- 3、第三个参数--字符串缩进
- 4、toJSON()方法--自定义JSON序列化
- 二、使用场景
- 1、判断数组是否包含某对象,或者判断对象是否相等。
- 2、使用localStorage/sessionStorage时
- 3、实现对象深拷贝
- 三、使用注意事项
- 1、被转换值中有 NaN 和 Infinity
- 2、被转换值中有 undefined、任意的函数以及 symbol 值
- 3、循环引用
- 4、含有不可枚举的属性值时
- 四、总结
1、基本用法
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
默认情况下,JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
在序列化JavaScript对象时,所有函数和原型成员都会有意地在结果中省略。此外,值为undefined的任何属性也会被跳过。最终得到的就是所有实例属性均为有效JSON数据类型的表示。 在JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
如果第二个参数是一个数组,那么JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
在这个例子中,JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
如果第二个参数是一个函数,则行为又有不同。提供的函数接收两个参数:属性名(key)和属性值(value)。可以根据这个key决定要对相应属性执行什么操作。这个key始终是字符串,只是在值不属于某个键/值对时会是空字符串。 上面的代码,我们通过replacer将成绩从百分制替换为成绩等级。 值得注意的是,如果stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
这样得到的jsonText格式如下: JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
有时候,对象需要在JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
下面的对象为自定义序列化而添加了一个toJSON()方法: 注意,箭头函数不能用来定义toJSON()方法。主要原因是箭头函数的词法作用域是全局作用域,在这种情况下不合适。 我们还可以使用JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
不过这种方式存在着较大的局限性,对象如果调整了键的顺序,就会判断出错! localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储对象类型,那么此时我们需要在存储时利用json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
开发中,有时候怕影响原数据,我们常深拷贝出一份数据做任意操作,使用JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
这是利用JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则,因为这两者基于JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
let json1 = {
title: "Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
"{"title":"Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
2、第二个参数--过滤器
let json1 = {
title: "Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
"{"weixin":"frontJS"}"
const students = [
{
name: 'james',
score: 100,
}, {
name: 'jordon',
score: 60,
}, {
name: 'kobe',
score: 90,
}
];
function replacer (key, value) {
if (key === 'score') {
if (value === 100) {
return 'S';
} else if (value >= 90) {
return 'A';
} else if (value >= 70) {
return 'B';
} else if (value >= 50) {
return 'C';
} else {
return 'E';
}
}
return value;
}
console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
3、第三个参数--字符串缩进
let json1 = {
title: "Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
{
"title": "Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
4、toJSON()方法--自定义JSON序列化
let json1 = {
title: "Json.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
1、判断数组是否包含某对象,或者判断对象是否相等。
//判断数组是否包含某对象
let data = [
{name:'浪里行舟'},
{name:'前端工匠'},
{name:'前端开发'},
],
val = {name:'浪里行舟'};
console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
// 判断对象是否相等
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
a: 1,
b: 2,
}
console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
// 调整对象键的位置后
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
b: 2,
a: 1,
}
console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
2、使用localStorage/sessionStorage时
// 存数据
function setLocalStorage(key,val) {
window.localStorage.setItem(key, JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
3、实现对象深拷贝
let arr1 = [1, 3, {
username: ' kobe'
}];
let arr2 = JSON.parse(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
let arr1 = [1, 3, function () { }, {
username: ' kobe'
}];
let arr2 = JSON.parse(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
1、被转换值中有 NaN 和 Infinity
let myObj = {
name: "浪里行舟",
age: Infinity,
money: NaN,
};
console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
2、被转换值中有 undefined、任意的函数以及 symbol 值
分为两种情况:
- 数组,undefined、任意的函数以及symbol值在序列化的过程中会被转换成 null
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
- 非数组,undefined、任意的函数以及symbol值在序列化的过程中会被忽略
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
3、循环引用
如果一个对象的属性值通过某种间接的方式指向该对象本身,那么就是一个循环引用。比如:
let bar = { a: { c: foo } }; let foo = { b: bar }; JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
这种情况下,序列化会报错的:
// 错误信息 Uncaught ReferenceError: foo is not defined at <anonymous>:3:8
4、含有不可枚举的属性值时
不可枚举的属性默认会被忽略:
let personObj = Object.create(null, { name: { value: "浪里行舟", enumerable: false }, year: { value: "2021", enumerable: true }, }) console.log(JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
以上就是JavaScript JSON.stri.jpg" alt="用javascript解析json(JavaScript JSON.stringify的使用总结)" border="0" />
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9