JSON.stringify的多种用法总结

 更新时间:2021年06月22日 11:34:34   作者:胖先森  
这篇文章主要给大家介绍了关于JSON.stringify使用的相关资料, JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,需要的朋友可以参考下

前言

用过 json 的应该都知道,把一个对象通过 stringify 之后提交给后台是很常用的手段。但是 IE6-7 下没有 JSON 对象,所以要借助json2.js 来实现。

1.经典用法

 var data = [
     {name: "悟空", sex:1, age: 30},
     {name: "八戒", sex:0, age: 20},
     {name: "唐僧", sex:1, age: 30}
 ];//JavaScript数组中包含对象
//将JavaScript对象转换为JSON格式的字符串
var str_json = JSON.stringify(data);
console.log(str_json);
//运行结果为:
//[{"name":"悟空","sex":1,"age":30},{"name":"八戒","sex":0,"age":20},{"name":"唐僧","sex":1,"age":30}]

So easy! 这个也是我们最常用的方式

2.复杂数据的提取

比如说,我们的数据非常复杂,还有类似头像,昵称,个人签名之类的信息。可是我保存在本地,只需要用户名和性别,如果操作呢?我们可以通过提供的第二参数搞定,遍历数据重新提取下即可。

a.传统方式提取数据思路

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];
//传统方式提取数据
var new_data = [];
for (var i=0, new_data=[]; i<data.length; i++) {
    //构建行的数组
    new_data.push({
        name: data[i].name,
        sex:  data[i].age
    });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);

b.使用stringify的第二参数搞定提取数据

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","age"]);
console.log(str_json);
//运行结果	
//[{"name":"悟空","age":30},{"name":"八戒","age":20},{"name":"唐僧","age":30}]

第二个参数只要传入需要的keys数组,就非常轻松的就完成这种处理了。

当然如果我们要更纠结的处理,比如要把 1,0 修改为男女,那么第二个参数可以用回调函数来处理。

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,function (key, value) {
    if(key==="sex"){
        return ["男生","女生"][value];
    }
    return value;
});
console.log(str_json);
// [{"name":"悟空","sex":"女生","age":30},{"name":"八戒","sex":"男生","age":20},{"name":"唐僧","sex":"女生","age":30}]

3.第三个参数"吴用"

非常鸡肋的一个参数,基本没有用过,看自己的情况!

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","sex"],"\t");
console.log(str_json);
/*
[
	{
		"name": "悟空",
		"sex": 1
	},
	{
		"name": "八戒",
		"sex": 0
	},
	{
		"name": "唐僧",
		"sex": 1
	}
]
*/

不懂请查看api

developer.mozilla.org/en-US/docs/

总结

到此这篇关于JSON.stringify用法的文章就介绍到这了,更多相关JSON.stringify用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Matlab中 sort 函数用法

    详解Matlab中 sort 函数用法

    这篇文章主要介绍了matlab中 sort 函数用法 的相关资料,需要的朋友可以参考下
    2016-03-03
  • JS实现简单拖拽效果

    JS实现简单拖拽效果

    这篇文章主要为大家详细介绍了JS实现拖拽效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript原型链与继承操作实例总结

    JavaScript原型链与继承操作实例总结

    这篇文章主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
    2018-08-08
  • javascript中tostring()和valueof()的用法及两者的区别

    javascript中tostring()和valueof()的用法及两者的区别

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别,对js tostring valueof相关知识感兴趣的朋友一起学习吧
    2015-11-11
  • JavaScript函数参数的传递方式详解

    JavaScript函数参数的传递方式详解

    本文主要介绍了JavaScript函数参数的传递方式,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 引入JavaScript时alert弹出框显示中文乱码问题

    引入JavaScript时alert弹出框显示中文乱码问题

    今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
    2017-09-09
  • 微信小程序wx.request拦截器使用详解

    微信小程序wx.request拦截器使用详解

    这篇文章主要介绍了微信小程序wx.request拦截器详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 获取JavaScript用户自定义类的类名称的代码

    获取JavaScript用户自定义类的类名称的代码

    获取JavaScript用户自定义类的类名称的代码...
    2007-03-03
  • JS简单测试循环运行时间的方法

    JS简单测试循环运行时间的方法

    这篇文章主要介绍了JS简单测试循环运行时间的方法,涉及针对javascript中for循环、for...in循环及foreach循环的相关使用方法及运行时间测试,需要的朋友可以参考下
    2016-09-09
  • VSCode开发TypeScript的实现步骤

    VSCode开发TypeScript的实现步骤

    本文主要介绍了VSCode开发TypeScript的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论