原生JS--數組循環總結

（一）數組循環

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，而不是任何對象的屬性。