博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端面试-js之object类型JSON
阅读量:6603 次
发布时间:2019-06-24

本文共 2830 字,大约阅读时间需要 9 分钟。

ECMAScript有两个特殊的全局变量:Math & JSON

本文主要详解JSON

JSONValue:

JSONNullLiteral

JSONBooleanLiteral
JSONObject
JSONArray
JSONString
JSONNumber

JSONFunction:

  • JSON.stringify(jsonvalue, replacerfnorarray, space)
三个参数:1. json对象,接收的值是json对象包括除了function之外的所有类型2. 处理函数或者数组,处理函数是对每一个键值对都处理,数组是只过滤留下数组包含的键值,处理函数可以为null 3. space代表缩进字符,如果是number最大不能超过10,如果是字符串就是缩进的字符串结果:json字符串有replacer参数的话,返回过滤后的结果,否则返回原生的字符串过程:将json-->json字符串
  • JSON.parse()
接收的是json字符串,将其格式化为json对象两个参数:1. 加单引号的json字符串2. 过滤函数结果:得到格式化的json对象

例子:

JSON.stringify:

  • 键值对

    clipboard.png

  • array

    clipboard.png

  • number

    clipboard.png

  • string

    clipboard.png

  • boolean

    clipboard.png

  • null

    clipboard.png

  • function
    图片描述

可见,当值是function时会返回undefined,这个有些情况下并不是我们期望的,那么怎么解决呢,要善于利用第二个参数即replacer为函数时(详解见下面)

// 定义第二个参数为函数,参数需要key&valuefunction replace (key,value) {    // 判断value类型是否为function    if(typeof value === 'function'){        return Function.prototype.toString.call(value);    }    return value;}// 定义一个变量test,某一键值对的值为fnvar test = {'first': 1, 'getFirst': function(){console.log(this.first);}};// 调用JSON.stringify(test,replace);// 结果:// "{"first":1,"getFirst":"function (){console.log(this.first);}"}"

第二个参数除了可以是function之外还可以是数组[string,number类型的元素],相当于一个IP白名单;

var test = {a:1,b:2,c:3};JSON.stringify(test,["a"]);// "{"a":1}"

第二个参数还可以是null,或者不写,会执行JSON.stringify

var test = {a:1,b:2,c:3};JSON.stringify(test,null);// "{a:1,b:2,c:3}"JSON.stringify(test);// "{a:1,b:2,c:3}"

第三个参数space

  1. 如果space参数为String类型的情况下,则默认取String的前10个字符作为分割符
  2. 如果space参数为Number类型的情况下,则表示space个空格(space<=10,大于10取10)
//space参数为String的情况下:var test = {a:"1",b:2,c:3};JSON.stringify(test,null,'test')/*{test"a": "1",test"b": 2,test"c": 3}*///space参数为Number的情况下:var test = {a:"1",b:2,c:3};JSON.stringify(test,null,4)/*{    "a": "1",    "b": 2,    "c": 3}

三个参数共同控制,将多层嵌套的json对象转换为格式化的美化的json string

// 定义第二个参数为函数,参数需要key&valuefunction replace (key,value) {    // 判断value类型是否为function    if(typeof value === 'function'){        return Function.prototype.toString.call(value);    }    return value;}// 定义一个变量test,某一键值对的值为fnvar test = {'first': 1, 'getFirst': function(){console.log(this.first);}};// 调用JSON.stringify(test,replace,4);// 结果:/*"{    "first": 1,    "getFirst": "function (){console.log(this.first);}"}"*/

JSON.parse:

两个参数,1json字符串,2replacer function

  • 图片描述

应用:

数组去重最妙的方法

function replacer(key, value) {    if(typeof value === 'function'){        return Function.prototype.toString.call(value);    }    return value;}function unique(arr) {   var hash = {},      re = [];  for (var i = 0, length = arr.length; i < length; i++){    if(!hash[JSON.stringify(arr[i],replacer)]){      re.push(arr[i]);      hash[JSON.stringify(arr[i])] = true;    }  }  return re;}unique([function a (){console.log('function')}]);console.log(unique([1,'1', 1]));console.log(unique([1,1,5,6,5,78,5,3]));console.log(unique([1,'1',false,'false',[1,2,3],[1,2],{a:1},{a:1},{b:1}]));console.log(JSON.stringify(false));console.log(JSON.stringify('false'));

转载地址:http://rjwso.baihongyu.com/

你可能感兴趣的文章
如何选择适合自己的存储
查看>>
从Exchange 2007升级到Exchange 2010
查看>>
AWS SDK Python
查看>>
局域网通信工具 飞秋
查看>>
等差数列
查看>>
System Center Operation Manager 2012(八)DELL_MD_3200 Monintoring
查看>>
操作系统(四)---MS-DOS微软磁盘操作系统
查看>>
ajax提交表单
查看>>
FTP服务
查看>>
我的友情链接
查看>>
xcode8运行后后台打印网络相关的日志
查看>>
python语言中函数的传参与基本练习
查看>>
Java集合框架面试题
查看>>
Django1.7中注册、登陆、以及cookie的使用
查看>>
实现Lync Server 2010企业版前端服务器部署
查看>>
Java的主要就业方向
查看>>
关于使用mac进行文件远程操作
查看>>
Ubuntu Server 14.04 配置VNC
查看>>
我的友情链接
查看>>
Tcl命令操作实验-----(6)---case foreach
查看>>