JSON.stringify() 的使用

2021-10-30  本文已影响0人  O无为学长O

JSON.stringify() 是一个很常用的方法,作用是将一个对象转换为JSON字符串。

参数说明


复制粘贴一下 JSON.stringify() 三个参数的含义:

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

参数 是否必须 说明
value 必需   要转换的 JavaScript 值(通常为对象或数组)
replacer 可选   用于转换结果的函数或数组。
  如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。
  如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space 可选   文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。

返回值: 返回包含 JSON 文本的字符串。
从上面的参数说明中可以看到,第二个参数可以是一个函数或者数组,这给了我们很大的发挥空间。

使用


stringify() 的第一个和第三个参数都好理解,所以下面主要说的是第二个参数。

1.当参数为数组时

当第二个参数为数组时,可作为条件筛选使用。
例如有如下对象:

var obj = {name: "小明",age: 18};

如果我们只需要 name 属性,则可以这样:

JSON.stringify(obj, ['name']); // '{"name":"小明"}'

这个特性只对对象的根属性生效,例如:

var obj = {name: "小明",age: 18, friend: {name: "小红", age: 16}};

即使第二层上也有name属性,但在筛选时并不会选中。
当对一个数组进行转换时,会筛选数组第一层的每个值,例如:

var arr = [{name: "小明",age: 18},{name: "小刚",age: 20}]
JSON.stringify(arr, ['name']);
// '[{"name":"小明"},{"name":"小刚"}]'

基本上数组的用法就是如此了。

2.当参数为函数时

函数的发挥空间是很大的,理所当然地用法也就比较多了。
当第二个参数为函数时,stringify() 会给函数传递两个参数,参数值为每一个成员的键和值。但跟数组参数不同的是,函数会处理所有层级上的每一个成员。
例如:

var arr = [{name: "小明",age: 18},{name: "小刚",age: 20, friend: {name: "小红", age: 16}}]
JSON.stringify(arr, (a,b) => { if(a == 'age') return b + 10; return b})
// '[{"name":"小明","age":28},{"name":"小刚","age":30,"friend":{"name":"小红","age":26}}]'

所有符合条件的内容都被修改了(注意『小红』是『小刚』的下一层)。
正是因为函数的这个特性,我们可以很方便地实现一些可能比较麻烦的功能。
比如上面的例子,如果不使用 stringify() 方法而想要修改所有层级上的age属性的值,就需要需要进行深循环。

3.对象的深拷贝

上面的例子中,如果想要复制一份arr的数据,通常是进行深拷贝,但其实也可以使用stringify(),只需要配合 JSON.parse() 即可:

var arr = [{name: "小明",age: 18},{name: "小刚",age: 20, friend: {name: "小红", age: 16}}]
var arr2 = JSON.parse(JSON.stringify(arr));

注意


stringify() 不能处理值为函数的成员,当某个成员的值为函数时,在转换过程中会被自动排除,例如:

var obj = {a: 123, b: 'abc', c: function(){ return 456}};
JSON.stringify(obj);
// '{"a":123,"b":"abc"} 

同样的,JSON.parse() 方法是不能处理函数格式的字符串的。

上一篇下一篇

猜你喜欢

热点阅读