OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

不要让 Javascript 的等价表格看上去那么难看


分享到
分类 我要吐嘈   发布 ourjs  1397451318224
注意 转载须保留原文链接,译文链接,作者译者等信息。  
2014年3月

时不时的会有人贴出一张表格,用来展现javascript的 '==' 比较出来的结果。像最近的这个例子,看看这张表格有多么的无序。

这些文章基本上都是对的,他们指出 '==' 设计的很糟糕。但是他们通过表格的组织顺序让的结果看上去更糟。比如,这是之前的一张表格。



多么的乱呀!但是这种混乱是因为表格里值的顺序。

通过恰当的分组,你会得到一个看上去更合理的表格:



这个看上去好多了。现在你看到了一些更合格的东西,很好地表格出了引用相等和价值相等,你可以很好地了解地哪些东西是等价的,哪些传值操作是危险的。

这张表反应出了'=='的缺陷,而不是掩盖图本身的缺陷。

代码


下面是我用来组织图表的代码。这个也可以在 js fiddle上面找到。  

html

<canvas id="drawCanvas" width="500" height="500" />

Javascript:

var cmp = function(v1, v2) { return v1 == v2; };
var vals = [
    ["false", function() { return false; }], 
    ["0", function() { return 0; }],
    ['""', function() { return ""; }],
    ["[[]]", function() { return [[]]; }], 
    ["[]", function() { return []; }], 
    ['"0"', function() { return "0"; }], 
    ["[0]", function() { return [0]; }], 
    ["[1]", function() { return [1]; }],
    ['"1"', function() { return "1"; }],
    ["1",function() { return  1; }],
    ["true", function() { return true; }],
    ["-1", function() { return -1; }],
    ['"-1"', function() { return "-1"; }],
    ["null", function() { return null; }],
    ["undefined", function() { return undefined; }],
    ["Infinity", function() { return Infinity; }],
    ["-Infinity", function() { return -Infinity; }],
    ['"false"', function() { return "false"; }],
    ['"true"', function() { return "true"; }],
    ["{}", function() { return {}; }], 
    ["NaN", function() { return NaN; }]
];
var canvas = document.getElementById("drawCanvas");
var ctx = canvas.getContext("2d");
var n = vals.length;
var r = 20; // diameter of grid squares
var p = 60; // padding space for labels
// color grid cells
for (var i = 0; i < n; i++) {
    var v1 = vals[i][1]();
    for (var j = 0; j < n; j++) {
        var v2 = vals[j][1]();
        var eq = cmp(v1, v2);
        ctx.fillStyle = eq ? "orange" : "white";
        ctx.fillRect(p+i*r,p+j*r,r,r);
    }
}
// draw labels
ctx.fillStyle = "black";
var f = 12;
ctx.font = f + "px Helvetica";
for (var i = 0; i < n; i++) {
    var s = vals[i][0];
    var w = ctx.measureText(s).width;
    ctx.save();
    ctx.translate(p+i*r+r/2-f*0.4,p-w-2);
    ctx.rotate(3.14159/2);
    ctx.fillText(s, 0, 0);
    ctx.restore();
}
for (var i = 0; i < n; i++) {
    var s = vals[i][0];
    var w = ctx.measureText(s).width;
    ctx.fillText(s, p-w-2, p+i*r+r/2+f*0.4);
}
// draw grid lines
ctx.beginPath();
ctx.strokeStyle = "black";
for (var i = 0; i <= n; i++) {
    ctx.moveTo(p+r*i, p);
    ctx.lineTo(p+r*i, p+r*n);
    ctx.moveTo(p, p+r*i);
    ctx.lineTo(p+r*n, p+r*i);
}
ctx.stroke();

摘要


JavaScript的 == 操作符是一种松散的比较,绝对有理由使用 === 来代替,但是它又不像上面的表格看起来的那么差.

更新


让 < 操作符看起来合理是比较难的, (js fiddle代码)
  
JS less-than 的表格



比较操作符的真值表格看起来像个三角形,当排列合适的顺序,就会像一个楼梯,

原文地址: 点此
社区评论 ( Beta版 )
  • #0 redstone 1398042611000
    既然==设计的不合理,那我们就完全不用去用它,既然不用它,那还记那么多蛋疼的规则干嘛呢?
  • #1 ancient_violet 1408490054448

    == JS 是给实践派设计的,有很多比较实用的设计。

    比如判断一个String是否不为空,undefined,null只需要:

    if (!str) {
      //ok
    }
    

    但是如果JS强类型判断的语言,你就得像这样

    if (str !== undefined && str != null && str != '') {
      //ok
    }
    

    这完全是学院派的做法。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NODE.JS为什么会成为企业中的首选技术
  2. 快乐Node程序员的10个习惯
  3. 我为什么不从NodeJS切换到Go
  4. 用纯CSS实现的箭头
  5. 在JavaScript里写类层次结构?别那么做!
  6. 静态web的回归
  7. HTML和CSS是什么玩意儿?
  8. 为什么优秀的管理者如此罕见
  9. 一系列JavaScript的基础工具
  10. 没必要害怕Angular.Js
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 我要吐嘈
  1. 关于 Internals 的闲话[php]
  2. 总结程序员各种致命土鳖穿着
  3. 别老扯什么Hadoop了,你的数据根本不够大
  4. 真的没必要浪费心思在 Go 语言上
  5. 亲爱的项目经理,我恨你
  6. 如此架构,泛滥架构,疯狂架构
  7. 我快成为了我一直讨厌的那种人
  8. 对于现代开发来说,JavaScript就是一种垃圾语言
  9. 前Google员工们的吐槽:在Google打工所能遇到的最坏事
  10. 前狼厂悲催码农的呐喊!

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号