一、JSON.strongify()、JSON.parse()
1、JSON.strongify() 的基本使用
// 示例代码
const obj = {
name: "why",
age: 18,
fridends: {
name: "Kobe",
},
hobbies: ["篮球", "足球"],
};
// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj);
console.log(objString);
console.log(obj);
// 输出日志
{"name":"why","age":18,"fridends":{"name":"Kobe"},"hobbies":["篮球","足球"]}
{
name: 'why',
age: 18,
fridends: { name: 'Kobe' },
hobbies: [ '篮球', '足球' ]
}
2、JSON.strongify() 函数的第二个参数可以是什么（两种数据类型）？
- 【传入数组】表示哪些key需要序列化
- 【传入函数】可以对序列化过程进行拦截，拿到key、value进行自定义处理
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
};
// 【第二个参数传递数组】仅序列化 name、friends
const objString1 = JSON.stringify(obj, ["name", "friends"]);
console.log(objString1); // {"name":"why","friends":{"name":"Kobe"}}
// 【第二个参数传递函数】对序列化过程进行拦截
const objString2 = JSON.stringify(obj, (key, value) => {
if (key === "age") {
value = value + 1;
}
console.log(key);
return value;
});
console.log(objString2); // {"name":"why","age":19,"friends":{"name":"Kobe"},"hobbies":["篮球","足球"]}
3、JSON.strongify() 函数的第三个参数有什么作用？
- 【作用】对数据的存储进行格式化
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
};
// 【第三个参数的作用】添加空格前缀，友好的格式，便于观察数据
const objString1 = JSON.stringify(obj, null, 2);
console.log(objString1);
// 输出结果
{
"name": "why",
"age": 18,
"friends": {
"friendName": "Kobe"
},
"hobbies": [
"篮球",
"足球"
]
}
4、借助 JSON.strongify() 进行序列化时，被序列化的对象有 toJSON 方法，会有什么效果？
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
toJSON: function () {
// 有实现toJSON方法
return "1234";
},
};
const objString1 = JSON.stringify(obj);
console.log(objString1); // "1234"
5、如何对反序列化的数据进行拦截处理？
- 【借助 JSON.parse() 函数的回调】
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
};
const objString = JSON.stringify(obj);
console.log(objString);
const obj2 = JSON.parse(objString, (key, value) => {
if (key === "age") {
value++;
}
return value;
});
console.log(obj2);
// 输出日志
{"name":"why","age":18,"friends":{"friendName":"Kobe"},"hobbies":["篮球","足球"]}
{
name: 'why',
age: 19,
friends: { friendName: 'Kobe' },
hobbies: [ '篮球', '足球' ]
}
6、JavaScript实现浅拷贝的两种方式？
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
};
const info1 = obj; // 引用赋值
const info2 = { ...obj }; // 浅拷贝一
const info3 = {};
Object.assign(info3, obj);
info1.name = "why info1"; // 会同时影响obj的值
console.log(obj);
info2.name = "why info2"; // 浅拷贝第一层，不会受影响
info2.hobbies.push("保龄球 info2"); // 浅拷贝第二层，会受影响
console.log(obj);
info3.name = "why info3"; // 浅拷贝第一层，不会受影响
info3.hobbies.push("保龄球 info3"); // 浅拷贝第二层，会受影响
console.log(obj);
console.log(info3);
7、借助序列化，也能实现JavaScript对象的深拷贝，但是存在什么缺点？
- 【缺点】无法对函数进行拷贝操作，函数会被直接忽略。
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["篮球", "足球"],
run: function () {
console.log("run");
},
};
const objString = JSON.stringify(obj);
console.log(objString);
const info = JSON.parse(objString);
info.name = "why info";
info.hobbies.push("保龄球");
console.log(obj);
console.log(info);
二、浏览器存储【以下内容都是基于浏览器环境】
1、webStorage 中的 localStorage 和 sessionStorage 有异同吗？
- 【同】都是浏览器用于直观存储key、value的方案
- 【localStorage】本地存储，提供的是一种永久性存储的方法，在关闭网页重新打开时，存储内容依然保留。
- 【sessionStorage】会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除。
image.png
image.png
image.png
2、【了解】IndexedDB
- 【IndexedDB】是一种事务型数据库
image.png
image.png
3、随着互联网的发展， cookie 渐渐被淘汰，为什么呢？主要有如下缺点：
- ① 明文传输
- ② 大小限制 4KB
- ③cookie会附加到每一个http请求中，有点浪费流量。
- ④限制客户端不仅仅有浏览器了，还有iOS、安卓、小程序，对cookie的支持不太好。
- 【注意】现在主要使用 token 替代 cookie
4、什么是内存cookie？什么是硬盘cookie？
-【内存cookie】没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除。
- 【硬盘cookie】有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除。
image.png
image.png
image.png
