(一)數組循環
1.for循環
let arr = [11,22,33,44,55];
for(let i = 0;i<arr.length;i++){ arr[i] = arr[i] *2; } console.log(arr)
優化版for循環
使用變量,將長度保存起來,當數組長度很大時,優化效果明顯
let arr = [11,22,33,44,55]; for(let i = 0;let len = arr.length,i<len;i++){ arr[i] = arr[i] *2; } console.log(arr)
2.forEach
優點:ES5推出的,數組自帶,一般用來代替for
缺點: 不可以使用break語句中斷循環
不可用return語句返回到外層函數
沒有返回值
不可以改變原數組 性能沒有for高 有兼容性
arr.forEach(function(value,index,array){ console.log('forEach遍歷:'+i+'--'+value); })
使用方法:
3.map遍歷
用法與forEach基本相同,不同的是可以return返回值,但並不改變數組
一般用來,修改數組的值從而映射出一個新數組。
let arr = [1, 2, 3, 4, 5]; let arrs = arr.map((value, index, array) => { return value * 2; }); console.log(arrs); //[2, 4, 6, 8, 10]
4.filter:過濾
一般用來過濾一個數組,不改變原來的數組
let arr = [1, 2, 3, 4, 5]; let arrs = arr.filter((value, index, array) => { if (value > 2) { return true; } else { return false; } }); console.log(arrs); //[3, 4, 5]
5.for..of
ES6新功能
可以正確響應break、continue和return語句
可以獲得到鍵值,一般我們用他來循環數組
支持字符串遍歷,支持大多數數字對象,例如DOM NodeList對象
for (let i of arr) { console.log(i); // 11, 22, 33, 44, 55 }
(二)for..in與for...of
for...in是為便利對象而設計的,不適用於遍歷數組
遍歷數組時,我們推薦使用for...of
for...in遍歷數組的缺點:數組的下標index值是數字,而for...in遍歷的index值(下標)的數據類型是字符串
for...in...循環值遍歷可枚舉屬性。像Array和Object使用內置構造函數所創建的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性,例如String的indexOf()方法或Object的toString()方法。循環將邊路對象本身的所有可枚舉屬性,以及對象從其構造函數原型中繼承的屬性(更為接近原型鏈中對象的屬性覆蓋原型屬性)
數組索引只是具有整數名稱的枚舉屬性,並且與通用對象屬性相同。不能保證for..in將以任何特定的順序返回索引。for...in循環語句將返回所有可枚舉屬性,包括非整數類型的名稱和繼承的那些。
for...in 語句以原始插入順序迭代對象的可枚舉屬性。
for...of 語句遍歷可迭代對象定義要迭代的數據。
使用hasOwnProperty() 來檢查,如果找到的枚舉屬性是對象自己的(不是繼承的)。如果是,該屬性被記錄。記錄的屬性是0, 1, 2和foo,因為它們是自身的屬性(不是繼承的)。屬性arrCustom和objCustom不會被記錄,因為它們是繼承的。
該循環迭代並記錄iterable作為可迭代對象定義的迭代值,這些是數組元素 3, 5, 7,而不是任何對象的屬性。