前言
在日常使用中，說到for回圈腦海中會冒出幾種方法，但是如果要察覺它們之中的區別，就需要對這幾種for回圈進行一個系統性的實踐性的總結，
在ES5中有三種回圈 分別是 for , for…in , forEach
在ES6中新增了 for…of
for回圈
常見寫法
const arr = [1, 2, 3];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
如果陣列長度在回圈程序中不會改變，將陣列長度用變數存盤起來會獲得更好的效率，改進后的寫法：
const arr = [1, 2, 3];
for(let i = 0, len = arr.length; i < len; i++) {
console.log(arr[i]);
}
for…in
使用for-in回圈，回傳的是所有能夠通過物件訪問的、可列舉的屬性，其中既包括存在于實體中的屬性，又包括存在于原型中的屬性，屏蔽了原型中不可列舉屬性的實體屬性也會在for-in回圈中回傳，
——《JavaScript高級程式設計》
回圈陣列
const arr = [1, 2, 3];
for(let index in arr) {
console.log("arr[" + index + "] = " + arr[index]);
}
// 輸出結果如下
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
回圈物件
const person = {
fname: "san",
lname: "zhang",
age: 29
};
let info;
for(info in person) {
console.log("person[" + info + "] = " + person[info]);
}
// 輸出結果如下
// person[fname] = san
// person[lname] = zhang
// person[age] = 29
缺陷：會遍歷原型上所有可列舉的屬性(可以使用hasOwnProperty(屬性名))過濾
let per = {name:'張三'};
Object.prototype.age = 8;
for(let item in per){
console.log(item)
}
//name
//age
forEach
const arr = [1, 2, 3];
arr.forEach((data) => {
console.log(data);
});
// 輸出結果如下
// 1
// 2
// 3
forEach 方法為陣列中含有有效值的每一項執行一次 callback 函式，那些已洗掉（使用 delete 方法等情況）或者從未賦值的項將被跳過（不包括那些值為 undefined 或 null 的項）， callback 函式會被依次傳入三個引數：
- 陣列當前項的值；
- 陣列當前項的索引；
- 陣列物件本身；
添加陣列當前項的索引引數，注意callback 函式中的三個引數順序是固定的，不可以調整，
let arr = [1,2,3];
arr.forEach((item,index,arr) => {
console.log(item,index,arr)
});
需要注意的是，forEach 遍歷的范圍在第一次呼叫 callback 前就會確定，呼叫forEach 后添加到陣列中的項不會被 callback 訪問到，如果已經存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值，已洗掉的項不會被遍歷到，
for…of
ES6中引入的新的回圈
主要用于解決其他for回圈的缺陷
let arr = [1,2,3]
for(item in arr){
console.log(item)
}
//1
//2
//3
ES6之前的三種for回圈有什么缺陷？
- 不能break，和return；
- for…in 不僅遍歷陣列中的元素，還會遍歷自定義的屬性，甚至原型鏈上的屬性都被訪問到，而且，遍歷陣列元素的順序可能是隨機的，
所以，鑒于以上種種缺陷，我們需要改進原先的 for 回圈，但 ES6 不會破壞你已經寫好的 JS 代碼，目前，成千上萬的 Web 網站依賴 for-in 回圈，其中一些網站甚至將其用于陣列遍歷，如果想通過修正 for-in 回圈增加陣列遍歷支持會讓這一切變得更加混亂，因此，標準委員會在 ES6 中增加了一種新的回圈語法來解決目前的問題，即 for-of ，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/344271.html
標籤：其他
上一篇：JavaScript基礎（1）