JavaScript 之數組遍歷（迭代）方法介紹

Pikachu 發布于2019-08-23 18:33 / 2950人閱讀

摘要：中一共有五種數組遍歷迭代方法，它們都會對數組中每個元素執行一些業務，且都不會修改原數組，這些方法包括如果該函數任意一項返回，則返回，如果全部返回則最終返回如果該函數每一項都返回，則返回，否則返回會返回一個新數組，該數組是由滿足條件的任意項組

ES5中一共有五種數組遍歷（迭代）方法，它們都會對數組中每個元素執行一些業務，且都不會修改原數組，這些方法包括：

1、some() 如果該函數任意一項返回 true，則返回 true，如果全部返回 false 則最終返回 false

2、every() 如果該函數每一項都返回 true，則返回 true，否則返回 false

3、filter() 會返回一個新數組，該數組是由滿足條件的任意項組成

4、forEach() 該函數沒有返回值，本質上與使用 for 循環迭代數組一樣

5、map() 最終會返回一個經過操作后的新數組；

其中 some() 和 every() 是非常相似的，它們都會返回一個 boolean，主要區別就在于，前者數組中只要有一項滿足條件即可返回 true，而后者需要每一項都要滿足條件才返回 true

let arr = [2, 3, 4, 5];

let res = arr.every((item, index ,arr) => {
    return item > 4
});

let otherRes = arr.some((item, index, arr) => {
    return item > 4
});

console.log(res); // false

console.log(otherRes); // true

可以看到 arr 數組中只有 5 滿足了大于4，而 every() 方法要求必須每一項都返回 true 才滿足，而 some()方法只要數組中有至少一項滿足條件即可，所以 5 滿足了條件則返回了 true；

filter()

這個方法就是指定一些條件然后過濾掉，然后返回滿足條件的元素再組成數組，并不會影響原數組結構；

let arr = [2, 3, 4, 5];

let res = arr.filter((item, index ,arr) => {
    return item > 3
});

console.log(res); // [ 4, 5 ]

console.log(arr); // [ 2, 3, 4, 5 ]

簡單明了

再來看一下 forEach() 方法：

它并沒有返回值，和 for 遍歷類似：

let arr = [2, 2, 3, 4, 4, 5];

let newArr = [];

arr.forEach((item, index ,arr) => {
    if (newArr.indexOf(item) === -1) {
        newArr.push(item)
    }
    return newArr
});

console.log(newArr); // [ 2, 3, 4, 5 ]

這里簡單實現了一個數組去重，當然即然剛剛說 forEach() 和 for 相似，看看代碼如何體現：

let arr = [2, 2, 3, 4, 4, 5];

let newArr = [];

for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}

console.log(newArr); // [ 2, 3, 4, 5 ]

區別只不過 for遍歷中 arr[i] 相當于 forEach中callback函數中的item參數

forEach() 看起來更清晰簡潔一些

最后就要說一下 map() 這個方法：

在 React 這個框架中其實我們經常見到這個方法，通常用來做渲染 list

先看一下用法：

let arr = [1, 2, 3];

let newArr = arr.map((item, index ,arr) => {
    return item * 2
});

console.log(newArr); // [ 2, 4, 6 ]

map() 方法是讓每個元素執行指定邏輯，最后再返回一個新的數組；

數組的遍歷（迭代）方法就說到這里，歡迎有問題和錯誤指出，也歡迎閱讀我近期關于TypeScript的相關介紹。

云服務器 GPU云服務器 javascript迭代數組 javascript數組方法數組迭代器 js迭代數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105413.html

ES6語法之可迭代協議和迭代器協議

摘要：有兩個協議可迭代協議和迭代器協議。為了變成可迭代對象，一個對象必須實現或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協議該迭代器協議定義了一種標準的方式來產生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內置或語法，而是協議。這些協議可以被任何遵循某些約定的對象來實現。有兩個協議：可迭代協議和迭代器協議。可迭代協議可迭代協議允許 JavaScri...

sarva 2019-08-22 11:23 評論0 收藏0
Javascript中數組方法reduce的妙用之處

摘要：數組方法中，相比等常用的迭代方法，常常被我們所忽略，今天一起來探究一下在我們實戰開發當中，能有哪些妙用之處，下面從語法開始介紹。按順序運行異步函數我們可以做的另一件事是按順序運行而不是并行。函數返回一個對象，可以使用方法添加回調函數。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript數組方...

yiliang 2019-08-23 18:01 評論0 收藏0
Javascript 中的 Array 操作

摘要：語法函數的幾個參數含義上一次執行函數后返回的值當前數組元素值當前數組元素索引遍歷的數組對象第一次調用函數時，如果有值，則為，為數組第一個元素。 Javascript 中的 Array 操作在各種語言中，數組總是一個比較重要的數據結構，Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地讓我們操作 Array 中的元素，下...

khs1994 2019-08-21 10:43 評論0 收藏0
js遍歷之for forEach in of

摘要：語法參數當前遍歷項。遍歷的范圍在第一次調用前就會確定。已刪除的項不會被遍歷到。的是由提出的，目的是作為遍歷所有數據結構的統一方法。不僅可以遍歷數組，還可以遍歷結構，某些類似數組的對象如對象對象，對象，以及字符串。即使是最簡單的循環，其中也深藏學問 ECMAScript5(es5)有三種for循環簡單for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 評論0 收藏0
Javascript基礎之Array數組API

摘要：數組原型提供的方法非常之多，主要分為三種直接修改原數組原數組不變，返回新數組數組遍歷方法直接修改原數組的刪除一個數組中的最后的一個元素，并且返回這個元素添加一個或者多個元素到數組末尾，并且返回數組新的長度刪除數組的第一個元素，并返回這個元素 Javascript數組原型提供的方法非常之多，主要分為三種：直接修改原數組原數組不變，返回新數組數組遍歷方法直接修改原數組的API ...

hsluoyz 2019-08-23 15:28 評論0 收藏0