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

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

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

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

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

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

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

　　代码

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

　　html

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

　　Javascript:

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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

var cmp = function (v1, v2) { return v1 == v2; }; var vals = [ &nbsp; &nbsp; [ "false" , function () { return false ; }],&nbsp; &nbsp; &nbsp; [ "0" , function () { return 0; }], &nbsp; &nbsp; [ '""' , function () { return "" ; }], &nbsp; &nbsp; [ "[[]]" , function () { return [[]]; }],&nbsp; &nbsp; &nbsp; [ "[]" , function () { return []; }],&nbsp; &nbsp; &nbsp; [ '"0"' , function () { return "0" ; }],&nbsp; &nbsp; &nbsp; [ "[0]" , function () { return [0]; }],&nbsp; &nbsp; &nbsp; [ "[1]" , function () { return [1]; }], &nbsp; &nbsp; [ '"1"' , function () { return "1" ; }], &nbsp; &nbsp; [ "1" , function () { return &nbsp;1; }], &nbsp; &nbsp; [ "true" , function () { return true ; }], &nbsp; &nbsp; [ "-1" , function () { return -1; }], &nbsp; &nbsp; [ '"-1"' , function () { return "-1" ; }], &nbsp; &nbsp; [ "null" , function () { return null ; }], &nbsp; &nbsp; [ "undefined" , function () { return undefined; }], &nbsp; &nbsp; [ "Infinity" , function () { return Infinity; }], &nbsp; &nbsp; [ "-Infinity" , function () { return -Infinity; }], &nbsp; &nbsp; [ '"false"' , function () { return "false" ; }], &nbsp; &nbsp; [ '"true"' , function () { return "true" ; }], &nbsp; &nbsp; [ "{}" , function () { return {}; }],&nbsp; &nbsp; &nbsp; [ "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++) { &nbsp; &nbsp; var v1 = vals[i][1](); &nbsp; &nbsp; for ( var j = 0; j < n; j++) { &nbsp; &nbsp; &nbsp; &nbsp; var v2 = vals[j][1](); &nbsp; &nbsp; &nbsp; &nbsp; var eq = cmp(v1, v2); &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = eq ? "orange" : "white" ; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillRect(p+i*r,p+j*r,r,r); &nbsp; &nbsp; } } // draw labels ctx.fillStyle = "black" ; var f = 12; ctx.font = f + "px Helvetica" ; for ( var i = 0; i < n; i++) { &nbsp; &nbsp; var s = vals[i][0]; &nbsp; &nbsp; var w = ctx.measureText(s).width; &nbsp; &nbsp; ctx.save(); &nbsp; &nbsp; ctx.translate(p+i*r+r/2-f*0.4,p-w-2); &nbsp; &nbsp; ctx.rotate(3.14159/2); &nbsp; &nbsp; ctx.fillText(s, 0, 0); &nbsp; &nbsp; ctx.restore(); } for ( var i = 0; i < n; i++) { &nbsp; &nbsp; var s = vals[i][0]; &nbsp; &nbsp; var w = ctx.measureText(s).width; &nbsp; &nbsp; 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++) { &nbsp; &nbsp; ctx.moveTo(p+r*i, p); &nbsp; &nbsp; ctx.lineTo(p+r*i, p+r*n); &nbsp; &nbsp; ctx.moveTo(p, p+r*i); &nbsp; &nbsp; ctx.lineTo(p+r*n, p+r*i); } ctx.stroke();

　　摘要

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

　　更新

　　让 < 操作符看起来合理是比较难的,　(js fiddle代码)

　　JS less-than 的表格

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

转载于:https://www.cnblogs.com/ranzige/p/3673305.html