昨天不小心看到了Google Javascript Style Guide,Google在里面约定了一些名字的书写规则,也给出一些更好的建议。 下面我翻译一段个人认为很有价值的东西:
布尔表达式
以下代码在布尔表达式里都等于false:
-
null
-
undefined
-
''
空字符串 -
0
数字
但是请注意,以下这些等于true:
-
'0'
字符串 -
[]
空的数组 -
{}
空的对象
这就意味着本来这样的代码:
while (x != null) {
你可以这样来写(当你不希望x为0、空字符串、false时):
while (x) {
当你希望检查一个字符串是否为空的时候你可以这样:
if (y != null && y != '') {
但是这样会更简洁更高效:
if (y) {
注意: 有很多容易搞错的布尔表达式(以下表达式的值都为true):
-
Boolean('0') == true
/* Longbill注释:
'0' != true
* if ('0') alert('yes');
* if ('0' != true) alert('yes');
* if ('0' == false) alert('yes');
* 以上三个都会弹出yes!!
*/ -
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 -
Longbill 补充下:
NaN != true
NaN != false
Boolean(NaN) == 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">';
&& 和 ||
由这两个逻辑运算符连接的表达式会从左到右依次执行,直到遇到满足条件为止。
所以"||" 又被称作 '缺省值' 操作符,因为如下代码:
/** @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>';
}
注意:指定数组的下标来赋值会比直接用数组的push()方法更高效。
遍历Node List
在遍历Node list 的时候,常常会用到length属性来当循环的边界条件。因为循环的时间复杂度是O(n),而每循环一次,都要检查一下边界条件(length属性),这样时间复杂度变为O(n^2):
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
doSomething(paragraphs[i]);
}
这样做会更高效(时间复杂度应该是O(n) ):
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
doSomething(paragraph);
}
以上这个方法同样适用于对象和数组(当数组不含有会被当成是false的值的时候)。
/* 原文出自:Google,翻译: Longbill (http://php.js.cn) 2010-10-19 */
另外,当你遍历一个Node的所有子Node的时候,可以用firstNode和nextSibling属性,就像这样:
var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
doSomething(child);
}
8367 read 6 comment(s)
邮件:*
网站:
内容: