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

zhangxiangliang 发布于2019-08-19 14:48 / 2959人阅读

摘要：年月时不时的会有人贴出一张表格，用来展现的比较出来的结果。像最近的这个例子，看看这张表格有多么的无序。但是他们通过表格的组织顺序让的结果看上去更糟。比如，这是之前的一张表格。通过恰当的分组，你会得到一个看上去更合理的表格这个看上去好多了。

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

海外云主机服务器托管 html让表格居中 html让表格不居中为什么国外的vps那么便宜 webrtc的源码为什么那么大

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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