原生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() 來檢查,如果找到的枚舉屬性是對象自己的(不是繼承的)。如果是,該屬性被記錄。記錄的屬性是012foo,因為它們是自身的屬性(不是繼承的)。屬性arrCustomobjCustom不會被記錄,因為它們是繼承的。

該循環迭代並記錄iterable作為可迭代對象定義的迭代值,這些是數組元素 3, 5, 7,而不是任何對象的屬性。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM