首頁  >  文章  >  web前端  >  關於JS數組遍歷方法的總結

關於JS數組遍歷方法的總結

零到壹度
零到壹度原創
2018-04-21 15:24:171625瀏覽

JS的陣列遍歷是專案中必須用到的,為了寫出優雅的程式碼​​,將方法用在對的地方,在這裡將幾種方法做個對比,這裡用es6的方式展示出來,需要搭建轉換es5環境,這不是這篇的重點,下一篇可以寫這篇。

一、for迴圈

使用頻率最高,前端都會用,表示自己一開始只會用for迴圈。 。 。

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}

最常用,但有最佳化空間:

for (let i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
}

使用臨時變量,將length值存起來,避免重複取得數組長度。

二、for…of循環

es6新增的循環方式,比es5的for迴圈更簡單且高效,它還提供三個新方法:

  1. #key()是對鍵名的遍歷;

  2. value()是對鍵值的遍歷;

  3. entries ()是對鍵值對的遍歷;

let arr = [&#39;科大讯飞&#39;, &#39;政法BG&#39;, &#39;前端开发&#39;];
for (let item of arr) {  
  console.log(item);
}
// 输出数组索引
for (let item of arr.keys()) {  
  console.log(item);
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + &#39;:&#39; + val);
}

三、foreach迴圈

陣列的foreach方法使用頻率較高,但效能比for迴圈還弱。它有個優點,可以自動省略為空的陣列元素,相當於自動篩選。

let arr = [&#39;科大讯飞&#39;, ,  &#39;政法BG&#39;, , &#39;前端开发&#39;];
arr.forEach((val,index)=>console.log(index,val));

四、filter循環

有循環的功能,主要用於過濾數組,接收一個方法,它會傳回符合函數的元素集合。

let arr = [{
    label: &#39;科大讯飞&#39;,    
    value: 1
}, {
    label: &#39;政法BG&#39;,    value: 2
}, {
    label: &#39;前端开发&#39;,    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);

五、some循環

和filter功能相同,不同的是,它會傳回boolean值,用來檢查陣列中是否存在某物件。

if (arr.some(list => list.value === 1)) {
    console.log(&#39;执行了!&#39;)
}

所以它常用在if裡。

六、map循環

取代的作用,它會傳回一個由原始數組中每個元素呼叫回調函數後傳回值的集合。

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);

以上就是常用的陣列遍歷的方法,以後可以依照實際情況使用一種方法,不要所有地方用的都是for迴圈。


相關推薦:

#遍歷陣列的常用方法

list集合的遍歷3種方法

#Java8的HashMap詳解(儲存結構,功能實現,擴容優化,執行緒安全,遍歷方法)

#重溫資料結構:二元樹的常見方法及三種遍歷方式Java 實作


##################################### ######

以上是關於JS數組遍歷方法的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn