不要让Javascript的等价表格看上去那么难看-白红宇

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

阅读量：6590 次

发布时间：2019-06-24

本文共 3436 字，大约阅读时间需要 11 分钟。

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

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

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

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

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

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

　　代码

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

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

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

转载地址：http://kqzio.baihongyu.com/

你可能感兴趣的文章