javascript - 为什么 JSON.stringify() 遇到 set 对象时会被忽略？

Question

这个问题已经有答案了:

JSON stringify a Set (4 个回答)

已关闭 5 年前。

我有一个 Student Java Script 对象，如下所示:

function Student(name, grade){
    this.name = name;
    this.grade = grade;
}

我知道我可以使用 JSON.stringify() 和 JSON.parse() 方法在本地存储中存储和检索该对象。效果很好。但我的问题如下。

我想引入一个 Set() 类型的新属性“subjects”，它采用唯一值并将此 Student 对象存储在本地存储中。我的 saveStudent() 方法如下:

function saveStudent () {
    student = new Student("Rajib","1st");

    var subjects = new Set();
    subjects.add("Mathematics");
    subjects.add("Science");
    subjects.add("English");
    console.log(subjects);
    student.subjects = subjects;

    window.localStorage.setItem("student", JSON.stringify(student));
}

我可以将此对象存储在本地存储中，不会出现任何错误，而且我的控制台也可以正确显示 3 个主题。但是，当我尝试从本地存储检索此 Student 对象时，我得到了 Student 对象，其中包含除“subjects”之外的所有值，该对象为空。我可以知道为什么吗？

我的getStudent()方法如下:

function getStudent () {
    var student = JSON.parse(window.localStorage.getItem("student"));
    console.log(student);
}

我的控制台显示

Object { name: "Rajib", grade: "1st", subjects: {} }

是否有办法将嵌套对象(其中对象的属性包含另一个对象)存储在本地存储中并检索其所有属性和值？

注意:我可以通过序列化为主题字符串然后再次反序列化来解决上述问题。但我想避免这种情况，并希望以纯 Java 脚本或 OOP 的方式来完成。

Answer 1

因为Sets在 JavaScript 中，不将其条目存储为可枚举属性，这些条目对 JSON.stringify 不透明功能。

但是，通过replacer JSON.stringify的参数和 reviver JSON.parse的参数，提供了一种影响序列化/反序列化过程中遇到的项目处理方式的方法。

因此:

• 存储您的数据，使用 JSON.stringify的replacer将 Set 转换为数组 --> Array.from( Set( ... ) ) .

• 检索存储的数据，使用JSON.parse的reviver将数组转换回 Set --> new Set( [ ... ] ) .

---

function Student(name, grade, subjects) {
  this.name = name;
  this.grade = grade;
  this.subjects = subjects || new Subjects();
}

function saveStudent(student) {
  var studentObjectAsSerialisedData = JSON.stringify(student, function(propertyKey, propertyValue) {

    // Store a set in the form a list that can be used to recreate it
    if ("subjects" === propertyKey) {
      return Array.from(propertyValue);
    }

    return propertyValue;
  });

  window.localStorage.setItem("student", studentObjectAsSerialisedData);
  console.log("saved:", studentObjectAsSerialisedData);
}

function getStudent() {
  var studentObjectAsSerialisedData = window.localStorage.getItem("student");
  var student = JSON.parse(studentObjectAsSerialisedData, function(propertyKey, propertyValue) {
    // Restore subjects from list to the set form
    if ("subjects" === propertyKey) {
      return new Set(propertyValue);
    }

    // Everything else is returned as is
    return propertyValue;
  });

  student.subjects = new Set(student.subjects);

  console.log("loaded: ", student);
  console.log("loaded subjects of student: ", Array.from(student.subjects));
}

var subjects = new Set(["Mathematics", "Science", "English"]);
var student = new Student("Rajib", "1st", subjects);
saveStudent(student);

var storedStudent = getStudent();