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

zhangxiangliang 發布于2019-08-19 14:48 / 3079人閱讀

摘要：年月時不時的會有人貼出一張表格，用來展現的比較出來的結果。像最近的這個例子，看看這張表格有多么的無序。但是他們通過表格的組織順序讓的結果看上去更糟。比如，這是之前的一張表格。通過恰當的分組，你會得到一個看上去更合理的表格這個看上去好多了。

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][3]();
    for (var j = 0; j < n; j++) {
        var v2 = vals[j][4]();
        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 的表格

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

原文地址：http://ourjs.com/detail/534b6a362682f7d20b000004

云服務器 GPU云服務器 html讓表格居中 html讓表格不居中為什么國外的vps那么便宜 webrtc的源碼為什么那么大

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78121.html

29.22分鐘學會書寫正則

摘要：而在下，僅僅是喜歡這個數字，如是而已正則表達式正則表達式，又稱規則表達式。對象在爪洼死苦瑞特中，對象表示正則表達式，它是對字符串執行模式匹配的強大工具。序列匹配，而則匹配。否則，將視為一個原義的字符。注意正則表達式會匹配全角空格符。寫在最前面看到標題你可能會疑惑為什么不是30分鐘？因為我這個文章圖文并茂，非常恐怖，兄弟，其實你不用30分鐘就可以看懂。你可能會以為我在吹牛B，但是當你...

qujian 2019-08-23 13:00 評論0 收藏0
響應式網站開發基礎

摘要：搭建添加媒體查詢標簽添加標簽嵌入標簽嵌入因為性能的原因，應該避免使用間斷點的選取彈性常見響應模式序號模式圖解大體流動模型掉落列模型活動布局模型畫布溢出模型有時一個網頁同時結合幾種模式，例如掉落列和畫布溢出模型。準備工作遠程調試 chrome 瀏覽器設置在 chrome 瀏覽器中打開 chrome://inspect 手機設置打開開發者模式打開 USB 調試模式打開...

fish 2019-08-29 12:19 評論0 收藏0
響應式網站開發基礎

摘要：搭建添加媒體查詢標簽添加標簽嵌入標簽嵌入因為性能的原因，應該避免使用間斷點的選取彈性常見響應模式序號模式圖解大體流動模型掉落列模型活動布局模型畫布溢出模型有時一個網頁同時結合幾種模式，例如掉落列和畫布溢出模型。準備工作遠程調試 chrome 瀏覽器設置在 chrome 瀏覽器中打開 chrome://inspect 手機設置打開開發者模式打開 USB 調試模式打開...

tuomao 2019-08-01 16:36 評論0 收藏0
【轉】什么是JavaScript

摘要：運行代碼以響應在網頁中發生的特定事件。以及更多然而更令人興奮的是建立在語言的核心之上的功能。這就是為什么谷歌地圖可以找到你的位置，而且標示在地圖上。谷歌地圖允許你去嵌入定制的地圖到你的網站，和其他的功能。轉自mdn學習網站-什么是JavaScript 什么是JavaScript？歡迎來到 MDN JavaScript 初學者的課程！在第一篇文章中，我們將會站在一定的高度來俯看 JavaS...

rockswang 2019-04-23 13:39 評論0 收藏0
你真的了解javascript嗎？（一）

摘要：表示要解析的數字的基數。回調函數接收四個參數，依次是通過上一次調用回調函數獲得的值。如果向方法提供，則在首次調用函數時，為。當前數組元素的值。原題出處：JavaScript Puzzlers!當初以為不過是一些小題目，結果做到懷疑人生，都要懷疑可能我javascript白學了。讀者可以去試試。不多說，直接上題：第一題 [1, 2, 3].map(parseInt) 不要被套路，這...

whatsns 2019-08-21 15:26 評論0 收藏0