摘要：甚至包括原型鏈上的所有可枚舉的屬性顯然，我們習(xí)慣的數(shù)組遍歷的結(jié)果是只有這樣的結(jié)果的。當(dāng)代碼運(yùn)行到語句時(shí)，執(zhí)行上下文的作用域鏈臨時(shí)被改變了。

前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：流程控制

JavaScript是單線程的，一個(gè)語句一個(gè)語句的執(zhí)行。語句是執(zhí)行過程中的流程、限定與約定，形式上可以是單行語句，或者由一對(duì)大括號(hào)"{}"括起來的復(fù)合語句，復(fù)合語句整體可以作為一個(gè)單行語句處理。那么，代碼中，流程控制就顯得格外重要了。JavaScript也規(guī)定了一些語句和一些關(guān)鍵字用于流程控制。

if(2 > 1){
    console.log("xzavier win");
}

javascript會(huì)判斷括號(hào)里的條件表達(dá)式的值。如果值為truthy類型的值，也就是真，則執(zhí)行后面的一條語句，否則不執(zhí)行。這個(gè)語句無可厚非，使用率也是極高的，有時(shí)候會(huì)使用短連接來替代：

2 > 1 && console.log("xzavier win");

想了解此運(yùn)算符以及更多運(yùn)算符參考： 運(yùn)算符詳解

關(guān)于判斷參見本系列文章：代碼中的那些判斷

if為真值（Boolean轉(zhuǎn)換），則執(zhí)行if里的代碼，否則執(zhí)行else里的代碼。

if (2 > 1) {
    console.log("xzavier win"); 
} else {
    console.log("xzavier fail"); 
}

這個(gè)語句的使用也無需多說，有時(shí)候會(huì)使用三目運(yùn)算符代替：

2 > 3 ? console.log("xzavier win") : console.log("xzavier fail");

有時(shí)候設(shè)計(jì)到賦值的if...else，也可以使用短連接。同參考上面一篇文章。

if (1 > 2) {
    console.log("xzavier win"); 
} else if(3 > 2){
    console.log("xzavier win2"); 
} else {
    console.log("xzavier fail"); 
}

JavaScript其實(shí)是沒有else if的，else if算是一種封裝。看這里的js判斷：

var a = 3, b = 2;
a > b // true
a > b // false
a = b // false

額(⊙o⊙)…這不是在逗我嗎？不，我只是用最簡單的判斷說一下js的判斷：

a >= b // true  
//其實(shí)它是先判斷了 a < b 為false 再用“非正即反” 來返回 a >= b 的值

不信？看這個(gè)：

var a = {};  // 你可以添加任意屬性 {x:3};
var b = {};  // 你可以添加任意屬性 {z:2};;
a < b;    // false
a == b;   // false
a > b;    // false

對(duì)象的比較，可以參見本系列判斷相關(guān)的文章。
看上面沒問題是吧，但是用 >= 就不一樣了：

a <= b;    // true
a >= b;    // true

我...所以，也根據(jù)語言規(guī)范，先對(duì) <= 的另一面求值，再“非正即反”。

那么回到else if呢，上面的代碼其實(shí)最終是這樣的：

if (1 > 2) {
    console.log("xzavier win"); 
} else {
     if(3 > 2){
        console.log("xzavier win2"); 
    } else {
        console.log("xzavier fail"); 
    }
}

把它拆分為多個(gè)if...else... 這只是個(gè)探究，因?yàn)閑lse if司空見慣，代碼又少，語義很好，所以使用得多。所以，盡情的使用吧，我的意思是別避開寫else...if...，不是寫一大堆else...if...，如果有一堆else...if...，那還是用下面的switch吧

switch 語句是多重條件判斷，用于多個(gè)值相等的比較。

var xzavier = "boy";
switch (xzavier) {
    case "girl" :
        console.log("xzavier is a girl");
        break;
    case "boy" :
        console.log("xzavier is a boy");
        break;
    case "man" :
        console.log("xzavier is a man");
        break;
    default : 
        console.log("time error");
}

if和switch之間可以轉(zhuǎn)換，當(dāng)條件過多時(shí)，使用switch可以讓代碼更清晰，更好看。

這里說一下switch，它對(duì)括號(hào)里的語句求值一次，然后將返回值與每個(gè)case表達(dá)式進(jìn)行匹配。如果找到一個(gè)匹配，就會(huì)開始執(zhí)行那個(gè)匹配的case里的代碼，直到遇到一個(gè)break或者直到switch塊末尾。
所以，寫好break，很重要：

var xzavier = "boy";
switch (xzavier) {
    case "girl" :
        console.log("xzavier is a girl");
        break;
    case "boy" :
        console.log("xzavier is a boy");
    case "man" :
        console.log("xzavier is a man");
        break;
    default : 
        console.log("time error");
}
VM293:7 xzavier is a boy
VM293:9 xzavier is a man

沒有break掉，你的業(yè)務(wù)代碼可能就出現(xiàn)bug.使用switch就需要好好的考慮業(yè)務(wù)場景，該break的地方切勿忘記。

另外，表達(dá)式的返回值和每一個(gè)case表達(dá)式之間的匹配判斷使用的是全等運(yùn)算符===：

var xzavier = "1";
switch (xzavier) {
    case 1 :
        console.log("xzavier is a girl");
        break;
    case 2 :
        console.log("xzavier is a boy");
    case 3 :
        console.log("xzavier is a man");
        break;
    default : 
        console.log("type error");
}
// type error

還有一點(diǎn)就是 default 非必需，位置也可以不固定。因?yàn)閖s總是先去匹配表達(dá)式的返回值和每一個(gè)case表達(dá)式，最終沒有找到匹配的case，就會(huì)尋找default，找到了則執(zhí)行default里的語句。沒找到則執(zhí)行到switch塊末尾。

do...while 語句是一種先運(yùn)行，后判斷的循環(huán)語句。也就是說，不管條件是否滿足，至少先運(yùn)行一次循環(huán)體。

var xzavier = 1; 
do {
    console.log(xzavier);
    xzavier++;
} while (xzavier <= 10); 
// 1 2 3 4 5 6 7 8 9 10

var xzavier = 1; 
do {
    console.log(xzavier);
    xzavier++;
} while (xzavier <= 0);//先運(yùn)行一次，再判斷
// 1

while 語句是一種先判斷，后運(yùn)行的循環(huán)語句。

var xzavier = 1; 
while (xzavier <= 10) {  //先判斷，再運(yùn)行
    console.log(xzavier);
    xzavier++;
}
// 1 2 3 4 5 6 7 8 9 10

var xzavier = 1; 
while (xzavier <= 0) {  //先判斷，再運(yùn)行
    console.log(xzavier); // 不會(huì)執(zhí)行
    xzavier++;
} 

for 語句也是一種先判斷，后運(yùn)行的循環(huán)語句。但它具有在執(zhí)行循環(huán)之前初始變量和定義循環(huán)后要執(zhí)行代碼的能力。

for (var i = 0; i <= 10 ; i++) { 
    console.log(i); 
} 

第1步: 聲明變量var i = 1;
第2步: 判斷i <= 10
第3步: console.log(i);
第4步: i++
第5步: 重復(fù)2-5，直到判斷為false

這里我們經(jīng)常會(huì)遇到這樣的寫法：

for (var i = 0; i <= data.length ; i++) {

建議先緩存data.length 為一個(gè)變量：

for (var i = 0, l = data.length; i <= l ; i++) {

這樣做的目的并不是一定能提升程序的性能，因?yàn)閘ength屬性是一個(gè)字典屬性，讀取它和讀取變量的復(fù)雜度都為O(1)。
這樣做主要是為了防止在for循環(huán)中改變了data.length，具體使用還應(yīng)視具體代碼而定。

當(dāng)然，如果涉及到DOM，那么緩存變量就一定能提升代碼性能了。

for (var i = 0; i <= $(".item").length ; i++) {

每循環(huán)一次都$(".item") 就相對(duì)耗費(fèi)性能了，與DOM有關(guān)的讀取大多情況都應(yīng)先用變量緩存，特殊業(yè)務(wù)視情況而定。

var ietm_l = $(".item").length;
for (var i = 0; i <= ietm_l ; i++) {

for...in 語句可以用來枚舉對(duì)象的屬性。

var xzavier = { 
    "name" : "xzavier", 
    "age" : 23,
    "job" : "Jser",
    "width" : 100,
    "height" : 100,
    "border" : 10
};
for (var i in xzavier) { 
    console.log(i);
}
//name age job width height border
for (var i in xzavier) { 
    console.log(xzavier[i]);
}
//xzavier 23 Jser 100 100 10

for...in是為遍歷對(duì)象屬性設(shè)計(jì)的，但是它可以遍歷數(shù)組，我去，因?yàn)閿?shù)組也是對(duì)象啊。 不過，for...in 循環(huán)遍歷的是對(duì)象的屬性，而不是數(shù)組的索引。我們看一下打印的結(jié)果就知道了：

var arr = [1,2,3];
for(var i in arr) {
    console.log(typeof(i));
}
// string string string

而經(jīng)典的for語句遍歷是數(shù)組的索引：

var arr = [1,2,3];
for(var i = 0; i < arr.length; i++) {
    console.log(typeof(i));
}
// number number number

我們用for...in遍歷數(shù)組時(shí)，取arr[i]時(shí)是我們期望得到的結(jié)果：

var arr = [1,2,3];
for(var i in arr) {
    console.log(i + "--" + arr[i]);
}
// 0--1 1--2 2--3

但是：

var arr = [1,2,3];
arr.name = "xzavier";
for(var i in arr) {
    console.log(i + "--" + arr[i]);
}
VM230:4 0--1
VM230:4 1--2
VM230:4 2--3
VM230:4 name--xzavier

它訪問了數(shù)組新增的 "name" 屬性，因?yàn)?for-in 遍歷了對(duì)象的所有屬性。

甚至包括原型鏈上的所有可枚舉的屬性：

var arr = [1,2,3];
    arr.name = "xzavier";Array.prototype.oname = "xzavier.chris"
    for(var i in arr) {
        console.log(i + "--" + arr[i]);
    }
VM236:4 0--1
VM236:4 1--2
VM236:4 2--3
VM236:4 name--xzavier
VM236:4 oname--xzavier.chris

顯然，我們習(xí)慣的數(shù)組遍歷的結(jié)果是只有1,2,3 這樣的結(jié)果的。

所以，綜合來說：
for...in 循環(huán)遍歷的是對(duì)象的屬性，而不是數(shù)組的索引。正如例子，輸出的索引值 "0"、 "1"、 "2"不是 Number 類型的，而是 String 類型的，因?yàn)槭菍?duì)象的屬性都是string類型。

這樣看來，for...in是不適合遍歷數(shù)組的。確實(shí)，for...in本來就是為遍歷對(duì)象屬性設(shè)計(jì)的。

不過，在對(duì)于比較特殊的數(shù)組，for...in或許有用：

var arr = Array(1000), count = 0;
arr[100] = 100;
arr[200] = 200;
arr[300] = 300;
for(var i in arr) {
    count += 1;
    console.log(i + "--" + arr[i]);
}
console.log(count);
VM242:7 100--100
VM242:7 200--200
VM242:7 300--300
VM242:9 3   // 只循環(huán)了3次額

而for循環(huán)：

var arr = Array(1000), count = 0;
arr[100] = 100;
arr[200] = 200;
arr[300] = 300;
for(var i = 0; i < arr.length; i++) {
    count += 1;
    console.log(i + "--" + arr[i]);
}
console.log(count);
// count 1000  循環(huán)了這么多次
// 打印出100 200 300 和一堆的undefined

so :
for...in 只會(huì)遍歷對(duì)象中存在的實(shí)體，而for 循環(huán)則會(huì)遍歷 1000 次。如果你的業(yè)務(wù)剛好有這樣的需要，那么合適的使用for..in遍歷數(shù)組將會(huì)發(fā)揮更奇妙的作用。
但是一般來看，這樣用到的機(jī)會(huì)很少，上面的指定索引是一種，另外你使用了delete去刪除數(shù)組元素之后（非特殊，不要用delete去刪除），也是可以這樣遍歷的：

var arr = [1,2,3];
delete arr[1]
for(var i in arr) {
    console.log(i + "--" + arr[i]);
}
VM246:4 0--1
VM246:4 2--3

但是，一般情況誰允許你用delete去刪除數(shù)組元素呢。關(guān)于數(shù)組可以參考我的另一篇對(duì)數(shù)組詳解的文章。

