JavaScript 实用技巧：布尔值、三元运算符与性能优化

本文整理并分享了JavaScript开发中的一些实用技巧，旨在为开发者提供参考。

正确理解布尔表达式中的 False 值

一、正确理解布尔表达式中的 False 值

在JavaScript中，以下类型的值在布尔上下文中会被转换为 false：

null undefined ''（空字符串） 0（数字零）

然而，以下值虽然看似为空，但在布尔表达式中却返回 true：

'0'（字符串形式的零） []（空数组） {}（空对象）

下面这段代码存在逻辑隐患：

while (x != null) {

如果确定变量 x 不会取值为 0、空字符串或 false，可以直接简化为：

while (x) {

若需明确检查字符串是否为 null 或空，可编写如下代码：

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

但更简洁的写法是：

if (y) {

需要注意，JavaScript 中存在许多容易混淆的比较行为，例如：

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 = '';

利用 && 和 || 进行短路求值

三、利用 && 和 || 进行短路求值

二元布尔操作符具有短路特性，即仅在必要时才会计算最后一项。

"||" 常被称为 'default'（默认值）操作符，例如：

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

你可以使用它来简化上述代码：

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]);

通常建议采用以下更清晰的方式：

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

但在 IE 浏览器中这种写法性能较差，可以改用以下方式：

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

此外，还可以利用数组作为字符串构造器，最后通过 myArray.join('') 转换为字符串。不过，由于赋值操作的速度快于数组的 push() 方法，因此建议优先使用赋值操作。

使用 join() 来创建字符串

四、使用 join() 来创建字符串

NodeList 遍历的性能优化

NodeList 是通过给节点迭代器添加过滤器实现的。这意味着获取其属性（如 length）的时间复杂度为 O(n)，而通过 length 遍历整个列表则需要 O(n^2) 的时间复杂度。

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

因此，更好的做法是：

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

这种方法适用于所有的 collections 和数组（只要数组不包含 falsy 值）。

在上述示例中，也可以通过 firstChild 和 nextSibling 属性来遍历子节点。

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

希望本文所述的技巧能对大家的 JavaScript 程序设计有所帮助。