JSON.stringify的小技巧

JSON.stringify

我们平时经常会用到 JSON 对象,比如当我们要实现对象的深拷贝时,我们可以用 JSON 对象的 JSON.stringify和 JSON.parse 来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系。在使用 localStorage 时,也会用到它,因为 localStorage 只能存储字符串格式的内容,所以,我们在存之前,将数值转换成 JSON字符串,取出来用的时候,再转成对象或数组。

对于 JSON.stringify 方法,它可以帮我们把一个对象或数组转换成一个 JSON字符串。我们通常只会用到它的第一个参数,其实它还有另外两个参数,可以让它实现一些非常好用的功能。

首先来看语法:

JSON.stringify(value[, replacer [, space]])

参数:

value:将要被序列化的变量的值

replacer:替代器。可以是函数或者是数组,如果是一个函数,则 value 每个属性都要经过这个函数的处理,该函数的返回值就是最后被序列化后的值。如果是一个数组,则要求该数组的元素是字符串,且这些元素会被当做 value 的键(key)进行匹配,最后序列化的结果,是只包含该数组每个元素为 key 的值。

space:指定输出数值的代码缩进,美化格式之用,可以是数字或者字符串。如果是数字(最大为10)的话,代表每行代码的缩进是多少个空格。如果是字符串的话,该字符串(最多前十个字符)将作显示在每行代码之前。

这时候,你应该知道了。我们可以用 JSON.stringify 来做序列化时的过滤,相当于我们可以自定义 JSON.stringify的解析逻辑。

使用函数过滤并序列化对象:

// 使用“函数”当替代器

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);

// {"week":45,"month":7}

使用数组过滤并序列化对象:

// 使用“数组”当替代器

const user = {

  name: 'zollero',

  nick: 'z',

  skills: ['JavaScript', 'CSS', 'HTML5']

};

JSON.stringify(user, ['name', 'skills'], 2);

// "{

//  "name": "zollero",

//  "skills": [

//    "JavaScript",

//    "CSS",

//    "HTML5"

//  ]

// }"

还有一个有意思的东西,是对象的 toJSON 属性。

如果一个对象有 toJSON 属性,当它被序列化的时候,不会对该对象进行序列化,而是将它的toJSON 方法的返回值进行序列化

见下面的例子:

var obj = {

  foo: 'foo',

  toJSON: function () {

    return 'bar';

  }

};

JSON.stringify(obj);      // '"bar"'

JSON.stringify({x: obj}); // '{"x":"bar"}'

你可能感兴趣的:(JSON.stringify的小技巧)