xml地图|网站地图|网站标签 [设为首页] [加入收藏]
也谈JavaScript数组去重,拥抱Web设计新趋势
分类:web前端

归纳黄金年代招达成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])

,具体描述请看这里:

作者们要用到的正是那第多少个参数,它能够钦命在扭转的字符串中加多少空格,进而生成有自然格式的字符串。生成的字符串我们得以放在<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

拥抱Web设计新取向:SVG Pepsi-Colas推行应用

2016/07/30 · HTML5 · 1 评论 · Sprites, SVG

初藳出处: 坑坑洼洼实验室   

图片 3

也谈JavaScript数组去重

2017/01/07 · JavaScript · 数组

原著出处: TooBug(@TooBug)   

JavaScript的数组去重是贰个老生常谈的话题了。随意搜豆蔻梢头搜就能够找到比比较多差别版本的解法。

今天在天涯论坛上观察如日中天篇文章,也写数组去重,主要正视的措施是将采纳数组成分当做对象key来去重。笔者在腾讯网转载了“用对象key去重不是个好点子…”然后小编问哪些才是援用的情势。

细想一下,那样二个像样轻松的须要,如若要到位完备,涉及的学问和急需小心的地方实在不少,于是诞生此文。

前言

乘胜移动互连网的过来,种种高清显示屏移动器械的多如牛毛,导致H5应用在运动设备retina显示器下常常会遇见Logo不显明的标题。

为了减轻荧屏分辨率对Logo影响的主题材料,经常使用CSS Coca Cola,Icon Font,CSS Icon以致SVG以适应@x1屏、@2屏、@3屏,相对相比来讲SVG矢量性、缩放无损等繁多优点,更应受前端设计员的注重,可在重重商厦的移位项目选择中却很稀有,究其主要原因在于SVG开采学习开销比较高以至在绘制的习性上比PNG要差。此篇小说将从SVG连忙导出到SVG、SVG Symbol组件化在品种中实战举行传授,并提供SVG Symbol火速导出工具,教你什么样巩固SVG开拓效能减资。

概念再次(相等)

要去重,首先得定义,什么叫作“重复”,即现实到代码来说,三个数据在怎样处境下得以算是十分的。那实际不是三个十分轻便的主题材料。

对于原始值来讲,大家比较轻易想到11是特出的,'1''1'也是异常的。那么,1'1'是相等的么?

如日方升经这一个难题万幸说,只要回答“是”也许“不是”就可以。那么上面这一个情形就没那么轻易了。

SVG简介

SVG是风姿洒脱种开放规范的矢量图形语言,使用svg格式大家能够直接用代码来描写图像,可以用别样文字管理工科具展开svg图像,通过退换部分代码来使图像具有交互功能,并得以每天插入到HTML中经过浏览器来浏览。

NaN

初看NaN时,相当轻松把它正是和nullundefined长期以来的独立数据类型。但事实上,它是数字类型。

JavaScript

// number console.log(typeof NaN);

1
2
// number
console.log(typeof NaN);

基于典型,比较运算中若是有一个值为NaN,则相比较结实为false,所以会有下边这么些看起来略蛋疼的结论:

JavaScript

// 全都是false 0 < NaN; 0 > NaN; 0 == NaN; 0 === NaN;

1
2
3
4
5
// 全都是false
0 < NaN;
0 > NaN;
0 == NaN;
0 === NaN;

以最后贰个表明式0 === NaN为例,在正儿八经中有分明规定():

  1. If Type(x) is Number, then
    a. If x is NaN, return false.
    b. If y is NaN, return false.
    c. If x is the same Number value as y, return true.
    d. If x is +0 and y is −0, return true.
    e. If x is −0 and y is +0, return true.
    f. Return false.

那表示任何涉及到NaN的动静都无法轻巧地应用相比运算来推断是还是不是等于。相比不利的秘诀只好是行使isNaN()

JavaScript

var a = NaN; var b = NaN;   // true console.log(isNaN(a) && isNaN(b));

1
2
3
4
5
var a = NaN;
var b = NaN;
 
// true
console.log(isNaN(a) && isNaN(b));

SVG优缺点:

优点 缺点
1.缩放无损还原,显示清晰 1.SVG在绘制的性能上比PNG要差
2.语义性良好 2.局限性,对应单色或普通渐变没什么问题,但对不规则的渐变以及特效叠加效果显示不全
3.可用CSS控制图标样式以及动画 3.兼容性稍差,android4.1才开始支持
4.减少http请求 4.学习应用成本较高

原始值和打包对象

看完NaN是或不是头都大了。好了,我们来轻便一下,看意气风发看原始值和包裹对象那大器晚成对朋友。

万意气风发你研商过'a'.trim()如此的代码的话,不明了是还是不是产生过那样的疑难:'a'显明是一个原始值(字符串),它为什么能够一贯调用.trim()艺术呢?当然,很可能您早已知晓答案:因为JS在实施那样的代码的时候会对原始值做叁次包装,让'a'成为贰个字符串对象,然后实行这么些指标的情势,实行完事后再把那一个包裹对象脱掉。能够用下边包车型大巴代码来了解:

JavaScript

// 'a'.trim(); var tmp = new String('a'); tmp.trim();

1
2
3
// 'a'.trim();
var tmp = new String('a');
tmp.trim();

这段代码只是帮忙我们掌握的。但包装对象那一个概念在JS中却是真实存在的。

JavaScript

var a = new String('a'); var b = 'b';

