JS筆記(2) JS中的迴圈遍歷

六兩發表於2019-04-15
JS筆記

一、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迴圈的區別：

  1. for迴圈通常用來迴圈陣列，迴圈出索引i都是number資料型別
  2. 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"]
複製程式碼

相關文章