for...in是為遍歷對(duì)象屬性設(shè)計(jì)的，當(dāng)然也可以遍歷數(shù)組。后來，ES5也為素組設(shè)計(jì)了一個(gè)forEach方法來遍歷。
forEach方法為數(shù)組中含有有效值的每一項(xiàng)執(zhí)行一次 callback。callback有三個(gè)參數(shù)：
callback（數(shù)組當(dāng)前項(xiàng)的值，數(shù)組當(dāng)前項(xiàng)的索引，數(shù)組對(duì)象本身）

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    console.log(value);
});
// 1 2 3 4 5 xzavier 7

注意：

1.使用forEach循環(huán)的時(shí)候，需要注意，forEach 遍歷的范圍在第一次調(diào)用 callback 前就會(huì)確定。調(diào)用forEach 后添加到數(shù)組中的項(xiàng)不會(huì)被 callback 訪問到。

在數(shù)組后面添加：

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    if (value == 3) {
        arr.push(8);
    }
    console.log(value);
});
// 1 2 3 4 5 xzavier 7

在數(shù)組前面添加：

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    if (value == 3) {
        arr.unshift(0);
    }
    console.log(index + "--" +value);
});
VM316:6 0--1
VM316:6 1--2
VM316:6 2--3
VM316:6 3--3
VM316:6 4--3
VM316:6 5--3
VM316:6 6--3

什么情況？因?yàn)槟阍跀?shù)組前添加1項(xiàng)后，遍歷下一項(xiàng)的值，發(fā)現(xiàn)值還是3，所以后面的遍歷一直都走到if語句里了。
但是數(shù)組的遍歷范圍是不可變的。

2.如果已經(jīng)存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    arr[5] = "xx";
    console.log(value);
});

3.已刪除的項(xiàng)不會(huì)被遍歷到（使用delete方法等情況，或者直接置為undefined）。

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    if (value == 3) {
        delete arr[5];;
    }
    console.log(value);
});
// 1 2 3 4 5 7

但是使用別的方法刪除就就會(huì)出錯(cuò)哦：

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    if (value == 3) {
        arr.shift(0);
    }
    console.log(value);
});
// 1 2 3 5 xzavier 7   

第四個(gè)值不在了，因?yàn)閒orEach記住了最開始的length，但是shift卻改變了length。其他的方法同理。
而delete并沒有把數(shù)組項(xiàng)刪掉，只是把值置為了undefined，所以length未變。

4.不能使用break或continue中斷或跳出循環(huán)，報(bào)錯(cuò)。不過可以return false 跳出當(dāng)前循環(huán)，達(dá)到一定效果：

var arr = [1,2,3,4,5,"xzavier",7];
arr.forEach(function (value, index, arr) {
    if (value == 3) {
        return false;
    }
    console.log(value);
});
// 1 2 4 5 xzavier 7

for...in循環(huán)，只能獲得對(duì)象的鍵名，不能直接獲取鍵值，并且遍歷數(shù)組不友好。
forEach中又不能使用break語句中斷循環(huán)，也不能使用return語句返回到外層函數(shù)。

ES6提供for...of循環(huán)，允許遍歷獲得鍵值。如果要通過for...of循環(huán)，獲取數(shù)組的索引，可以借助數(shù)組實(shí)例的entries方法和keys方法。它還可以正確響應(yīng)break、continue和return語句。for-of 還可以遍歷 Map 和 Set （ES6 中新增數(shù)據(jù)集合類型），以及其他可迭代對(duì)象。

var arr = ["a", "b", "c", "d"];   
for (let i in arr) {
      console.log(i); // 0 1 2 3
}
for (let i of arr) {
      console.log(i); // a b c d
}
for (var i of arr) {
    if(i == "c"){
        break;
    }
      console.log(i); // a b
}

let str = "xzavier";
for (let i of str) {
      console.log(i); // x z a v i e r
}

break 和continue 語句用于在循環(huán)中精確地控制代碼的執(zhí)行。其中，break 語句會(huì)立即退出循環(huán)，強(qiáng)制繼續(xù)執(zhí)行循環(huán)體后面的語句。而continue 語句退出當(dāng)前循環(huán)，繼續(xù)后面的循環(huán)。

for (var i = 1; i <= 10; i++) {
    if (i == 5) break; //如果i等于5，就退出循環(huán)
    console.log(i); //1 2 3 4
}
for (var i = 1; i <= 10; i++) {
    if (i == 5) continue; //如果i等于5，就退出當(dāng)前循環(huán)
    console.log(i); // 1 2 3 4 6 7 8 9 10
}

我們程序員應(yīng)該都知道有個(gè)字段叫：goto，可以讓你的程序跳到指定的地方執(zhí)行。由于goto遭到非議太多，使用這類編碼形式會(huì)使你的代碼難以理解和維護(hù)，基本不建議使用，如果JavaScript也有g(shù)oto語句，那么在上面continue的基礎(chǔ)上我們還可以讓程序的執(zhí)行跳轉(zhuǎn)到指定的代碼中的那個(gè)位置。不過，幸好，JavaScript沒有這個(gè)標(biāo)識(shí)，所以，我們的世界很歡暢。不過，你要是想這樣做，我們還是有類似的實(shí)現(xiàn)的：

xzavier: for (var i = 1; i <= 10; i++) {
    if (i == 5) {
        continue xzavier; // 一層循環(huán)，與continue無異
    }
    console.log(i);
}
// 1 2 3 4 6 7 8 9 10

在多層循環(huán)的時(shí)候作用就區(qū)別出來了：

xzavier: for (var i = 1; i <= 10; i++) {
    for( var j = 1; j <= 10; j++) {
        if (i == j) {
            continue xzavier;
        }
        console.log(i + ">" + j);
    }
}
VM123:6 2>1
VM123:6 3>1
VM123:6 3>2
VM123:6 4>1
VM123:6 4>2
VM123:6 4>3
VM123:6 5>1
VM123:6 5>2
VM123:6 5>3
VM123:6 5>4
VM123:6 6>1
VM123:6 6>2
VM123:6 6>3
VM123:6 6>4
VM123:6 6>5
VM123:6 7>1
VM123:6 7>2
VM123:6 7>3
VM123:6 7>4
VM123:6 7>5
VM123:6 7>6
VM123:6 8>1
VM123:6 8>2
VM123:6 8>3
VM123:6 8>4
VM123:6 8>5
VM123:6 8>6
VM123:6 8>7
VM123:6 9>1
VM123:6 9>2
VM123:6 9>3
VM123:6 9>4
VM123:6 9>5
VM123:6 9>6
VM123:6 9>7
VM123:6 9>8
VM123:6 10>1
VM123:6 10>2
VM123:6 10>3
VM123:6 10>4
VM123:6 10>5
VM123:6 10>6
VM123:6 10>7
VM123:6 10>8
VM123:6 10>9

continue xzavier表示跳到標(biāo)記為xzavier的循環(huán)，并繼續(xù)下一次迭代。如果不使用這個(gè)標(biāo)識(shí)符的話只會(huì)在內(nèi)層循環(huán)中跳出當(dāng)次循環(huán)并繼續(xù)下一次循環(huán)。

當(dāng)然，我們也不建議使用這樣的寫法，并沒有那么好用。舉例很隨意，并非要實(shí)現(xiàn)一個(gè)這樣的業(yè)務(wù)。如果要實(shí)現(xiàn)類似的功能，用continue換個(gè)寫法就OK了。這里主要說明下我們還是有這樣的寫法存在的，用不用看你心情，看你的場景，以及你的團(tuán)隊(duì)同不同意。

with語句的作用是將代碼的作用域設(shè)置到一個(gè)特定的對(duì)象中。當(dāng)代碼運(yùn)行到with語句時(shí)，執(zhí)行上下文的作用域鏈臨時(shí)被改變了。一個(gè)新的可變對(duì)象被創(chuàng)建，它包含了參數(shù)指定的對(duì)象的所有屬性。這個(gè)對(duì)象將被推入作用域鏈的頭部，這意味著函數(shù)的所有局部變量現(xiàn)在處于第二個(gè)作用域鏈對(duì)象中，因此訪問代價(jià)更高了。如果，再挖深一點(diǎn)，JavaScript 引擎在編譯階段遇到with字段都不能好好的干活兒了，因?yàn)樗恢肋@個(gè)with最后會(huì)怎么改變作用域，本想把變量作用域都安置好都不行了。所以，一般不建議使用。