在解釋什麼是函數式程式設計之前,我們先要說下什麼是指令式程式設計,它們都屬于程式設計範式的一種。指令式程式設計其實就是一塊一塊的代碼,其中包括了我們要執行的邏輯或者判斷或者一些運算。也就是按部就班的一步一步完成我們所需要的邏輯。而函數式程式設計則是類似于一個函數一個函數的調用。我們來看代碼,更清晰的了解一下函數式程式設計與指令式程式設計的差別。
//這是指令式
var printArray = function (array) {
for (var i = 0; i < array.length; i++) {
console.log(array[i])
}
}
printArray([1,2,3,4,5]);
//函數式
var forEach = function (array,action) {
for (var i = 0; i < array.length; i++) {
action(array[i])
}
}
var logItem = function (item) {
console.log(item)
}
forEach([2,3,4,5,6],logItem)
我們先來看看上面的代碼做了什麼——“周遊數組,然後列印數組的每一項”。在指令式程式設計中,我們一步一步的完成了這句話。先便利數組,然後列印每一項元素。那麼我們再來看函數式程式設計,我們先聲明了兩個函數,一個是周遊數組元素的forEach(這裡的action參數其實就是一個回調函數),一個是列印每一項的logItem。我們把每一步驟的需要操作的邏輯都用函數來區分開,最後再調用函數來執行運算。
再有了ES6之後,我們可以更加友善的用函數式程式設計範式來編寫我們的代碼,下面我們再來看一個例子。
//找出數組中元素最小的值
//代碼十分簡單,我們假設數組的第一個元素是最小的并指派給minVal變量
//周遊除第一項元素以外的所有數組内元素并與minVal比較,如果目前的minVal比array[i]還要大,那麼就把minVal替換成array[i];
//最後傳回結果
var findMinValInArray = function (array) {
var minVal = array[0];
for (var i = 1; i < array.length; i++) {
if(minVal > array[i]) {
minVal = array[i];
}
}
return minVal;
}
console.log(findMinValInArray([7,8,9,5,31,2]));
//那麼我們其實可以更簡單的實作上面的方法,比如Math.min以及結構操作符(...)
const _min = function (array) {
return Math.min(...array);
}
console.log(_min([5,6,9,3,1]));
//我們還可以用ES6的箭頭函數,讓我們的代碼更好看一些。
const min = arr => Math.min(...arr);
console.log(min([2,3,9,4,8]))
上面代碼中Math.min是一個方法,傳回參數中的最小值,參數可以是無限個。那麼還有ES6的
箭頭函數以及
擴充運算符(...)。這裡不做詳細的解釋,附上連接配接位址,大家可以更為詳細的知道什麼是箭頭函數以及擴充運算符。
那麼,接下來我們看看如何利用我們前面已經學過的
數組方法來讓我們的代碼更加“函數式”。
//我們先看一個指令式程式設計的例子
var daysOfWeek = [
{name:"Monday",value:1},
{name:"Tuesday",value:2},
{name:"Wednesday",value:7},
]
var daysOfWeekValues_ = [];
for (var i = 0; i < daysOfWeek.length; i++) {
daysOfWeekValues_.push(daysOfWeek[i].value);
}
//再來看看函數式程式設計的樣子
var daysOfWeekValues = daysOfWeek.map(function (day) {
//這個day其實就是數組中的每一項,具體可以去我前面的文章檢視map的參數
return day.value;
})
console.log(daysOfWeekValues);
//我們還可以使用filter來過濾一個數組的值。
//比如:
//指令式
var positiveNumbers_ = function (array) {
var positive = [];
for (var i = 0; i < array.length; i++) {
if(array[i] >= 0) {
positive.push(array[i]);
}
}
return positive;
}
console.log(positiveNumbers_([-1,2,1,-2]));
//函數式
var positiveNumbers = function (array) {
return array.filter(function (num) {
return num >= 0;
})
}
console.log(positiveNumbers([1,2,-1,-2,-5]));
//我們再來看看reduce函數
//指令式
var sumValues = function (array) {
var total = array[0];
for (var i = 1; i < array.length; i++) {
total += array[i];
}
return total;
}
console.log(sumValues([1,2,3,4,5]));
//函數式
var sum_ = function (array) {
return array.reduce(function (a,b) {
return a + b;
})
}
console.log(sum_([1,2,3,4,5]))
//我們還可以用ES6的方法改進一下
var sum = arr => arr.reduce((a,b) => a + b);
console.log(sum([1,2,3,4,5]))
上面我們看了一些函數式程式設計的例子,代碼都不複雜,很容易了解。是以就沒做詳細的注釋。那麼我們下面再看最後一個有趣的例子。
//我們來用指令式程式設計實作一個二維數組合并為一維數組的方法
var mergeArrays_ = function (arrays) {
var count = arrays.length,
newArray = [],
k = 0;
for (var i = 0; i < count; i++) {
for (var j = 0; j < arrays[i].length; j++) {
newArray[k++] = arrays[i][j];
}
}
return newArray;
}
console.log(mergeArrays_([[1,2,3],[4,5],[6]]));
//我們最後再看看函數式的寫法
var mergeArraysConcat = function (arrays) {
return arrays.reduce(function (p,n) {
return p.concat(n);
})
};
console.log(mergeArraysConcat([[1,2,3],[4,5],[6],[7]]))
//我們再來看看牛逼的方法
const mergeArrays = (...arrays) => [].concat(...arrays);
console.log(mergeArrays([1,2,3],[4,5],[6],[7],[8]));
//這一行代碼需要解釋下。我們來看看(...arrays)會變成什麼
console.log(...[[1,2,3],[4,5],[6],[7],[8]])//一個一個單獨的數組
//然後我們再用一個空數組去合并參數中的每一個單獨的數組就可以了
到這裡我們函數式程式設計的簡單講解就結束了,上面的内容其實不過萬分之一,希望能讓大家對代碼的編寫打開了另一扇窗戶,其實函數式程式設計在我們的實際工作中也是極為有用的。希望大家可以認真對待和學習,最後,附上一個可以學習函數式程式設計的網址:
http://reactivex.io/learnrx/。這是一個外國的練習網站,隻要會簡單的英語看下來應該是沒有問題的。
最後,由于本人水準有限,能力與大神仍相差甚遠,若有錯誤或不明之處,還望大家不吝賜教指正。非常感謝!
一隻想要飛得更高的小菜鳥