JavaScript Equals Table

最新推荐文章于 2024-04-25 09:20:35 发布

peibolinux

最新推荐文章于 2024-04-25 09:20:35 发布

阅读量1.3k

点赞数

分类专栏： Java 文章标签： Java web

本文链接：https://blog.youkuaiyun.com/peibolinux/article/details/40108079

版权

Java 专栏收录该内容

15 篇文章

订阅专栏

使用Javascript时，我们总是强调使用 === （严格的）而不是 == （松散的，不严谨的），但是大家还是习惯性的使用==，总是到犯了错误，才意识到问题的严重性，刚好有位同行，为我们制作了JavaScript Equals Table，让我们直观的意识到 == 多危险啊！

使用 ==

使用 ===

代码:

//在cmp方法中替换 == 或 ===
var cmp = function(v1, v2) { return v1 == v2; };
var vals = [
    ["-Infinity", function() { return -Infinity; }],
    ["-1", function() { return -1; }],
    ['"-1"', function() { return "-1"; }],
    ['""', function() { return ""; }],
    ["[[]]", function() { return [[]]; }], 
    ["[]", function() { return []; }], 
    ["false", function() { return false; }], 
    ["0", function() { return 0; }],
    ["null", function() { return null; }],
    ['"0"', function() { return "0"; }], 
    ["[0]", function() { return [0]; }], 
    ["[1]", function() { return [1]; }],
    ['"1"', function() { return "1"; }],
    ["1",function() { return  1; }],
    ["true", function() { return true; }],
    ["Infinity", function() { return Infinity; }],
    ["{}", function() { return {}; }], 
    ['"false"', function() { return "false"; }],
    ['"true"', function() { return "true"; }],
    ["undefined", function() { return undefined; }],
    ["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();

修改代码将两幅图结合:

                            //              var cmp = function(v1, v2) {  if(v1 === v2){ return 0;  } else if(v1 == v2){ return 1; } else { return 2;  } 0)">}; ">var vals = [ ["-Infinity", function() { return -Infinity; }], ["-1", function() { return -1; }], ['"-1"', function() { return "-1"; }], ['""', function() { return ""; }], ["[[]]", function() { return [[]]; }],  ["[]", function() { return []; }],  ["false", function() { return false; }],  ["0", function() { return 0; }], ["null", function() { return null; }], ['"0"', function() { return "0"; }],  ["[0]", function() { return [0]; }],  ["[1]", function() { return [1]; }], ['"1"', function() { return "1"; }], ["1",function() { return  1; }], ["true", function() { return true; }], ["Infinity", function() { return Infinity; }], ["{}", function() { return {}; }],  ['"false"', function() { return "false"; }], ['"true"', function() { return "true"; }], ["undefined", function() { return undefined; }], ["NaN", function() { return NaN; }] 0)">]; ">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); if(eq === 0) { ctx.fillStyle = "green"; } else if( eq === 1){ ctx.fillStyle = "orange"; } else { ctx.fillStyle = "white"; }     ctx.fillRect(p+i*r,p+j*r,r,r); } 0)">}

参考资料:
http://strilanc.com/visualization/2014/03/27/Better-JS-Equality-Table.html

补充:
more better table
http://dorey.github.io/JavaScript-Equality-Table/