JavaScript 之數(shù)組遍歷（迭代）方法介紹

Pikachu 發(fā)布于2019-08-23 18:33 / 2943人閱讀

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

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

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

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

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

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

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

其中 some() 和 every() 是非常相似的，它們都會返回一個 boolean，主要區(qū)別就在于，前者數(shù)組中只要有一項滿足條件即可返回 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 數(shù)組中只有 5 滿足了大于4，而 every() 方法要求必須每一項都返回 true 才滿足，而 some()方法只要數(shù)組中有至少一項滿足條件即可，所以 5 滿足了條件則返回了 true；

filter()

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

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 ]

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

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 ]

區(qū)別只不過 for遍歷中 arr[i] 相當于 forEach中callback函數(shù)中的item參數(shù)

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() 方法是讓每個元素執(zhí)行指定邏輯，最后再返回一個新的數(shù)組；

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

GPU云服務器云服務器 javascript迭代數(shù)組 javascript數(shù)組方法數(shù)組迭代器 js迭代數(shù)組

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

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

ES6語法之可迭代協(xié)議和迭代器協(xié)議

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

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

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

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

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

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

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

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

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

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