淺談JS數組內置遍歷方法有哪些和區別

Posted on by

forEach()（ES6）方法

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

    1. 數組裡的元素個數有幾個，該方法裡的回調就會執行幾次
    2. 第一個參數是數組裡的元素，第二個參數為數組裡元素的索引，第三個參數則是它自己（利用第三個參數可以進行數組去重）
    3. 數組自帶的遍歷方法，foreach在循環次數未知或者計算起來較復雜的情況下效率比for循環高
    4. 循環的數組元素是基本數據類型，不會改變原數據的數據，循環的數組元素為對象，會改變原數組的對象屬性的值
    5. 循環過程中不支持修改索引，回調中使用return不會報錯，但是無效

    註意：不能使用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, 2, 3, 4]
    var arr1 = [1, 2, 3, 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: '買筆記本', done: true },
     { id: 3, name: '練字', done: false }
    ]
    
    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, name: '買筆', done: true },
        { id: 2, name: '買筆記本', done: true },
        { id: 3, name: '練字', done: false }
    ]
    var bool = arr.every((item, index) => {
        return item.done
    })
    console.log(bool)    // false

find（）函數（ES6）

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

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

findIndex（）函數 （ES6）

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

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

 到此這篇關於淺談JS數組內置遍歷方法有哪些和區別的文章就介紹到這瞭,更多相關JS數組內置遍歷內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：