前端技巧|web前端遍歷數組的方法

      前端開發中給我們提供了數組這個概念，很多的數據可以存在一個數組中，但當我們需要尋找里面的數據的時候就需要遍歷數組，那么遍歷數組都有哪些方式呢？

      一.for循環

      length屬性是一個很特別的屬性，看到數組，大家一定會想到length, 那他具體有什么特性那？

      1.數組是一組數據，length屬性表示這個數組中的內容的個數。簡稱數組的長度。

      2.數組對象是沒有任何方法的，只有一個唯一的屬性length。

      3.當設置屬性的時候，表示要修改該數組的長度。數組的長度會發生變化。

      4.當讀取時，會實時返回數組的當時的長度。

      for循環實現數組的遍歷

      原理：

      1.通過for 構造下標，根據下標取出具體元素

      2.(變量名.length) 可以動態檢測數組元素的個數

      3.arr[i] 表示的是第幾個，不是計數器，是數組元素

      4.arr.length 表示有幾個 ，是數組的長度

      二、forEach

      forEach()函數從頭到尾把數組遍歷一遍。有三個參數分別是：數組元素，元素的索引，數組本身（如果是一個參數就是數組元素，也就是數組的值。

      輸出結果：

      由此可見：

      1.val代表著數組中的值，而key代表著相對應數組的下標

      2.方法用于調用數組的每個元素，并將元素傳遞給回調函數, 沒有返回值

      三、map（）

      map方法是通過循環的方式一個一個項的處理原來的數組，并返回新的數組，同時，不會改變原數組的值

      輸出結果：

      注意：

      1.返回一個新的數組,但是不改變原數組

      2.map方法有返回值，返回值用變量接收。

      四、for of遍歷數組

      es6新增加一個for of循環 得到的是元素

      優點：

      不同用于forEach方法，它可以與break、continue和return配合使用

      提供了遍歷所有數據結構的統一操作接口

      注意：

      for of不能遍歷對象。

      喜歡web前端的同學，可以參考千鋒web前端培訓班提供的web前端學習路線，該學習路線對從零基礎小白到web前端初級開發工程師，web前端高級開發工程師，后面的web前端大神級開發工程師都有一個明確清晰的指導，根據千鋒web前端培訓機構提供的web前端學習路線圖可以讓你對學習web前端開發需要掌握的知識有個清晰的了解，并快速入門web前端開發。想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群：857920838  加群找群管理領取即可，等你來哦~~