1
2
var a = new String('a');
var b = 'b';

a正是八个封装对象,它和b无差距于,代表一个字符串。它们都足以应用字符串的各样方法(比方trim()),也足以参加字符串运算(+号连接等)。

但他们有一个第生机勃勃的分歧:类型差别!

JavaScript

typeof a; // object typeof b; // string

1
2
typeof a; // object
typeof b; // string

在做字符串比较的时候,类型的不及会招致结果有风度翩翩部分意外:

JavaScript

var a1 = 'a'; var a2 = new String('a'); var a3 = new String('a'); a1 == a2; // true a1 == a3; // true a2 == a3; // true a1 === a2; // false a1 === a3; // false a2 === a3; // false

1
2
3
4
5
6
7
8
9
var a1 = 'a';
var a2 = new String('a');
var a3 = new String('a');
a1 == a2; // true
a1 == a3; // true
a2 == a3; // true
a1 === a2; // false
a1 === a3; // false
a2 === a3; // false

同样是意味字符串a的变量,在接纳严峻相比较时竟然不是相等的,在直觉上那是意气风发件比较难接纳的作业,在各养花费情形下,也非常轻松忽视这一个细节。

PS:SVG 为何一直不代表 iconfont?

1.PC 端 SVG 有宽容性难题,因而 PC 端仍然用 iconfont 相比较可相信。那么,与其为运动端多弄黄金年代套 SVG 方案,为啥不直接公用同后生可畏套 iconfont 库?开支难点。

2.知情 SVG Sprite 的人不多,而 iconfont 简直成为前端面试必考题了。

3.抛开包容,再不怕SVG的局限性:单色或线性渐变(从左向右笔直进行潜濡默化),径向渐变(从内到外拓宽圆形渐变)都没难点、可是不许则的渐变、就达成持续了。

4.SVG比图片麻烦、设计稿假如不优化节点、直接导出、代码量那么些惊人,然则ai导出的SVG代码、节点优化后,也不能够向来用、还得小改、总体来说SVG比图片好费用功力太多。

对象和对象

在提到相比较的时候,还有只怕会遇上对象。具体来讲,差相当的少能够分成三种情景:纯对象、实例对象、别的连串的靶子。

纯对象

纯对象(plain object)具体指什么并不是特别分明,为削减不须要的周旋,下文中运用纯对象指代由字面量生成的、成员中不含函数和日期、正则表明式等项目标目的。

如若直白拿五个目的开展相比,不管是==还是===,无可争辩都以不等于的。但是在骨子里运用时,那样的平整是或不是必然知足大家的急需?举个例证,大家的使用中有七个布局项:

JavaScript

// 原本有多个特性 // var prop1 = 1; // var prop2 = 2; // 重构代码时八个属性被停放同二个对象中 var config = { prop1: 1, prop2: 2 };

1
2
3
4
5
6
7
8
// 原来有两个属性
// var prop1 = 1;
// var prop2 = 2;
// 重构代码时两个属性被放到同一个对象中
var config = {
    prop1: 1,
    prop2: 2
};

假使在好几场景下,大家必要相比五回运维的布署项是还是不是同样。在重构前,大家分别相比三遍运维的prop1prop2就可以。而在重构后,大家恐怕需求相比config指标所代表的布局项是还是不是后生可畏致。在如此的气象下,直接用==或者===来相比较对象,获得的并非我们希望的结果。

在此样的景观下,我们大概要求自定义一些艺术来拍卖对象的可比。常见的或是是经过JSON.stringify()对指标举办系列化之后再比较字符串,当然这么些进程不要全盘可信赖,只是叁个思路。

若是你感到那一个情景是杜撰的话,能够再回看一下断言库,同样是依据对象成员,决断结果是还是不是和预期相符。

实例对象

实例对象首要指通过构造函数(类)生成的靶子。那样的靶子和纯对象同样,直接相比都以不一致的,但也会碰着供给判断是或不是是同风度翩翩对象的意况。常常来说,因为这种对象有比较复杂的内部结构(以至有意气风发部分数量在原型上),不可能直接从表面比较是不是等于。比较可靠的推断格局是由构造函数(类)来提供静态方法或然实例方法来判别是或不是等于。

JavaScript

var a = Klass(); var b = Klass(); Klass.isEqual(a, b);

1
2
3
var a = Klass();
var b = Klass();
Klass.isEqual(a, b);

别的对象

其他对象主要指数组、日期、正则表明式等那类在Object基础上派生出来的目的。那类对象各自有各自的特殊性,平日须求基于气象来组织判断情势,决定七个指标是还是不是等于。

比如,日期对象,可能须求经过Date.prototype.getTime()措施赢得时间戳来判别是还是不是意味欣欣向荣致时刻。正则表明式可能须求通过toString()办法赢得到原始字面量来剖断是还是不是是同样的正则表明式。

Web应用中SVG的采取情势

==和===

在有些稿子中,看见某部分数组去重的方法,在认清成分是还是不是等于时,使用的是==正如运算符。颇负盛名,那一个运算符在相比较前会先查看成分类型,当类型不相同等时会做隐式类型转变。那其实是如日方升种特别不步步为营的做法。因为无法区分在做隐匿类型转变后值一样的因素,举例0''falsenullundefined等。

况且,还或者有希望出现部分只可以黄种人问号的结果,比方:

JavaScript

[] == ![]; //true

1
[] == ![]; //true

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:也谈JavaScript数组去重,拥抱Web设计新趋势

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文