深入JavaScript Day29 - JSON.strong

一、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