ECMAScript 逻辑运算符AND(&&)

2009-03-03 15:51:00

先看下面这段代码,注释有运行结果。

var t = true;
var f = false;
var i = 1;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

alert("i&&s: " + (i && s)); //"hello"
alert("i&&a: " + (i && a)); //1,10,100

alert("s&&i: " + (s && i)); //1
alert("a&&i: " + (a && i)); //1

再看来自w3school的一段文字:

如果某个运算数不是原始的 Boolean 型值,逻辑 AND 运算并不一定返回 Boolean 值:

  • 如果一个运算数是对象,另一个是 Boolean 值,返回该对象。
  • 如果两个运算数都是对象,返回第二个对象。
  • 如果某个运算数是 null,返回 null。
  • 如果某个运算数是 NaN,返回 NaN。
  • 如果某个运算数是 undefined,发生错误。

第一条:如果一个运算数是对象,另一个是 Boolean 值,返回该对象。如果这种说法成立,那么先前测试中的以下代码都应输出i。

alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

但实际并非如此。再看规则第二条:如果两个运算数都是对象,返回第二个对象。对先前的测试代码稍作修改,把0赋值给i:

var t = true;
var f = false;
var i = 0;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //0
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //0
alert("i&&f: " + (i && f)); //0

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //0
alert("a&&i: " + (a && i)); //0

i与另外一个不是boolean类型的值的AND运算都返回了i,并不是规则中所说的第二个对象。

再看如下代码,将字符串s赋值成空字符串,将数组a也赋值为空数组:

var i = 0;
var s = "";
var a = [];

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //""
alert("a&&i: " + (a && i)); //0

于是,我的结论是:逻辑运算符AND(&&) 不论两个值的类型是什么,如果运算结果为true,那么返回第二个运算数;如果运算结果为false,那么返回第一个布尔值为false的运算数。

若对运算符测试中的最后一句a&&的测试结果有所不解的看看这里(关于布尔运算):

1.当类型为object的运算数值为空时,在对运算数进行比较运算(==)时,该运算数会被视为false,但是该运算数的布尔值却是true。举例如下:

alert([]==false); //true
if([]) alert("ok"); //ok

2.当类型为string或其他的运算数值为空时,在对运算数进行比较运算(==)时,该运算数也会被视为false,且该运算数的布尔值也是false。举例如下:

var s="";
alert(s==false); //true
if(s) alert("ok"); //不输出

按钮完美显示解决方案

2008-12-20 01:38:21

页面中任何一个元素以最好的形式呈现出来是Web前端开发人员最大的愿望,即使一个小按钮(input,button)也不能放过。

折腾了许久,分享一下,先看看左侧input的模型,按钮边框宽度2px(按钮边框宽度与win主题有莫大的关系,经典主题下FF3.0.5解析为2px),内间距为0。

input_model

按钮中文本的垂直居中:

默认情况下,在IE6/7下,按钮中的文本居中的不是很精确,需要调整,而在IE8 Beta2下,按钮中的文字位置貌似是固定不变的。

经过反复测试,发现对按钮设置适当的行高值就可以解决, 其中行高值等于按钮高度值减去4,即 line-height = height – 4

按钮中文本的两侧的宽度:

IE下,如果不指定按钮的宽度,大家会发现按钮内文本两侧的空白随着文本内容的增加而不断增加,这个Bug已有前辈给出解决方法,即加上{overflow:visible}属性但是当加上这个属性之后,在IE6下,前面我们使用的垂直居中的方法就不行了。经过反复测试,得出的结果依然不很是令人满意,用到了cssHack,而且IE6下还有1像素的差别 (期待大家一起来完善) 解决方法依然是设置line-height属性,在IE6/8下, line-height = height – 8 ,对IE7 单独设置 line-height = hegiht – 4 (只针对IE7  *+html input {line-height:npx ;})

查看Demo