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

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

一、some() 若是該函數任意一項返回 true，則返回 true，若是所有返回 false 則最終返回 false

二、every() 若是該函數每一項都返回 true，則返回 true， 不然返回 false

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

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

五、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的相關介紹。