发布时间:2024-02-02 16:00
JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。
JSON的顶层支持三种类型的值:
{
"name": "hhh",
"age": 18,
"friend": {
"name": "sam"
}
}
[
234,
"abc",
{
"name": "amy"
}
]
null
(不能使用NaN
, Infinity
, -Infinity
和undefined
)。某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串,这样方便对其进行处理:
在ES5中引用了JSON全局对象,该对象有两个常用的方法:
const obj = {
name: "why",
age: 18,
friend: {
name: "kobe"
},
hobbies: ["123","456","789"]
}
//转换成字符串保存
const objString = JSON.stringify(obj)
localStorage.setItem("info",objString)
//获取字符串转回对象
const itemString = localStorage.getItem("info")
const info = JSON.parse(itemString)
console.log(info);
JSON.stringify(value[, replacer [, space]])
返回值: 一个表示给定值的JSON格式字符串。
replacer参数可以以下三种情况:
JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'
JSON.stringify({key: 'json'}, true) // '{"key":"json"}'
复制代码
2.如果是一个数组,则只有包含在这个数组中的属性名,才会最终被序列化到结果字符串中。
只对对象的属性有效,对数组无效。
const obj = {
json: 'JSON',
parse: 'PARSE',
stringify: 'STRINGIFY'
}
JSON.stringify(obj, ['parse', 'stringify'])
// '{"parse":"PARSE","stringify":"STRINGIFY"}'
3.如果是一个函数,被序列化的值的每个属性都会经过该函数的转换和处理;
处理过程:
JSON.stringify() 方法将一个JavaScript 对象或值转换为JSON 字符串:
const obj = {
name: "why",
age: 18,
friend: {
name: "kobe"
},
hobbies: ["123","456","789"]
}
//1.直接转化
const jsonString1 = JSON.stringify(obj)
console.log(jsonString1);
//{"name":"why","age":18,"friend":{"name":"kobe"},"hobbies":["123","456","789"]}
//# 2.stringify第二个参数replacer
//2.1 第二个参数replacer 为:传入数组,设定哪些是需要转换
const jsonString2 = JSON.stringify(obj,["name","friend"])
console.log(jsonString2);
//{"name":"why","friend":{"name":"kobe"}}
//2.2 第二个参数replacer 为:传入回调函数
const jsonString3 = JSON.stringify(obj,(key, value) => {
if(key === "age") {
return value + 1
}
return value
})
console.log(jsonString3);
//{"name":"why","age":19,"friend":{"name":"kobe"},"hobbies":["123","456","789"]}
//# 3.stringify第三个参数 space
const jsonString4 = JSON.stringify(obj, null, "---")
//如果第二个参数不需要,传入null
//JSON.stringify(obj, null, 2),最后一个参数为 2(数字)时,默认以空格区分
console.log(jsonString4)
// {
// ---"name": "why",
// ---"age": 18,
// ---"friend": {
// ------"name": "kobe"
// ---},
// ---"hobbies": [
// ------"123",
// ------"456",
// ------"789"
// ---]
// }
JSON.parse(text[, reviver])
返回值: JavaScript对象/值, 对应给定JSON文本的对象/值。
JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。
提供可选的reviver 函数用以在返回之前对所得到的对象执行变换(操作)。
const JSONString = '{"name":"why","age":18,"friend":{"name":"kobe"},"hobbies":["123","456","789"]}'
const info = JSON.parse(JSONString,(key,value) => {
if(value === "age") {
return value - 1
}
return value
})
console.log(info);
// {
// name: 'why',
// age: 18,
// friend: { name: 'kobe' },
// hobbies: [ '123', '456', '789' ]
// }
生成的新对象和之前的对象并不是同一个对象:
相当于是进行了一次深拷贝;
const obj = {
name: 'why',
age: 18,
friend: {
name: 'kobe'
}
}
const objString = JSON.stringify(obj)
const info = JSON.parse(objString)
console.log(info);
//{ name: 'why', age: 18, friend: { name: 'kobe' } }
console.log(info === obj)//false
info.friend.name = "james"
console.log(obj.friend.name)//kobe
注意:这种方法它对函数是无能为力的
创建出来的info中是没有foo函数的,这是因为stringify并不会对函数进行处理;
举例:
const obj = {
name: 'why',
age: 18,
friend: {
name: 'kobe'
},
eating() {
console.log("eating~")
}
}
const objString = JSON.stringify(obj)
const info = JSON.parse(objString)
console.log(info);
//{ name: 'why', age: 18, friend: { name: 'kobe' } }
console.log(info === obj)//false
info.friend.name = "james"
console.log(obj.friend.name)//kobe
这里在obj对象中添加了方法,但是转换后的info对象中没有函数