Summary of JavaScript JSON.stringify() usage

1. Usage

1. Basic usage

JSON.stringify() can serialize a JavaScript object into a JSON string.

let json1 = {
  title: "Json.stringify",
  author:
    "Boat on the Waves"
  ],
  year: 2021
};
let jsonText = JSON.stringify(json1);

By default, JSON.stringify() outputs a JSON string without spaces or indentation, so the value of jsonText looks like this:

"{"title":"Json.stringify","author":["浪里行舟"],"year":2021}"

When serializing JavaScript objects, all function and prototype members are intentionally omitted from the result. Additionally, any properties whose value is undefined are skipped. The end result is a representation where all instance attributes are valid JSON data types.

The JSON.stringify() method can accept a total of 3 parameters, two of which are optional (the second and third parameters). These two optional parameters can be used to specify other ways to serialize JavaScript objects. The second argument is the filters, which can be an array or a function; the third argument is an option for indenting the resulting JSON string. Use these parameters alone or in combination to give you finer control over JSON serialization.

2. The second parameter - filter

If the second argument is an array, then the result returned by JSON.stringify() will only contain the object properties listed in the array. For example, the following example:

let json1 = {
  title: "Json.stringify",
  author:
    "Boat on the Waves"
  ],
  year: 2021,
  like: 'frontend',
  weixin: 'frontJS'
};
let jsonText = JSON.stringify(json1, ['weixin']);

In this example, the second parameter of the JSON.stringify() method is an array containing a single string: "weixin". It corresponds to the property in the object to be serialized, so the resulting JSON string will only contain this property:

"{"weixin":"frontJS"}"

If the second argument is a function, the behavior is different again. The provided function receives two parameters: the attribute name (key) and the attribute value (value). You can decide what operation to perform on the corresponding attribute based on this key. The key is always a string, except that the value will be an empty string if it does not belong to a key/value pair.

const students = [
  {
    name: 'james',
    score: 100,
  }, {
    name: 'jordon',
    score: 60,
  }, {
    name: 'kobe',
    score: 90,
  }
];

function replacer (key, value) {
  if (key === 'score') {
    if (value === 100) {
      return 'S';
    } else if (value >= 90) {
      return 'A';
    } else if (value >= 70) {
      return 'B';
    } else if (value >= 50) {
      return 'C';
    } else {
      return 'E';
    }
  }
  return value;
}
console.log(JSON.stringify(students, replacer, 4))

In the above code, we use replacer to replace the score from percentage to grade.

It is worth noting that if the second parameter of stringify is a function and its return value is undefined, the corresponding property will not be serialized. If other values ​​are returned, the returned value will be used instead of the original value for serialization.

3. The third parameter - string indentation

The third parameter of the JSON.stringify() method controls indentation and spaces. When this parameter is a numeric value, it indicates the number of spaces for each level of indentation. For example, to indent 4 spaces per level, you can do this:

let json1 = {
  title: "Json.stringify",
  author:
    "Boat on the Waves"
  ],
  year: 2021
};
let jsonText = JSON.stringify(json1, null, 4);

The resulting jsonText format is as follows:

{
    "title": "Json.stringify",
    "author": [
        "Boat on the Waves"
    ],
    "year": 2021
}

JSON.stringify() takes both data conversion and ease of reading into consideration when processing data. However, the ease of reading is often overlooked.

4. toJSON() method--custom JSON serialization

Sometimes, objects require custom JSON serialization on top of JSON.stringify(). At this point, you can add a toJSON() method to the object to be serialized, and the serialization will return the appropriate JSON representation based on this method.

The following object adds a toJSON() method for custom serialization:

let json1 = {
  title: "Json.stringify",
  author:
    "Boat on the Waves"
  ],
  year: 2021,
  like: 'frontend',
  weixin: 'frontJS',
  toJSON: function () {
    return this.author
  }
};
console.log(JSON.stringify(json1)); // ["Boat in the waves"]

Note that arrow functions cannot be used to define the toJSON() method. The main reason is that arrow functions are lexically scoped to the global scope, which is not appropriate in this case.

2. Usage scenarios

1. Determine whether an array contains an object, or whether the objects are equal.

//Judge whether the array contains an object let data = [
    {name:'Boat in the Waves'},
    {name:'Front-end craftsman'},
    {name:'Front-end development'},
    ],
    val = {name:'Boat in the waves'};
console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1); //true

We can also use the JSON.stringify() method to determine whether two objects are equal.

// Check if objects are equal let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    a: 1,
    b: 2,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // true

However, this method has great limitations. If the object adjusts the order of the keys, it will be judged incorrectly!

// After adjusting the position of the object key let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    b: 2,
    a: 1,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // false

2. When using localStorage/sessionStorage

By default, localStorage/sessionStorage can only store strings. In actual development, we often need to store object types. In this case, we need to use json.stringify() to convert the object into a string when storing it, and use json.parse() to convert it back to the object when retrieving the local cache.

//Store data function setLocalStorage(key,val) {
    window.localStorage.setItem(key, JSON.stringify(val));
};
// Get data function getLocalStorage(key) {
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
// Test setLocalStorage('Test',['Front-end craftsman','Boat in the waves']);
console.log(getLocalStorage('Test')); 

3. Implement deep copy of objects

During development, we often make a deep copy of the data to perform arbitrary operations for fear of affecting the original data. Using JSON.stringify() and JSON.parse() to achieve deep copy is a good choice.

let arr1 = [1, 3, {
    Username: 'kobe'
}];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[2].username = 'duncan';
 console.log(arr1, arr2) 

This is to use JSON.stringify to convert the object into a JSON string, and then use JSON.parse to parse the string into an object. In this way, a new object is generated, and the new object will open up a new stack to achieve deep copy.

Although this method can achieve deep copy of arrays or objects, it cannot handle functions and regular expressions, because after these two are processed based on JSON.stringify and JSON.parse, the obtained regular expression is no longer a regular expression (becomes an empty object), and the obtained function is no longer a function (becomes null).

let arr1 = [1, 3, function () { }, {
  Username: 'kobe'
}];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[3].username = 'duncan';
console.log(arr1, arr2) 

3. Precautions for use

Although JSON.stringify() is very powerful, some properties cannot be stringified, so you need to pay attention to the following situations during development to avoid unexpected bugs.

1. The converted value contains NaN and Infinity

let myObj = {
  name: "Boat in the Waves",
  age: Infinity,
  money: NaN,
};
console.log(JSON.stringify(myObj));
// {"name":"Riding a Boat on the Waves","age":null,"money":null}

JSON.stringify([NaN, Infinity])
// [null,null]

2. The converted value contains undefined, arbitrary function and symbol values

There are two situations:

• Arrays, undefined, arbitrary functions, and symbol values ​​will be converted to null during serialization.

JSON.stringify([undefined, function () { }, Symbol("")]);
// '[null,null,null]'

• Non-array, undefined, arbitrary function and symbol values ​​are ignored during serialization

JSON.stringify({ x: undefined, y: function () { }, z: Symbol("") });
// '{}'

3. Circular References

If the value of an object's property refers to the object itself in some indirect way, then it is a circular reference. for example:

let bar = {
  a: {
    c:foo
  }
};
let foo = {
  b: bar
};

JSON.stringify(foo)

In this case, serialization will report an error:

// Error message Uncaught ReferenceError: foo is not defined
    at <anonymous>:3:8

4. When it contains non-enumerable attribute values

Non-enumerable properties are ignored by default:

let personObj = Object.create(null, {
  name: { value: "Boat in the Waves", enumerable: false },
  year: { value: "2021", enumerable: true },
})

console.log(JSON.stringify(personObj)) // {"year":"2021"}

IV. Conclusion

JSON.stringify() is used to serialize a JavaScript object into a JSON string. This method has some options that can be used to change the default behavior to implement filtering or modification processes. However, it should be noted that some properties cannot be stringified, so these pitfalls should be avoided during development!

The above is the detailed content of the summary of the use of JavaScript JSON.stringify(). For more information about the use of JavaScript JSON.stringify(), please pay attention to other related articles on 123WORDPRESS.COM!