目錄

• forEach()（ES6）方法
• map()（ES6） 方法
• flatMap()方法
• for...in...
• for...of...
• filter（ES6）遍歷陣列
• every（）函式（ES6）
• find（）函式（ES6）
• findIndex（）函式 （ES6）

forEach()（ES6）方法

forEach()（ES6）方法對陣列的每個元素執行一次給定的函式。

1. 數組裡的元素個數有幾個，該方法裡的回撥就會執行幾次
2. 第一個引數是數組裡的元素，第二個引數為數組裡元素的索引，第三個引數則是它自己（利用第三個引數可以進行陣列去重）
3. 陣列自帶的遍歷方法，foreach在迴圈次數未知或者計算起來較複雜的情況下效率比for迴圈高

注意：不能使用break和continue跳出整個迴圈或當前迴圈的，會報錯，但是結合try...catch可以實現跳出迴圈

const array1 = ['a','b','c'];
array1.forEach(element => console.log(element));

缺點：沒有辦法中止或跳出 `forEach()` 迴圈

map()（ES6） 方法

map()（ES6） 方法建立一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函式後的返回值。

    const array1 = [1,4,9,16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);  //[2,8,18,32]

三個引數：陣列元素，元素索引，原陣列本身

flatMap()方法

flatMap()方法首先使用對映函式對映每個元素，然後將結果壓縮成一個新陣列。它與 map 連著深度值為1的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些。

    var arr1 = [1,2,[3,4]];
    arr1.flatMap(x => x);    //[1,3,4]
    var arr1 = [1,4];
    arr1.flatMap(x => [[x * 2]]);   // [[2],[4],[6],[8]]

for...in...

這個迴圈用的人也很多，但是效率最低（輸出的 key 是陣列索引），如果遍歷的是物件，輸出的則是物件的屬性名

for...of...

效能要好於 `for..in...`，但仍然比不上普通的 `for` 迴圈
 注意：不能迴圈物件，因為任何資料結構只要部署 Iterator介面，就可以完成遍歷操作，有些資料結構原生具備 Iterator 介面，比如Array、Map、Set、String等，而 Iterator 介面是部署在資料結構的Symbol.iterator屬性上的，而物件Object恰恰是沒有Symbol.iterator屬性的，所以無法被for..of遍歷

filter（ES6）遍歷陣列

filter（ES6）遍歷陣列，過濾出符合條件的元素並返回一個新陣列,如果沒有任何陣列元素通過測試，則返回空陣列。

    const result = words.filter(word => word.length > 6);
    console.log(result)   //["exuberant","destruction","present"]
some（）函式（ES6）
    遍歷陣列中是否有符合條件的元素，返回值為Boolean值
    這個它只要找到一個符合條件的，就返回 true。
    var arr = [
     { id: 1,name: '買筆',done: true },{ id: 2,name: '買筆記本',{ id: 3,name: '練字',done: false }
    ]
www.cppcns.com    
    var bool = arr.some(function (item,index) {
     return item.done
    })
    console.log(bool)    // true

every（）函式（ES6）

測試陣列的各個元素是否通過了回撥函式的測試
若都通過，返回 true，否則返回 false
簡單的說就是如果回撥函式每次返回的值都是 true 的話，則 every() 返回 true，否則為 false。

    var arr = [
        { id: 1,done: false }
 VoFAJuBQJH   ]
    var bool = arr.every((item,index) => {
        return item.done
    })
    console.log(bool)    // false

find（）函式（ES6）

返回第一個通過測試的元素,如果沒有通過測試的元素，則會返回**undefined**。

    var arr = [1,1,5,6]
    var num = arr.find( (item,index) => {
        return item === 3
    })
    console.log(num)   //  3

findIndex（）函式 （ES6）

這個函式與上面的find（）作用一樣，就是它返回的值為該通過第一個元素的索引。

    var arr = [1,6]
    var num = arr.findIndex(item => {
        return item === 3
    })
    console.log(num)   //  4

到此這篇關於淺談陣列內建遍歷方法有哪些和區別的文章就介紹到這了,更多相關JS陣列內建遍歷內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！