不要讓Javascript的等價表格看上去那麼難看

ourjs發表於2014-04-14
JavaScript

　　2014年3月

　　時不時的會有人貼出一張表格，用來展現javascript的 '==' 比較出來的結果。像最近的這個例子，看看這張表格有多麼的無序。

　　這些文章基本上都是對的，他們指出 '==' 設計的很糟糕。但是他們通過表格的組織順序讓的結果看上去更糟。比如，這是之前的一張表格。

　　多麼的亂呀！但是這種混亂是因為表格裡值的順序。

　　通過恰當的分組，你會得到一個看上去更合理的表格:

　　這個看上去好多了。現在你看到了一些更合格的東西，很好地表格出了引用相等和價值相等，你可以很好地瞭解地哪些東西是等價的，哪些傳值操作是危險的。

　　這張表反應出了'=='的缺陷，而不是掩蓋圖本身的缺陷。

　　程式碼

　　下面是我用來組織圖表的程式碼。這個也可以在 js fiddle上面找到。

　　html

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

　　Javascript:

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 的表格

　　比較操作符的真值表格看起來像個三角形，當排列合適的順序，就會像一個樓梯，

相關文章