1.map()

map()方法建立一個新陣列,新陣列中的每個元素是該陣列呼叫提供的函式後的返回的結果.

var newArr = arr.map(function(){})

map()方法在呼叫其中的回撥函式時,傳入了三個引數,第一個引數是當前正在處理的陣列項,第二個引數是當前陣列項的索引值,第三個引數是在其上呼叫map方法的陣列

const arr = [1,2,3,4,5,6]
const newArr = arr.map(function (item){
    return item*2
})
console.log(newArr);//[ 2, 4, 6, 8, 10, 12 ]

2.filter()

filter()方法建立一個新陣列,新陣列中元素是通過所提供的函式的測試後的元素,相當於將原來陣列中符合條件元素過濾到新的數組裡.

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.filter(item => item > 3);//箭頭函式寫法
console.log(newArr);//[4,5,6]

3.reduce()

reduce()方法是對陣列中每一個元素執行一個由編寫者提供的函式,然後將其結果彙總為單個值

具體來看下reduce()中的引數

arr.reduce(callback(previous,current,index,array),initialValue)

callback是我們寫入的回撥函式,它接受四個引數

第一個previous,上一個值,相當於一個累加器,當陣列元素每執行一次回撥函式後,會把值傳入到previous,然後進行下一次的呼叫

第二個current,當前值,是當前陣列中正在處理的元素

第三個index(可選),當前處理元素的下標

第四個array(可選),呼叫這個reduce()方法的陣列

reduce()的第二個引數,initialValue,初始值,是一個可選引數,如果不寫,那麼previous則代表陣列的第一個元素,如果寫了,則把初始值給previous.

注意:如果呼叫reduce()方法的陣列是一個空陣列,並且沒有寫初始值,那麼會報錯.

const arr = [1,2,3,4,5]
let result = arr.reduce((prev,cur,index) => {
    console.log(prev,cur);
    return prev+cur
})
console.log(result);//15是陣列中所有元素的和
/*
這裡主要關注prev的值,prev相當於一個累加器,接收的是每次執行完回撥函式後返回的值。
步驟1.prev=>1 cur=>2  prev+cur=3
步驟2.prev=>prev+cur=3 cur=3 prev+cur=6
步驟3.prev=>prev+cur=6 cur=4 prev+cur=10
步驟4.prev=>prev+cur=10 cur=5 prev+cur=15   
*/   

const str = 'asfadewqqfh';
const obj = str.split('').reduce((item,cart) => {
    console.log(item,cart);
    item[cart] ? item[cart] ++ : item[cart] = 1
    return item
},{})
console.log(obj)//以上結果輸出為{ a: 2, s: 1, f: 2, d: 1, e: 1, w: 1, q: 2, h: 1 }
/*最後輸出的結果是一個物件,key是str中出現過的字母,value是出現的次數,這樣就簡單實現了一個找出字串中出現次數最多的字元。
　　這裡item相當於previous,cart相當於current。
　　注意:這裡我們傳入了第二個引數,即一個空物件{},那麼item第一次參與這個方法的值就是一個空物件。
　　這裡我們給所有第一次出現的元素一個值為1,如果第二次出現就++,所以最後出現次數最多的元素,它的屬性值也最大。
*/

到這裡,map、filter、reduce的基本用法也介紹結束了,當然這個三種方法是完全可以組合在一起用,互相配合來處理陣列會非常方便。