编写可维护javascript代码(三)语句和表达式

176 阅读3分钟

在javascript中,诸如if 和 for 之类的语句有两种写法,使用花括号包裹的多行代码或者不使用花括号的单行代码。like this

// bad use 合法的js代码
if (condition) 
    doSomething();

// bad use 合法的js代码
if (condition) doSomething();

// bad use 合法的js代码
if (condition) { doSomething(); }

// good use
if (condition) {
    doSomething();
}

推荐指数: 🌟🌟🌟🌟🌟

绝大多数javascript程序员都认可这一点:不论块语句(block statement)包含多行代码还是单行代码,都应该使用花括号,因为省略花括号会造成一些困惑,like this

if (condition)
    doSomething();
    doSomethingElse();

这段代码会给我们混淆,即会造成以下困扰:

// or
if (condition) {
    doSomething();
}
doSomethingElse();

// or
if (condition) {
    doSomething();
    doSomethingElse();
}

所有的块语句都应该使用花括号,包括:

if

for

while

do...while...

try...catch...finally

花括号的对齐方式

采用java式:将左花括号放置在块语句中第一句代码末尾

// good use 目前项目eslint已实现
if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

块语句间隔

// first form : 语句名、圆括号和左花括号之间没有空格间隔 紧凑型
if(condition){
   doSomething();
}

// secong form : 左括号之前 右括号之后各添一个空格
if (condition) {
    doSomething();
}

// third form: 在括号前后都加上空格
if ( condition ) {
    doSomething();
}

建议在工程中使用第二种,因为语句类型和条件判断更易读

推荐指数: 🌟🌟🌟🌟🌟

switch语句

缩进

// good use 建议加上空行 
switch(condition) {
     case "first":
           // code
           break;

     case "second":
           // code
           break;

     case "third":
           // code
           break;

     default:
           // code
}

case语句的连续执行

// good use
switch(condition) {
     // 明显的依次执行
     case "first":
     case "second":
           // code
           break;

     case "third":
           // code

           /* fall through */
     default:
           // 代码
}

default

// first form: common use 开源代码中是这么使用的
switch(condition) {
     case "first":
           // 代码
           break;

     case "second":
           // 代码
           break;

     default:
           // default中没有逻辑
}

// second form: 没有默认行为 直接写注释省略default
switch(condition) {
     case "first":
           // 代码
           break;

     case "second":
           // 代码
           break;

     // default中没有逻辑
}

推荐指数: 🌟🌟🌟

for循环

for...in 循环对象

循环遍历每个对象属性,返回属性名。由于不仅遍历对象的实例属性,同样还遍历从原型继承来的属性。当遍历自定义对象的属性时,往往会发生意外的结果而终止 出于这个原因,最好使用hasOwnProperty()方法来为for-in循环过滤实例属性

for...of 循环数组

更改循环执行过程

1、break

不管所有的循环迭代有没有执行完毕,使用break总是可以立即退出循环

// break example
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;

for (i = 0, len = values.length; i < len; i++) {
     if (i == 2) {
         break; // 迭代不会继续
     }
     process(values[i]);
}

会执行两次 第三次执行时终止循环

2、continue

立即退出当前本次执行循环,进入下一次循环迭代

// continue example
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;

for (i = 0, len = values.length; i < len; i++) {
     if (i == 2) {
         break; // 跳过本次迭代,进入下一次迭代
     }
     process(values[i]);
}

先执行两次,跳过第三次迭代,进入第四次迭代,直至最后一次迭代结束

推荐指数: 🌟🌟🌟🌟