JS筆記(2) JS中的循環遍歷

1、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
複製代碼

2、for in 循環

• for in 用來循環遍歷當前對象可枚舉的屬性
  • 可枚舉：可遍歷
  • 1.對象的私有屬性(本身寫的）可枚舉
  • 2.瀏覽器內置的屬性通常都是不可枚舉的（好比__pproto__）
  • 3.本身在類的原型上設置的屬性也是可枚舉的，for in也會遍歷出來（通常狀況下是不想遍歷原型上的公有屬性的），因此通常會先加入下代碼

  if(obj.hasOwnProperty(key){ //通常使用for in遍歷對象時，咱們加一個私有屬性的驗證，只有是私有的屬性，才繼續操做
      console.log(key)
  }
  複製代碼

• 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
};
複製代碼

let obj = {
    zdy: 'Tom', //私有屬性
    id:13, //私有屬性
};
Object.prototype.say = function(){ //公有屬性，即原型上的屬性方法
    console.log(1);
};

for(let attr in obj){
    // 若是attr是obj的私有屬性爲true，就執行
    if(obj.hasOwnProperty(attr)){
        console.log(obj[attr])
    }
}
複製代碼

for循環和for in循環的區別：

1. for循環一般用來循環數組，循環出索引i都是number數據類型
2. for in循環一般用來循環一個對象的可枚舉屬性 2.1 當for in循環數組時，循環出索引i是string類型，不能直接使用，同時會下降代碼執行效率

3、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);
    };
};
複製代碼

4、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]
複製代碼

5、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
};
複製代碼

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++;
};
複製代碼

7、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]);
複製代碼

8、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);
複製代碼

9、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)
複製代碼

10、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)
複製代碼

11、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"]
複製代碼