一、JSON.strongify()、JSON.parse()
1、JSON.strongify() 的基本使用
// 示例代碼
const obj = {
name: "why",
age: 18,
fridends: {
name: "Kobe",
},
hobbies: ["籃球", "足球"],
};
// 將obj轉(zhuǎn)成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() 函數(shù)的第二個參數(shù)可以是什么（兩種數(shù)據(jù)類型）？
- 【傳入數(shù)組】表示哪些key需要序列化
- 【傳入函數(shù)】可以對序列化過程進行攔截，拿到key、value進行自定義處理
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["籃球", "足球"],
};
// 【第二個參數(shù)傳遞數(shù)組】僅序列化 name、friends
const objString1 = JSON.stringify(obj, ["name", "friends"]);
console.log(objString1); // {"name":"why","friends":{"name":"Kobe"}}
// 【第二個參數(shù)傳遞函數(shù)】對序列化過程進行攔截
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() 函數(shù)的第三個參數(shù)有什么作用？
- 【作用】對數(shù)據(jù)的存儲進行格式化
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["籃球", "足球"],
};
// 【第三個參數(shù)的作用】添加空格前綴，友好的格式，便于觀察數(shù)據(jù)
const objString1 = JSON.stringify(obj, null, 2);
console.log(objString1);
// 輸出結(jié)果
{
"name": "why",
"age": 18,
"friends": {
"friendName": "Kobe"
},
"hobbies": [
"籃球",
"足球"
]
}
4、借助 JSON.strongify() 進行序列化時，被序列化的對象有 toJSON 方法，會有什么效果？
const obj = {
name: "why",
age: 18,
friends: {
friendName: "Kobe",
},
hobbies: ["籃球", "足球"],
toJSON: function () {
// 有實現(xiàn)toJSON方法
return "1234";
},
};
const objString1 = JSON.stringify(obj);
console.log(objString1); // "1234"
5、如何對反序列化的數(shù)據(jù)進行攔截處理？
- 【借助 JSON.parse() 函數(shù)的回調(diào)】
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實現(xiàn)淺拷貝的兩種方式？
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、借助序列化，也能實現(xiàn)JavaScript對象的深拷貝，但是存在什么缺點？
- 【缺點】無法對函數(shù)進行拷貝操作，函數(shù)會被直接忽略。
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);
二、瀏覽器存儲【以下內(nèi)容都是基于瀏覽器環(huán)境】
1、webStorage 中的 localStorage 和 sessionStorage 有異同嗎？
- 【同】都是瀏覽器用于直觀存儲key、value的方案
- 【localStorage】本地存儲，提供的是一種永久性存儲的方法，在關閉網(wǎng)頁重新打開時，存儲內(nèi)容依然保留。
- 【sessionStorage】會話存儲，提供的是本次會話的存儲，在關閉掉會話時，存儲的內(nèi)容會被清除。
image.png
image.png
image.png
2、【了解】IndexedDB
- 【IndexedDB】是一種事務型數(shù)據(jù)庫
image.png
image.png
3、隨著互聯(lián)網(wǎng)的發(fā)展， cookie 漸漸被淘汰，為什么呢？主要有如下缺點：
- ① 明文傳輸
- ② 大小限制 4KB
- ③cookie會附加到每一個http請求中，有點浪費流量。
- ④限制客戶端不僅僅有瀏覽器了，還有iOS、安卓、小程序，對cookie的支持不太好。
- 【注意】現(xiàn)在主要使用 token 替代 cookie
4、什么是內(nèi)存cookie？什么是硬盤cookie？
-【內(nèi)存cookie】沒有設置過期時間，默認情況下cookie是內(nèi)存cookie，在關閉瀏覽器時會自動刪除。
- 【硬盤cookie】有設置過期時間，并且過期時間不為0或者負數(shù)的cookie，是硬盤cookie，需要手動或者到期時，才會刪除。
image.png
image.png
image.png
