js和ts關於遍歷的幾個小總結

下文記述了一下關於循環遍歷的幾種方法foreach ,for...in, for...of有什么區別。

首先我們來看看foreach的用法，如下代碼為例：

//foreach和箭頭表達式
let list: Array<number> = [1, 2, 3, 4, 5];
list.forEach(value=>
    console.log(value)
);

通過下圖執行結果我們可以看出，foreach循環可以獲取數組的值，循環得出的是數組的值。然而這種寫法有個缺點那就是通過foreach的循環無法中途根據特定的條件停止循環的執行，也就是說這種寫法不支持break.

接下來讓我們看看for...in的用法，還是上代碼如下：

//for...in
let list1: Array<number> = [1, 2, 3, 4];
for (var index in list1) { 
    console.log(index);
}

通過執行的結果我們可以看出這種循環的寫法獲取到的是數組的下標值，其實這種寫法還可以輸出js代碼里關於屬性的設定。這種方法同樣的不支持break方法，中途無法停止循環的運行。

第三種循環的寫法就是for...of這中寫法是typescript的一種寫法，同樣的上代碼：

//for...of
let list1: Array<number> = [1, 2, 3, 4];
for (var index of list1) { 
    console.log(index);
}

通過下圖的執行結果我們可以看出這種寫法也是輸出數組集合的值的，這種寫法本身是支持break的，可以通過特定的條件中間停止循環。