两行 JavaScript 代码

最近看到了两行 JavaScript 代码，很受启发。

1. 封装 DOM 属性

在 JavaScript 中，我们可以获取HTML元素的属性值，例如 element.id 。但是，因为 for 和 class 是 JavaScript 中的关键字，所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替，于是在封装的时候需要先对这两个属性进行特殊判断。通常，我们会这么写：

function getAttr(el, attrName){
var attr;
if ('for' == attrName) {
attr = 'htmlFor';
} else if ('class' == attrName) {
attr = 'className';
} else {
attr = attrName;
}
}

但是我在精通 JavaScript 发现了一种很妙的写法， John Resig 是这么写的：

function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
}

构建了一个对象来做判断，实在是巧妙！这样一来节省了很多代码，也就减少了BUG出现的可能性，而且也没有丧失其可读性，是很值得学习的。

2. 交换两个变量的值

这个问题相信学过一点编程的人都知道，一般来说我们会这么写：

var foo = 1;
var bar = 2;
 
var temp = foo;
foo = bar;
bar = temp;

通过一个临时变量来做数据的缓冲，很直观。但是否可以不使用临时变量呢？看一下下面的这行代码：

foo = [bar, bar=foo][0];

没有使用到临时变量，而是利用了数组。实在是妙！

上面这两行代码看上去很简单，不像一些诸如高级算法之类的代码那么显眼，但是，如果不是对语言本身非常了解，如果没有多年的编程经验和思考，如果对数据结构不熟悉，绝对不可能写出这样的代码。或许这种对每一行代码的深思熟虑，正是大师和平庸程序员之间的区别所在。

另外，这也从侧面说明了：编程的时候不要忘记思考，否则你就只是一个完成工作的机器。所以，如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间，别犹豫，换一个。

UPDATE:
首先感谢大家的热烈讨论。看了大家的讨论之后，我觉得要做一个说明。

这篇日志里面举的第二个例子和第一个例子放在一起确实有欠妥当，因为第二个例子只是一个“妙”字，在可读性方面确实没什么可取之处，只考虑这一方面，这种代码就不推荐在工作中写。

关于效率问题，使用临时变量和构建一个临时数组都是分配一块内存把数据放进去，它们之间的效率差别就是在构建数组的过程，而构建数组的效率是因浏览器引擎而异的，比如说在很多浏览器下面，数组声明使用 var a = [] 要比 var a = new Array 效率高，在有些浏览器下差别就不大，但可以肯定的是，构建数组肯定比单值变量耗时，效率方面这行代码也不行。虽然 jay.li 同学说的很对，“测试结果受浏览器类型和硬件影响，衡量操作速度的硬指标是‘算法时间复杂度’和‘空间复杂度’”，不过在实际工作中来说，尽管可能两种写法的复杂度都是 O(1)，但是 1s 和 1000s 的差别我们还是要计较的。

关于 Y.Boy 同学所说的变量声明周期问题，既然你说“函数体内的局部变量在函数执行完后，就会被销毁”，那么为什么下面这段代码可以工作呢：

function example(arg1){
  var localVar = 2;
  return function inner(arg2){
    return arg1+localVar + arg2;
  }
}
 
var result = example(3);
var sum = result(4); // sum = 9;

最后，多谢 jay.li 同学提醒有关堆栈、scopChain这些概念，我要好好补习一下基础了。

相关日志

• 一种 DOCTYPE 的缩写 (6)
• JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] ) (1)
• YUI 还是 jQuery? (13)
• Google 发布 Closure Linter (2)
• [Mac OS X]在终端中打开文件夹窗口 (6)