JavaScript中JSON.stringify()

简介: JavaScript中JSON.stringify()

JSON.stringify()方法可以js对象转换成json字符串。

let obj = {
  x: 100,
  y:100
}
console.log(JSON.stringify(obj))
//执行结果 "{"x":100,"y":100}"

语法

JSON.stringify(value, replace, space)

  • value: js对象
  • replace: 可选,参数可以是一个函数或者一个数组,可以对被序列化中的每个属性进行梳理。
  • space:指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格;如果该参数没有提供(或者为
    null),将没有空格。

异常

循环引用会抛出异常。

尝试转换BigInt类型会抛出异常。

描述

  1. 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
  2. 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  3. undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成
    null(出现在数组中时)。函数、undefined 被单独转换时,会返回
    undefined,如JSON.stringify(function(){}) or
    JSON.stringify(undefined).
  4. 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。
  5. NaN 和 Infinity 格式的数值及 null 都会被当做 null。
  6. 其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。
    JSON.stringify(
    Object.create(
    null,
    {
    x: { value: ‘x’, enumerable: false },
    y: { value: ‘y’, enumerable: true }
    }
    )
    );

replace参数

replacer 参数可以是一个函数或者一个数组。作为函数,它有两个参数,键(key)和值(value),它们都会被序列化。

在开始时, replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串。

如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串。

如果返回一个 Boolean, “true” 或者 “false” 作为属性值被添加入 JSON 字符串。

如果返回任何其他对象,该对象递归地序列化成 JSON 字符串,对每个属性调用 replacer 方法。除非该对象是一个函数,这种情况将不会被序列化成 JSON 字符串。

如果返回 undefined,该属性值不会在 JSON 字符串中输出。

注意: 不能用 replacer 方法,从数组中移除值(values),如若返回 undefined 或者一个函数,将会被 null 取代。

示例(函数):
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
console.log(jsonString)
// 返回结果   {"week":45,"month":7}
示例(数组):
JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', 只保留 “week” 和 “month” 属性值。

space 参数

space 参数用来控制结果字符串里面的间距。如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);如果是一个字符串,则每一级别会比上一级别多缩进该字符串(或该字符串的前10个字符)。

JSON.stringify({ a: 2 }, null, " ");   // '{\n "a": 2\n}'

toJSON 方法

如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为:不是该对象被序列化,而是调用 toJSON 方法后的返回值会被序列化,例如:

var obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
var obj1 = {
  foo: 'foo'
};
JSON.stringify(obj);      // '"bar"'
JSON.stringify(obj1);    // "{"foo":"foo"}"

在实际应用场景

  1. 序列化对象存储本地localStorage,sessionStorage当中。
var userInfo = {
    name: 'zhangsan',
    age: 18,
    tel: 18623469870,
    addr: '帝都'
}
localStorage.setItem('userInfo', JSON.stringify(userInfo))

  1. 深拷贝对象
var a = {name: 'zhangsan'};
var b = JSON.parse(JSON.stringify(a))
a.name = 'wangwu';
console.log(a.name, b.name)  // wuwang   zhangsan


相关文章
|
5月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
8天前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
2天前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
10 3
|
9天前
|
XML JSON JavaScript
js的json格式
js的json格式
|
15天前
|
存储 JSON JavaScript
JavaScript JSON
JavaScript JSON
30 5
|
2月前
|
JSON JavaScript 前端开发
JavaScript JSON
JavaScript JSON
|
2月前
|
存储 JSON JavaScript
js之JSON
js之JSON
26 0
|
3月前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
32 1
|
4月前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
34 8