JSON.stringify() 的使用
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() 方法是不能处理函数格式的字符串的。