深入理解,简单一招实现json数据可视化

2019-12-08 01:56栏目:人才招聘
TAG:

深切驾驭 JSON

2017/03/29 · JavaScript · 2 评论 · JSON

初藳出处: Apriltail   

大家先来看一个JS中广泛的JS对象连串化成JSON字符串的标题,请问,以下JS对象通过JSON.stringify后的字符串是何许的?先不用急着复制粘贴到调节台,先本身打开三个代码编辑器或然纸,写写看,写完再去细心比较你的支配台出口,假诺有误记得看完全文并商酌,哈哈。

JavaScript

var friend={ firstName: 'Good', 'lastName': 'Man', 'address': undefined, 'phone': ["1234567",undefined], 'fullName': function(){ return this.firstName + ' ' + this.lastName; } }; JSON.stringify(friend卡塔尔(قطر‎;//那风流浪漫行重回什么吗?

1
2
3
4
5
6
7
8
9
10
11
var friend={  
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName + ' ' + this.lastName;
    }
};
 
JSON.stringify(friend);//这一行返回什么呢?

第3个难题,尽管自己想在最终JSON字符串将那些’friend’的真名全体成为大写字母,也等于把”Good”变成”GOOD”,把”Man”形成”MAN”,那么能够如何做?

依赖上述七个问题,我们再沿波讨源问一下,JSON究竟是什么东西?为啥JSON正是便于数据调换?JSON和JS对象的区分?JS中JSON.parseJSON.stringify和不遍布的toJSON,这多少个函数的参数和拍卖细节到底是何许的?

迎接步向此番“深挖JSON之旅”,下文将从以下多少个地点去精晓JSON:

  • 第一是对“JSON是黄金时代种轻量的数据调换格式”的知情;
  • 接下来来看日常被同日而道的JSON和JS对象的界别;
  • 最终大家再来看JS中那多少个JSON相关函数具体的实施细节。

可望全文能让如从前的本人同风流倜傥对JSON管中窥豹的亲能说清楚JSON是什么样,也能天马行空使用JSON,不看调节台就明白JS对象系列化成JSON字符串后输出是甚。

简易风流洒脱招完结json数据可视化

2015/07/21 · JavaScript · JSON, 数量可视化

初藳出处: 吕大豹   

付出三个内部职能时碰着的急需,要把json数据在页面上呈现出来,平常浏览器会安装jsonView这样的增加来看json数据,可是程序要用到的话该如何是好呢?明天在互连网寻觅的时候,开掘了那么些小技艺,分享一下。

要用到的骨干是JSON.stringify这么些函数,没悟出吧,平常大家只把它用来体系号json数据。可是那些stringify是有多少个参数的,

JavaScript

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

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

,具体陈述请看这里:

咱俩要用到的正是那第3个参数,它能够钦定在扭转的字符串中加多少空格,进而生成有早晚格式的字符串。生成的字符串我们得以放在<pre>标签中,那样就能够很好的呈现缩进。然后呢,为了让变化的数量有高亮效果,我们还是可以够写一个简单易行的高亮函数。基本便是那般个原理啦,请看代码达成:

JavaScript

function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } var obj = { num: 1234, str: '字符串', arr: [1,2,3,4,5,6], obj: { name: 'tom', age: 10, like: ['a', 'b'] } }; var str = JSON.stringify(obj, undefined, 4); output(syntaxHighlight(str));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
 
function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}
 
var obj = {
    num: 1234,
    str: '字符串',
    arr: [1,2,3,4,5,6],
    obj: {
        name: 'tom',
        age: 10,
        like: ['a', 'b']
    }
};
var str = JSON.stringify(obj, undefined, 4);
 
output(syntaxHighlight(str));

末尾生成的效用正是这么的:

图片 1

是或不是轻便而又实用吧~

1 赞 1 收藏 评论

图片 2

前面壹本品质与丰富申报

2018/08/22 · 底工本领 · 性能

原来的书文出处: counterxing   

风度翩翩、JSON是大器晚成种格式,基于文本,优于轻量,用于交流数据

生龙活虎经未有去过JSON的合法介绍能够去一下那边,官方介绍第生龙活虎、二段已经很掌握地发挥了JSON是哪些,小编将JSON是哪些提炼成以下多少个方面:

概述

对从今以后台开荒以来,记录日志是风流倜傥种非常广阔的支出习于旧贯,平常大家会采用try...catch代码块来主动抓获错误、对于每一遍接口调用,也会记录下每一回接口调用的小时费用,以便大家监察和控制服务器接口质量,实行难点各个核实。

刚进杂货店时,在拓宽Node.js的接口开荒时,作者不太习于旧贯每一回各个核实难点都要通过跳板机登上服务器看日志,后来渐渐习贯了这种方法。

举例:

JavaScript

/** * 获取列表数据 * @parma req, res */ exports.getList = async function (req, res卡塔尔国 { //获取乞求参数 const openId = req.session.userinfo.openId; logger.info(`handler getList, user openId is ${openId}`卡塔尔(英语:State of Qatar); try { // 得到列表数据 const startTime = new Date(卡塔尔.getTime(卡塔尔; let res = await List瑟维斯.getListFromDB(openId卡塔尔国; logger.info(`handler getList, ListService.getListFromDB cost time ${new Date().getTime() - startDate}`卡塔尔(英语:State of Qatar); // 对数码管理,重回给前端 // ... } catch(error卡塔尔 { logger.error(`handler getList is error, ${JSON.stringify(error)}`); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 获取列表数据
* @parma req, res
*/
exports.getList = async function (req, res) {
    //获取请求参数
    const openId = req.session.userinfo.openId;
    logger.info(`handler getList, user openId is ${openId}`);
 
    try {
        // 拿到列表数据
        const startTime = new Date().getTime();
        let res = await ListService.getListFromDB(openId);
        logger.info(`handler getList, ListService.getListFromDB cost time ${new Date().getTime() - startDate}`);
        // 对数据处理,返回给前端
        // ...
    } catch(error) {
        logger.error(`handler getList is error, ${JSON.stringify(error)}`);
    }
};

以下代码平日会冒出在用Node.js的接口中,在接口中会总计查询DB所耗费时间间、亦恐怕计算RPC劳动调用所耗费时间间,以便监测质量瓶颈,对质量做优化;又只怕对那些使用try ... catch主动抓获,以便随即对标题张开追思、还原难题的景观,进行bug的修复。

而对于前带来讲呢?能够看之下的情景。

近几年在拓宽二个须求开荒时,偶然发掘webgl渲染影象退步的状态,大概说印象会忍俊不禁深入剖判战败的情况,我们或者一向不知底哪张印象会剖判或渲染失利;又或如近年来付出的其余一个需求,大家会做二个关于webgl渲染时间的优化和印象预加载的必要,假使贫乏质量监控,该怎么样统计所做的渲染优化和形象预加载优化的优化比例,如何申明本身所做的业务具备价值吗?或者是通过测验同学的黑盒测验,对优化前后的大运进行录屏,分析从走入页面到印象渲染实现到底经过了不怎么帧图像。那样的数量,大概既不许确、又相比片面,设想测验同学而不是确实的顾客,也无从恢复生机真实的客户他们所处的互联网情形。回过头来开采,大家的体系,即使在服务端层面做好了日记和特性总计,但在前面一个对丰裕的监督和属性的总括。对于前端的属性与充足申报的取向研究是有要求的。

1. 生龙活虎种多少格式

怎么是格式?正是正式你的多少要怎么表示,举个栗子,有个人叫“二百六”,身体高度“160cm”,体重“60kg”,今后您要将以此人的那几个音信传给外人恐怕别的什么事物,你有很各样选项:

  • 姓名“二百六”,身高“160cm”,体重“60kg”
  • name="二百六"&height="160cm"&weight="60kg"
  • 二百六16060
  • {"name":"二百六","height":160,"weight":60}
  • … …

以上全数选拔,传递的数量是风姿浪漫致的,不过你可以见到情势是可以琳琅满指标,那正是各类不一样格式化后的数额,JSON是内部意气风发种表示方法。

非常捕获

对在此以前带给说,我们要求的要命捕获无非为以下二种:

  • 接口调用情状;
  • 页面逻辑是或不是错误,比如,顾客走入页面后页面呈现白屏;

对于接口调用景况,在前面三个平常必要上报客商端相关参数,举例:客商OS与浏览器版本、央浼参数(如页面ID);而对于页面逻辑是还是不是错误难题,日常除了顾客OS与浏览器版本外,须求的是报错的仓库消息及实际报错地点。

2. 依照文本的多少格式

JSON是依靠文本的数目格式,相对于依靠二进制的数码,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是怎么大家第二片段加以卡塔尔国的字符串,大家常会称呼“JSON字符串”。

那些捕获方法

3. 轻量级的多少格式

在JSON以前,有多个多少格式叫xml,现在依旧大规模在用,不过JSON越发轻量,如xml亟待动用超多标签,像下面的例证中,你能够明显看出xml格式的多少中标签作者并吞了多数上空,而JSON相当轻量,即生机勃勃律数量,以JSON的格式吞噬的带宽更加小,那在有恢宏数目诉求和传递的情景下是有醒目优势的。

大局捕获

能够经过全局监听万分来捕获,通过window.onerror或者addEventListener,看以下例子:

JavaScript

window.onerror = function(errorMessage, scriptU奥迪Q3I, lineNo, columnNo, error卡塔尔国 { console.log('errorMessage: ' + errorMessage卡塔尔国; // 非凡新闻console.log('scriptUMuranoI: ' + scriptUTiguanI卡塔尔; // 至极文件路径console.log('lineNo: ' + lineNo卡塔尔(قطر‎; // 卓殊行号 console.log('columnNo: ' + columnNo卡塔尔(قطر‎; // 相当列号 console.log('error: ' + error卡塔尔; // 格外仓库音信// ... // 极度上报 }; throw new Error('那是八个谬误'卡塔尔国;

1
2
3
4
5
6
7
8
9
10
window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
  console.log('errorMessage: ' + errorMessage); // 异常信息
  console.log('scriptURI: ' + scriptURI); // 异常文件路径
  console.log('lineNo: ' + lineNo); // 异常行号
  console.log('columnNo: ' + columnNo); // 异常列号
  console.log('error: ' + error); // 异常堆栈信息
  // ...
  // 异常上报
};
throw new Error('这是一个错误');

图片 3

通过window.onerror事件,能够赢得实际的不胜信息、万分文件的UXC90L、卓殊的行号与列号及极度的库房音信,再捕获卓殊后,统一举报至大家的日志服务器。

亦或是,通过window.addEventListener措施来拓宽极其申报,道理同理:

JavaScript

window.add伊夫ntListener('error', function(卡塔尔 { console.log(error卡塔尔国; // ... // 万分上报 }卡塔尔(قطر‎; throw new Error('那是叁个荒诞'卡塔尔(قطر‎;

1
2
3
4
5
6
window.addEventListener('error', function() {
  console.log(error);
  // ...
  // 异常上报
});
throw new Error('这是一个错误');

图片 4

4. 被大规模地用来数据调换

轻量已是八个用来数据沟通的优势了,但更要紧的JSON是轻松阅读、编写和机器解析的,即这几个JSON对人和机械都以和煦的,并且又轻,独立于言语(因为是基于文本的),所以JSON被分布用于数据调换。

原先端JS实行ajax的POST央浼为例,后端PHP管理乞请为例:

  1. 前面三个构造叁个JS对象,用于包装要传送的数据,然后将JS对象转变为JSON字符串,再发送央浼到后端;
  2. 后端PHP选用到那些JSON字符串,将JSON字符串转变为PHP对象,然后管理央求。

能够看出,相近的数码在那有3种不一致的表现方式,分别是前面一个的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象显明不是叁个东西,可是出于大家用的都以JSON来传递数据,大家都能驾驭这种多少格式,都能把JSON这种数据格式超级轻松地转向为温馨能明白的数据构造,这就便于啦,在其余种种语言遭受中交流数据都以如此。

try… catch

使用try... catch虽说可以较好地展开充足捕获,不至于使得页面由于生龙活虎处错误挂掉,但try ... catch破获情势体现过分丰腴,好多代码应用try ... catch包裹,影响代码可读性。

二、JSON和JS对象时期的“八卦”

许多时候都听见“JSON是JS的叁个子集”那句话,况兼那句话笔者已经也一直这么认为,每一个切合JSON格式的字符串你解析成js都是足以的,直到后来发觉了三个奇古怪怪的东西…

遍布难题

版权声明:本文由ag真人发布于人才招聘,转载请注明出处:深入理解,简单一招实现json数据可视化