javaScript 的 map() reduce() foreach() filter()

map（映射）, reduce（規約）, forEach（遍歷）, filter（過濾），它們都是高階函數，都是以傳入不同的函數來以不同的方式操作數組元。ie都不支持

一.map方法

*概述

map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組。（ps：map函數作用於數組）

1.語法

array.map(callback[, thisArg])

2.參數

callback

原數組中的元素經過該方法后返回一個新的元素。

currentValue

callback 的第一個參數，數組中當前被傳遞的元素。

index

callback 的第二個參數，數組中當前被傳遞的元素的索引。

array

callback 的第三個參數，調用  map 方法的數組。

thisArg

執行  callback 函數時  this 指向的對象。

3.返回值

由回調函數的返回值組成的新數組。

4.描述

map 方法會給原數組中的每個元素都按順序調用一次 callback 函數。使用map方法處理數組時，數組在調用callback之前已經是確定了，也就是在callback過程中數組新增元素都不被調用。

*map方法示例

1.map的常用方法（采用ES6箭頭函數的方法啟動回調函數）

// 定義一個數組
var radii = [10, 20, 30];

// 由直徑求圓的面積
var areas = radii.map((radius)=>{
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
});

console.log(areas);
//輸出結果 ["314", "1257", "2827"]

2.闡釋 thisArg 參數的用法，該參數指定 this 關鍵字可引用的對象。

//定義一個對象，里面有一個值和一個方法
var obj = {
    divisor: 10,
    remainder: function (value) {  //求得到的余數
        return value % this.divisor;
    }
}
//定義一個數組
var array = [6, 12, 25, 30];


//obj參數指定的回調函數
var result = array.map(obj.remainder, obj);
console.log(result);

//輸出 [6, 2, 5, 0]

 

 

3.內置 JavaScript 方法用作回調函數。

var numbers = [9, 16];
var result = numbers.map(Math.sqrt);

console.log(result);
// 輸出: 3,4

4.一個 String  上使用 map 方法獲取字符串中每個字符所對應的 ASCII 碼組成的數組：

var map = Array.prototype.map

　var a = map.call("Hello World", (x) =>{
　　return x.charCodeAt(0);
　})

// a的值為[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

5.易犯錯誤

["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]
//通常上parseInt是接收一個參數，但實際上parseInt有兩個參數，第二個參數是表示進制， map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身.

//應該使用如下的用戶函數returnInt

function returnInt(element){
  return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]

 二、reduce方法

*概述

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終為一個值，是ES5中新增的又一個數組逐項處理方法

1.語法

array .reduce （ callback，[ initialValue] ） 

2.參數

• callback（一個在數組中每一項上調用的函數，接受四個函數：）
  • previousValue（上一次調用回調函數時的返回值，或者初始值）
  • currentValue（當前正在處理的數組元素）
  • currentIndex（當前正在處理的數組元素下標）
  • array（調用reduce()方法的數組）
• initialValue（可選的初始值。作為第一次調用回調函數時傳給previousValue的值）

3.返回值

由回調函數縮減產生的值

4.描述

reduce對數組中存在的每個元素執行一次callback函數，排除數組中的空洞，如果未提供initialValue ，則reduce將從索引1開始執行回調函數，跳過第一個索引。 如果提供了initialValue ，它將從索引0開始。

ie下Array.prototype.reduce為underfine不支持

*reduce方法示例

1.reduce有無傳入initialValue

//不傳initialValue值
var arr = [1,2,3];
arr.reduce(function(pre,cur,index,arr){return pre+cur});
//結果 6
//累加了兩次

// 傳入initialValue 值

var arr = [1,2,3]
arr.reduce(function(pre,cur,index,arr){return pre+cur},10);
//結果16
//累加了3次，初始值為10

2.拼接所有數組

var flattened = [[0, 1], [2, 3], [4, 5]].reduce( ( acc, cur ) => acc.concat(cur));

//輸出[0, 1, 2, 3, 4, 5]

2.使用spread運算符和initialValue來綁定包含在對象數組中的數組

var friends = [ 
{ name: 'Anna', books: ['Bible', 'Harry Potter'], age: 21 }, 
{ name: 'Bob', books: ['War and peace', 'Romeo and Juliet'], age: 26 },
{ name: 'Alice', books: ['The Lord of the Rings', 'The Shining'], age: 18 }
]


// 用reduce將對象數組中的books項相加起來
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ['Alphabet']);

// 輸出allbooks = ['Alphabet', 'Bible', 'Harry Potter', 'War and peace', 'Romeo and Juliet', 'The Lord of the Rings', 'The Shining']

reduceRight 方法（降序）

 reduceRight的語法以及回調函數的規則和reduce方法是一樣的，區別就是在與reduce是升序，即角標從0開始，而reduceRight是降序，即角標從arr.length-1開始。如果有初始值，則從最后一個數開始計算，如果沒有初始值，則previousValue參數是數組中最后一個元素的值，currentValue是數組中倒數第二個元素的值。

function AppendToArray(previousValue, currentValue) {
    return previousValue + currentValue;
}
var word = "retupmoc";
var result = [].reduceRight.call(word, AppendToArray, "the ");
// var result = Array.prototype.reduceRight.call(word, AppendToArray, "the ");
//有初始值，所以從初始值開始拼接

// the computer

 

 

三.foreach方法

*概述

foreach() 數組遍歷方法

1.語法

  arr .forEach（function callback（currentValue，index，array）{    //你的迭代器    } [， thisArg ]）; 

2.參數

callback 函數為每個元素執行，采取三個參數：

　　currentValue

數組中正在處理的當前元素。

　　index

數組中正在處理的當前元素的索引。

　　array

正在應用forEach()的數組。

thisArg Optional 執行callback時使用的值this

3.返回值

返回新創建的數組

4.描述

forEach()以升序對數組中存在的每個元素執行一次所提供的callback 。 對於已刪除或未初始化的索引屬性（即稀疏數組），不會調用它。

使用if或者(return true, false)跳出循環

*foreach方法示例

//打印數組的內容
function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// Notice that index 2 is skipped since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// l輸出結果
// a[0] = 2
// a[1] = 5
// a[3] = 9

//使用thisArg
function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
//使用this執行callback
};

var obj = new Counter();
obj.add([2, 5, 9]);
obj.count
// 3
obj.sum
16

四.filter方法

*概述

filter() 方法使用指定的函數測試所有元素，並創建一個包含所有通過測試的元素的新數組。

1.語法

var new_arrary = arr.filter(callback[, thisArg])

2.參數

callback用來測試數組的每個元素的函數。調用時使用參數 (element, index, array)。
返回true表示保留該元素（通過測試），false則不保留。

thisArg可選。執行  callback 時的用於  this 的值。

3.返回值

返回新創建的數組

4.描述

filter 為數組中的每個元素調用一次 callback 函數，並利用所有使得 callback 返回 true 或 等價於 true 的值 的元素創建一個新數組。

*filter 方法示例

//排除掉小於10的值
var isBigEnough=(element)=> {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]