JavaScript 编程风格

1. 前言

所谓"编程风格"（programming style），指的是编写代码的样式规则。 不同的程序员，往往有不同的编程风格。

有人说，编译器的规范叫做"语法规则"（grammar），这是程序员必须遵守的；而编译器忽略的部分，就叫"编程风格"（programming style），这是程序员可以自由选择的。这种说法不完全正确，程序员固然可以自由选择编程风格，但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。

所以，有一点应该明确， "编程风格"的选择不应该基于个人爱好、熟悉程度、打字工作量等因素，而要考虑如何尽量使代码清晰易读、减少出错。你选择的，不是你喜欢的风格，而是一种能够清晰表达你的意图的风格。这一点，对于Javascript这种语法自由度很高、设计不完全成熟的语言尤其重要。

2. 编程风格

2.1. 大括号的位置

绝大多数的编程语言，都用大括号表示区块。开头的大括号的位置，有许多不同的写法。

最流行的有两种，一种是开头的大括号另起一行：

js 复制代码

block
{
    ...
}

另外一种则是大括号跟在关键字的后面：

js 复制代码

block {
    ...
}

一般来说，这两种写法都能接受。但是，JavaScript 要使用后面的一种，因为 JavaScript 会自动添加句末的分号，导致一些难以察觉的错误。

js 复制代码

return 
{
    key: value,
}

上面的代码的原意，是要返回一个对象，但实际上返回的是 undefined，因为 Javascript 自动在 return 语句后面添加了分号。为了避免这一类错误，需要写成下面这样：

js 复制代码

return {
    key: value,
}

2.2. 圆括号

圆括号在 Javascript 中有两种作用，一种表示调用函数，另一种表示不同的值的组合。我们可以用空格，区分这两种不同的括号。

1）函数名与左括号之间没有空格。 2）函数名与参数列表之间没有空格。 3）任何符号与左括号之间都应该有一个空格。

不符合规范的写法：

js 复制代码

fn (1); // 应写成 fn(1);

return(1 + 2); // 应写成 return (1 + 2);

if(a === 0) {} // 应写成 if (a === 0) {}

function fn (param) {} // 应写成 function fn(param) {}

function(param) {} // 应写成 function (param) {}

2.3. 分号

在编程语言中，分号通常用来表示语句的结束。如果省略了句尾的分号，JavaScript 会自动添加。

js 复制代码

var a = 1

// 等同于

var a = 1;

因此有人提倡不写分号。但麻烦的是，如果下一行的开头字符是下面的这五个字符之一（"("，"["，"/"，"+"，"-"），JavaScript 将不对上一行句尾添加分号。

js 复制代码

let x = 1

(function (){
    ...
})();

// 等同于

let x = 1(function (){...})();

因此不要省去句尾的分号。

2.4. with 语句

with 语句可以减少代码的书写，但是会造成混淆。

js 复制代码

with (obj) {
    name = "李华";
}

上面的代码可能会有这几种运行结果。

js 复制代码

obj.name = "李华";

name = "李华";

这两种情况都有可能发生，取决于变量是否有定义。

因此不要使用 with 语句。

2.5. 相等和严格相等

JavaScript 有两个可以表示相等的运算符，相等（==）和严格相等（===）。

因为相等（==）运算符会自动转换变量类型，造成很多意想不到的情况。估计许多小伙伴都去了解过相关的类型转换，但是相关的转换太多了，有时还会记错，所以不推荐使用相等（==）运算符。

js 复制代码

0 == ''// true

1 == true // true

2 == true // false

0 == '0' // true

false == 'false' // false

false == '0' // true

" \t\r\n " == 0 // true

因此不要使用相等（==）运算符，而是使用严格相等（===）运算符。

2.6. 语句的合并

有些程序猿喜欢追求简洁，喜欢合并不同的语句。比如：

js 复制代码

a = b;

if (a) {...}

有些程序猿会将其合并为：

js 复制代码

if (a = b) {...}

虽然语句少了一行，但是可读性大打折扣，而且会造成误读，让别人误以为这行代码的意思是：

js 复制代码

if （a === b）{...}

另外一种情况是，有些程序员喜欢在同一行中赋值多个变量：

js 复制代码

var a = b = 0;

他以为，这行代码等同于

js 复制代码

var a = 0, b = 0;

实际上不是，它的真正效果是下面这样：

js 复制代码

b = 0; // 而这创建了一个全局变量，window.b

var a = b;

因此不要把不同目的的语句合并为一行。

2.7. 变量声明

JavaScript 会自动将 var 声明的变量提升至代码块的头部。

js 复制代码

if (false) { 
    var obj = {}; 
}

// 等同于

var obj;

if (false) {
    obj = {};
}

即使 if 语句内部不会被执行，obj 变量也会被提升。

因此所有的 var 声明的变量都应该放在函数的头部。 ES6 有 let、const 可以解决这个问题，它们声明的变量位于块作用域中。