JavaScript 中 forEach、map、filter 詳細

沒有時間？直接看重點！

一、forEach 和 map 能實現的功能類似
二、forEach 、 map、filter 都能實現對原數組的修改
三、forEach 沒有返回值，map 有返回值，filter 有返回值

---

forEach

forEach() 方法對數組的每一個元素執行一次提供的函數。

語法：

array.forEach(callback(currentVal, index, array) {
  // do something
}, thisArg)
複製代碼

forEach 使用說明

一、forEach 方法按升序爲數組中含有效值的每一項執行一次 callback 函數，那些已刪除（使用 delete 方法等狀況）或者未初始化的項將被跳過（但不包括那些值爲 undefined 的項）（例如在稀疏數組上）。

二、若是給 forEach 傳遞了 thisArg 參數，當調用時，它將被傳給 callback 函數，做爲它的 this 值。不然，將會傳入 window 做爲它的 this 值。callback 函數最終可觀察到 this 值，這取決於 函數觀察到 this 的經常使用規則。

關於 JavaScript 中的 this，我以爲過重要了，須要仔細研讀： neveryu.github.io/2018/06/01/…

三、forEach 遍歷的範圍在第一次調用 callback 前就會肯定。調用 forEach 後添加到數組中的項不會被 callback 訪問到。若是已經存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。已刪除的項不會被遍歷到。若是已訪問的元素在迭代時被刪除了(例如使用 shift()) ，以後的元素將被跳過。

四、forEach() 爲每一個數組元素執行 callback 函數；不像 map() 或者 reduce() ，它老是返回 undefined 值，而且不可鏈式調用。典型用例是在一個鏈的最後執行反作用。

forEach 要點

一、沒有返回值

var arr1 = [1, 2, 3, 4, 5]

var solt = arr1.forEach((v,i,t) => {
  console.log(v)
})

console.log(solt)	// undefined
複製代碼

二、不能停止或跳出 forEach 循環

var arr1 = [1, 2, 3, 4, 5]

// 使用break會報錯
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    break
  }
})

// return false 也無效
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    console.log('-----')
    return false
  }
})
// 1
// 2
// 3
// -----
// 4
// 5
複製代碼

三、使用箭頭函數，thisArg 參數會被忽略

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach((v, i, arr) => {
  console.log(this)
})
// window
// window
// window

arr1.forEach((v, i, arr) => {
  console.log(this)
}, arr2)
// window
// window
// window
複製代碼

四、forEach()不會在迭代以前建立數組的副本 若是數組在迭代時被修改了，則其餘元素會被跳過

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four
複製代碼

當到達包含值 "two" 的項時，整個數組的第一個項被移除了，這致使全部剩下的項上移一個位置。由於元素 "four" 如今在數組更前的位置，"three" 會被跳過。 forEach() 不會在迭代以前建立數組的副本。

五、對原數組進行修改

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach(function(v, i, arr) {
  console.log(this)
  arr[i] = v * 2
}, arr2)

console.log(arr1)
// (3) [7, 8, 9]
// (3) [7, 8, 9]
// (3) [7, 8, 9]
// (3) [2, 4, 6]
複製代碼

arr1 從 [1, 2, 3] 變成了 [2, 4, 6] 函數內部 this 值是 arr2

---

map

map() 方法建立一個數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果

語法：

let new_array = arr.map(function(v, i, arr) {
  // Return element for new_array 
}[, thisArg])
複製代碼

返回值：

一個新數組，每一個元素都是回調函數的結果
複製代碼

map 使用說明

一、map 不修改調用它的原數組自己（固然能夠在 callback 執行時改變原數組）。

二、若是 thisArg 參數有值，則每次 callback 函數被調用的時候，this 都會指向 thisArg 參數上的這個對象。若是省略了 thisArg 參數,或者賦值爲 null 或 undefined，則 this 指向全局對象 。

三、map 方法會給原數組中的每一個元素都按順序調用一次 callback 函數。callback 每次執行後的返回值（包括 undefined）組合起來造成一個新數組。 callback 函數只會在有值的索引上被調用；那些歷來沒被賦過值或者使用 delete 刪除的索引則不會被調用。

四、使用 map 方法處理數組時，數組元素的範圍是在 callback 方法第一次調用以前就已經肯定了。在 map 方法執行的過程當中：原數組中新增長的元素將不會被 callback 訪問到；若已經存在的元素被改變或刪除了，則它們的傳遞到 callback 的值是 map 方法遍歷到它們的那一時刻的值；而被刪除的元素將不會被訪問到。【和 forEach 同樣】

map 要點

一、querySelectorAll 應用

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value
});
複製代碼

上面代碼展現瞭如何去遍歷用 querySelectorAl 獲得的動態對象集合。在這裏，咱們得到了文檔裏全部選中的選項，並將其打印。

map 使用技巧案例

一般狀況下，map 方法中的 callback 函數只須要接受一個參數，就是正在被遍歷的數組元素自己。但這並不意味着 map 只給 callback 傳了一個參數。這個思惟慣性可能會讓咱們犯一個很容易犯的錯誤。

// 下面的語句返回什麼呢：
["1", "2", "3"].map(parseInt);
// 你可能以爲會是 [1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]
複製代碼

一般使用 parseInt 時，只須要傳遞一個參數. 但實際上，parseInt 能夠有兩個參數，第二個參數是進制數. 能夠經過語句 alert(parseInt.length) === 2 來驗證. map 方法在調用 callback 函數時，會給它傳遞三個參數：當前正在遍歷的元素，元素索引，原數組自己. 第三個參數 parseInt 會忽視，但第二個參數不會，也就是說： parseInt 把傳過來的索引值當成進制數來使用. 從而返回了 NaN.

或者可使用箭頭函數：

['1', '2', '3'].map( str => {
  parseInt(str)
})
複製代碼

一個更簡單的方式：

['1', '2', '3'].map(Number);  // [1, 2, 3]
// 與 parseInt 不一樣，下面的結果會返回浮點數或指數：
['1.1', '2.2e2', '3e300'].map(Number);  // [1.1, 220, 3e+300]
複製代碼

filter

filter() 方法建立一個新數組，其包含經過所提供函數實現的測試的全部元素

語法：

var new_array = arr.filter(callback[, thisArg])
複製代碼

filter 使用說明

一、filter 爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或 等價於 true 的值 的元素建立一個新數組。callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有經過 callback 測試的元素會被跳過，不會被包含在新數組中。

二、filter 不會改變原數組，它返回過濾後的新數組。

三、filter 遍歷的元素範圍在第一次調用 callback 以前就已經肯定了。在調用 filter 以後被添加到數組中的元素不會被 filter 遍歷到。若是已經存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或歷來未被賦值的元素不會被遍歷到。

filter 示例

var filtered = [12, 5, 8, 130, 44].filter(function(v) {
  return v >= 10
})
// [12, 130, 44]
複製代碼

---

寫在最後

個人主頁： neveryu.github.io/index.html

QQ羣：685486827