爱淘FE

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

1,907

JavaScript中的==,===和< 运算符

=====

js中的 == 和 ===应该说是最容易让人在初期产生迷惑的,正好看到几个国外网站对此进行了总结,之一是在github上,实现上用的是table,排版上看起来实在是乱
Craig Gidney看不下去了,用canvas实现了一遍,原理也很简单。考虑到翻墙的因素,这里进行搬运并整理。

实现

<canvas id="drawCanvas" width="500" height="500" />
var cmp = function(v1, v2) { return v1 == v2; };
var vals = [
    ["false", function() { return false; }], 
    ["0", function() { return 0; }],
    [&#039;""&#039;, function() { return ""; }],
    ["[[]]", function() { return [[]]; }], 
    ["[]", function() { return []; }], 
    [&#039;"0"&#039;, function() { return "0"; }], 
    ["[0]", function() { return [0]; }], 
    ["[1]", function() { return [1]; }],
    [&#039;"1"&#039;, function() { return "1"; }],
    ["1",function() { return  1; }],
    ["true", function() { return true; }],
    ["-1", function() { return -1; }],
    [&#039;"-1"&#039;, function() { return "-1"; }],
    ["null", function() { return null; }],
    ["undefined", function() { return undefined; }],
    ["Infinity", function() { return Infinity; }],
    ["-Infinity", function() { return -Infinity; }],
    [&#039;"false"&#039;, function() { return "false"; }],
    [&#039;"true"&#039;, 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][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();

得到的结果如下

< 的结果整理

其实 == 和 === 只要理解了原理和少量特例,还是容易理解的。但 x < y (或>) 运算符则不同,他会先根据x和y的类型进行转换,转成可对比的值后再进行比较。

实现方式和上文类似,这里不再贴出,可以去jsfiddle把玩,下面直接展示x<y在大部分情况的结果:

本文有评论 2 条

  1. good.

    sina@miss渣渣子 2014/05/06 1:17 下午 回复
  2. disqus’ comment ,looks good

    sina@miss渣渣子 2014/05/06 1:18 下午 回复

发表评论


back up ↑