一、for迴圈
for(迴圈起始條件;迴圈終止條件;每次迴圈累加的條件){ 迴圈體程式碼 };
var i = 0;=>全域性變數，可以省略（在全域性下已經設定初始值的情況下）let i = 0;=> let形成塊級作用域，i即為塊級作用域中的私有變數
let ary = [10,20,30]
for (var i = 0; i < ary.length; i++) {
console.log(ary[i]); //10 20 30
console.log(typeof i); //number
};
複製程式碼for迴圈中的兩個關鍵詞（進行流程控制）：break continue
break:強制結束整個迴圈，後面的程式碼不再執行，迴圈結束continue:結束本輪迴圈，contiune後面的程式碼不再執行，繼續執行下一輪迴圈
num = 0;
for (var i = 0; i < 10; i++) {
if (i < 5) {
num++;
continue;
};
if (i === 5) {
num--;
break;
};
num *= 2;
};
console.log(num); //4
複製程式碼二、for in 迴圈
for in 迴圈： for in 用來迴圈遍歷物件的屬性
//迴圈遍歷一個物件
let obj = { name: 'Tom', age: 23, id: 6 };
for (let keys in obj) {
console.log(keys); // name age id
console.log(obj[keys]); // Tom 23 6;
console.log(typeof keys); //string
};
複製程式碼//迴圈遍歷一個陣列
let ary = [10, 20, 30];
for (let keys in ary) {
console.log(keys); // name age id
console.log(ary[keys]); // Tom 23 6;
console.log(typeof keys); // string
};
複製程式碼for迴圈和for in迴圈的區別：
- for迴圈通常用來迴圈陣列，迴圈出索引i都是number資料型別
- for in迴圈通常用來迴圈一個物件的可列舉屬性 2.1 當for in迴圈陣列時，迴圈出索引i是string型別，不能直接使用，同時會降低程式碼執行效率
三、forEach 迴圈
- for Each 迴圈：陣列內建遍歷方法，專門用來迴圈陣列的。
- 兩個引數:
- 第一個引數: 函式-> function(){} function(陣列中的每個值,索引值,整個陣列){ }
- 第二個引數: 改變this指向,寫啥是啥（如果寫個null,undefined還是為window）
- forEach迴圈沒有返回值
- forEach會一直迴圈完所有元素，沒有跳出條件，即沒有break和continue
如果想要在forEach迴圈中跳出迴圈，可以使用try catch語句 try...catch 可以測試程式碼中的錯誤。try 部分包含需要執行的程式碼，而 catch 部分包含錯誤發生時執行的程式碼。
let arr = [true, 'haha', 10, {}, [1, 2, 3]];
arr.forEach(function (item, i, all) {
// console.log(item);//陣列中的每項
// console.log(i); //索引
// console.log(all); // 整個陣列
console.log(this); //第二個引數如果沒有，則this是window
}, arr);
複製程式碼try {
var array = ["first", "second", "third", "fourth"];
array.forEach(function (item, index) {
if (item == "third") {
var a = aaaa; // first second 後就報錯，就跳出迴圈了
throw new Error("ending");//報錯，就跳出迴圈
} else {
console.log(item);
};
});
} catch (e) {
if (e.message == "ending") {
console.log("結束了");
} else {
console.log(e.message);
};
};
複製程式碼四、map迴圈
map迴圈：陣列內建遍歷方法，它的返回值為新的陣列
- function(item,i,all){ return 新陣列的每項 };
var ary = [1, 2, 3, 4, 5];
var a2 = ary.map(function (item, index, ary) {
// item 當前這一項
// index 當前項的索引
// ary原陣列 ary === a
return item * 2; //每次指定的返回值被作為新陣列中的內容
});
console.log(a2);//[2,4,6,8,10]
複製程式碼五、for of迴圈
for of迴圈：Es6 中新增的語句 for…of迴圈可以使用的範圍包括陣列、Set 和 Map 結構、某些類似陣列的物件（比如arguments物件、DOM NodeList 物件）、Generator 物件，以及字串）
// 迴圈陣列
let arr = [true, 'haha', 10, {}, [1, 2, 3]];
for(let item of arr){
if(typeof item === 'number'){
console.log(item); //10
continue;
};
if(typeof item === 'object'){
console.log(item); //{}
break;
};
console.log(item); // true haha
};
複製程式碼// 迴圈字串
let str = 'hello';
for(let item of str){
console.log(item); // h e l l o
};
複製程式碼// 迴圈類陣列
function fn() {
for (let item of arguments) {
console.log(item); //寶石眼 貓肚子 貓尾巴
};
};
fn('寶石眼', '貓肚子', '貓尾巴');
複製程式碼// for of不能直接遍歷物件 ，可以使用Object.keys()
// Object.keys()可以將物件裡的所以的屬性名取出來放到一個陣列中
let obj = { name: 'Tom', age: 33, id: 6 };
for (let item of Object.keys(obj)) {
console.log(item + ':' + obj[item]); // name:Tom age:33 id:6
};
複製程式碼六、while迴圈
while(迴圈條件){ // 只要條件為true 就一直迴圈下去 }；
var n = 0;
while (n < 5) {
console.log(n);// 只要條件為true 就一直迴圈下去
n++;
};
複製程式碼// 遍歷陣列
let ary = ['a', 'b', 'c', 'd'];
let i = 0;
while (ary[i]) {
console.log(ary[i]);
i++;
};
複製程式碼七、do while迴圈
do/while 迴圈是 while 迴圈的變體。該迴圈會執行一次程式碼塊，在檢查條件是否為真之前，然後如果條件為真的話，就會重複這個迴圈。
- do { 需要執行的程式碼 } while (條件);
let ary = ['a', 'b', 'c', 'd'];
let i = 0;
do {
console.log(ary[i]);
i++;
}
while(ary[i]);
複製程式碼八、filter：陣列過濾
- 陣列的過濾，過濾條件成立的這個值
- 引數： function(item,i,all){ return 條件成立的某一項 }
- 函式返回值為過濾後的新陣列
//過濾大於10小於30的數字
let arr = [3, 10, 18, 38, 48, 26];
let ary = arr.filter(function (item, i) {
return item >= 10 && item < 30
})
console.log(ary);
複製程式碼九、some：檢測陣列中的元素是否滿足指定條件
- 檢視陣列中某項資料是否滿足某個條件，只要有一個滿足條件，就返回true；如果所有項條件都不成立，則返回false，返回的是一個布林值
- some() 不會對空陣列進行檢測。
- some() 不會改變原始陣列。
let arr = [1, 2, 3, 4, 5];
//檢視陣列中是否有6，明顯沒有，就返回false
let res = arr.some(function (item) {
return item === 6
});
console.log(res); // flase(陣列中沒有6)
let res1 = arr.indexOf(6);
console.log(res1); //-1(陣列中沒有6)
複製程式碼十、every：檢測陣列中是否每一項都滿足指定條件
- 判斷陣列中是不是每一項都符合某個條件，全部都符合返回true，只要有一項不符合就返回false
- 引數：function ( item , i , all ) { return }
let arr = ['62',[],NaN,{},(function(){})(),/^$/,2333];
let arr1 = [1,2,3,4,5,6];
let res = arr.every(function(item,i){
return item;
});
let res1 = arr1.every(function(item,i){
return item;
});
console.log(res); //false (不是所有項都為true)
console.log(res1); //true (所有項都為true)
複製程式碼十一、Object.keys() & Object.getOwnPropertyNames()
Object.keys()遍歷物件 返回一個包括物件屬性名的陣列 （可列舉的屬性名）Object.getOwnPropertyNames()- keys getOwnPropertyNames 是Object基類上的內建屬性
- 但Object.keys不能返回不可列舉的屬性；Object.getOwnPropertyNames能返回不可列舉的屬性。
let obj = { name: 'Tom', age: 33, id: 6 };
console.log(Object.keys(obj)); // ["name", "age", "id"]
console.log(Object.getOwnPropertyNames(obj)); // ["name", "age", "id"]
複製程式碼