Javascript 循環語句彙總

1.應用場景

主要用於數組array，對象{}/map, set進行循環流程處理.

2.學習/操作

1.while循環

function testBreak(x) {
var i = 0;

while (i < 6) {
    if (i == 3) {
      break; //跳出循環，執行return語句
    }
    i += 1;
}

return i * x;
}

var ret = testBreak(6);
console.log(ret);

結果：

2.普通for循環
自行指定循環次數

3.for..in循環
屬歷史遺留，用於遍歷對象的屬性(數組的索引值也算屬性)。
但有一個缺點：如果手動向數組添加成員屬性，則：
雖然數組的length不變，但用for..in遍歷數組會遍歷到那些新定義的屬性

4.for..of循環(ES6)
for..of循環修復了for..in存在的問題，他只遍歷屬於對象本身的屬性值。
且這個對象必須是iterable可被迭代的。如Array, Map, Set.

for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）

上創建一個迭代循環，調用自定義迭代鉤子，併爲每個不同屬性的值執行語句 ---- MDN

5.forEach(callbackFn, ?thisArg)方法(ES5.1)
iterable可被迭代的對象都有forEach(callbackFn, ?thisArg)。
而Array, Map, Set對象都是可被迭代的。
forEach()接收一個回調函數callbackFn，每次迭代都回調該函數。
回調函數的參數列表爲(value, key, iterable)，依次是(值, 鍵, 可迭代的對象本身).

如爲數組時

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element)); //使用了箭頭函數，低版本瀏覽器或不支持

//等價於[ES3寫法]：array1.forEach(function(ele){console.log(ele);})

// expected output: "a"
// expected output: "b"
// expected output: "c"

截圖：

爲對象時，出現報錯

補充：//forEach方法無法中斷執行，總是會將所有成員遍歷完。如果希望符合某種條件時，就中斷遍歷，要使用for循環.

總結：

while可用array.

iterable可被迭代的對象類型有Array, Map, Set。
普通for循環可用於遍歷數組。
for..in可遍歷Array, Object對象，且會遍歷到新添加的成員屬性。
for..of可遍歷iterable可被迭代的對象(不包括Object)。且只遍歷屬於對象本身的屬性。
iterable可被迭代的對象有成員方法forEach()，也只遍歷屬於對象本身的屬性。

關於內外兩層嵌套循環：//結合 continue， break ， label的使用 20200506

https://wangdoc.com/javascript/basic/grammar.html

後續補充

...

3.問題/補充

1.angular.forEach怎麼跳出循環？//在公司項目維護的過程中遇到 20200429

forEach是不能跳出循環的。

在絕大多數編程語言中，foreach不僅僅是語法糖，通過編譯優化它可以提供更好的性能，比如直接略去邊界檢查。

爲了能更好地做到這些優化，foreach在設計上也給出了制約。

例如在C#中，迭代過程不允許更改容器本身（增刪元素），不允許break（我們知道，所有的條件語句都會降低指令緩存和流水線的性能）。

Angular包裝了一系列的原生JS方法，爲的是能夠更好地監聽模型變化。

這些JS方法的使用方式和原來基本沒有區別。

forEach就是一個，還有$timeout等等。

關於Angular的數據綁定方式可以看這個：

http://harttle.com/2015/06/06/angular-data-binding-and-digest.html

解決辦法：//即定義一個判斷標識

var keepGoing = true;
angular.forEach([0,1,2], function(count){
if(keepGoing) {
    if(count == 1){
      keepGoing = false;
    }
}
});

參見： http://stackoverflow.com/a/13844508/2586541

或者使用Js原生的forEach/jquery. //實踐TBD

Js原生的forEach和jquery的each是這樣的，

return true, 中斷後面的操作，繼續遍歷到下一個操作，類似continue；//效果如此

return false，結束整個遍歷，類似break //錯誤的說法, return false/true或者直接return; 都是一樣的, 不同的是在函數中,返回的值不同.

實踐得知:

arr.forEach(function(ele){
   if(ele == 3){
       return true;// return/return false/return true; 效果都是一樣的,跳過本次循環
       // continue; //報錯
       // break; //報錯
   }
   console.log(ele);
});
console.log('forEach之後的語句');

Angular使用return是沒有效果的，而且使用break會出現報錯.

4.參考

https://blog.csdn.net/wuyujin1997/article/details/88743955 //JS中的4種for循環

https://developer.mozilla.org/zh-CN/search?q=for //查找for

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements //語句和聲明

https://segmentfault.com/q/1010000003030603 //angular.forEach怎麼跳出循環

http://stackoverflow.com/a/13844508/2586541

https://wangdoc.com/javascript/basic/grammar.html //JavaScript 的基本語法

後續補充

...