JavaScript碎碎念

一，True and False表达式

?

以下都是false表达式

 null
 undefined
 '' the empty string
 0 the number

?

以下都是true表达式

'0' the string
[] the empty array
{} the empty object

??

因此，

?

while (x != null) {

?

简写成

?

while (x) {

?

?

if (y != null && y != '') {

?

简写成

?

if(y)

?

特别小心以下的陷阱

* Boolean('0') == true
  '0' != true
* 0 != null
  0 == []
  0 == false
* Boolean(null) == false
  null != true
  null != false
* Boolean(undefined) == false
  undefined != true
  undefined != false
* Boolean([]) == true
  [] != true
  [] == false
* Boolean({}) == true
  {} != true
  {} != false

二、条件语句和(三元)"? :"运算符

如下

if (val != 0) {
  return foo();
} else {
  return bar();
}

??

简写成

return val ? foo() : bar();

?

?

三元运算符当然还可以用来生成html

var html = '<input type="checkbox"' +
    (isChecked ? ' checked' : '') +
    (isEnabled ? '' : ' disabled') +
    ' name="foo">';

三、&& and ||

"||" 也被认为用来设置默认值(default)

/** @param {*=} opt_win */
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

?

简写成

/** @param {*=} opt_win */
function foo(opt_win) {
  var win = opt_win || window;
  // ...
}

?

"&&" 如下，

if (node) {
  if (node.kids) {
    if (node.kids[index]) {
      foo(node.kids[index]);
    }
  }
}

?

简写成

if (node && node.kids && node.kids[index]) {
  foo(node.kids[index]);
}

?

或者

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}

?

甚至

node && node.kids && node.kids[index] && foo(node.kids[index]);

??

四，使用join构建字符串

?

function listHtml(items) {
  var html = '<div class="foo">';
  for (var i = 0; i < items.length; ++i) {
    if (i > 0) {
      html += ', ';
    }
    html += itemHtml(items[i]);
  }
  html += '</div>';
  return html;
}

?

这在IE中会非常慢，改写如下

function listHtml(items) {
  var html = [];
  for (var i = 0; i < items.length; ++i) {
    html[i] = itemHtml(items[i]);
  }
  return '<div class="foo">' + html.join(', ') + '</div>';
}

?

可以使用数组充当stringbuilder，转换时使用join。需注意的是使用html[i]赋值比html.push更快，你试试。

?

五，遍历/迭代NodeList

?

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

?

这样更好

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
  doSomething(paragraph);
}

?

当然遍历子节点时也可以使用firstChild和 nextSibling属性

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

?

?