forEach()（ES6）方法

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

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

    注意：不能使用break和continue跳出整個循環(huán)或當(dāng)前循環(huán)的，會報錯，但是結(jié)合try...catch可以實現(xiàn)跳出循環(huán)

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

缺點(diǎn)：沒有辦法中止或跳出 `forEach()` 循環(huán)

map()（ES6） 方法

map()（ES6） 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素是調(diào)用一次提供的函數(shù)后的返回值。

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

    三個參數(shù)：數(shù)組元素，元素索引，原數(shù)組本身

flatMap()方法

flatMap()方法首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。它與 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...

這個循環(huán)用的人也很多，但是效率最低（輸出的 key 是數(shù)組索引），如果遍歷的是對象，輸出的則是對象的屬性名

for...of...

  性能要好于 `for..in...`，但仍然比不上普通的 `for` 循環(huán)
    ?注意：不能循環(huán)對象，因為任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator接口，就可以完成遍歷操作，有些數(shù)據(jù)結(jié)構(gòu)原生具備 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator屬性上的，而對象Object恰恰是沒有Symbol.iterator屬性的，所以無法被for..of遍歷

filter（ES6）遍歷數(shù)組

filter（ES6）遍歷數(shù)組，過濾出符合條件的元素并返回一個新數(shù)組, 如果沒有任何數(shù)組元素通過測試，則返回空數(shù)組。

    const result = words.filter(word => word.length > 6);
    console.log(result)   //["exuberant", "destruction", "present"]
some（）函數(shù)（ES6）
    遍歷數(shù)組中是否有符合條件的元素，返回值為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（）函數(shù)（ES6）

   測試數(shù)組的各個元素是否通過了回調(diào)函數(shù)的測試
    若都通過，返回 true，否則返回 false
    簡單的說就是如果回調(diào)函數(shù)每次返回的值都是 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（）函數(shù)（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（）函數(shù) （ES6）

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

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• Vue3中實現(xiàn)點(diǎn)擊菜單跳轉(zhuǎn)效果怎么做，要點(diǎn)是什么

  這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下

• Vue框架下table行click事件怎么添加，哪些事項要注意

  這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

• 在Vue中如何實現(xiàn)鼠標(biāo)拖動div的效果，方法是什么

  這篇文章主要為大家詳細(xì)介紹了vue+ts實現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

• 原生網(wǎng)絡(luò)請求怎么理解，過程是怎樣的

  這篇文章主要為大家介紹了網(wǎng)絡(luò)請求方案原生網(wǎng)絡(luò)請求和js網(wǎng)絡(luò)請求庫的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步

• Context是如何進(jìn)行多組件傳值的，過程是怎樣

  Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