JavaScript's Higher-Order Functions

上一篇 Higher-Order Functions 已經介紹了 PHP 部分的寫法

今天就來介紹 JavaScript 部分的寫法,其實是大同小異的

一樣分成四個介紹

Filter

1
2
3
4
5
var ary = [1,3,5,2,4,6];
var tmp = ary.filter(function(o){
return o < 4;
});
console.log(tmp); // [1,3,2]

很簡單的篩選,跟 PHP 沒有任何的不同,算是最簡單的 :D

Map

1
2
3
4
5
6
7
8
9
var ary = [
{key: 'apple', value: 3},
{key: 'orange', value: 5},
{key: 'lemon', value: 6},
];
var tmp = ary.map(function(o) {
return o.key;
});
console.log(tmp); // ["apple", "orange", "lemon"]

回傳部分的內容,也與 PHP 沒有差異,有時候很實用(e.g. 當需要用 indexOf 的時候)

Reduce

1
2
3
4
5
6
7
8
9
10
var ary = [
{key: 'apple', value: 3},
{key: 'orange', value: 5},
{key: 'lemon', value: 6},
];
var tmp = ary.reduce(function(c, o) {
c = typeof c === 'object' ? c.value : c;
return c + o.value;
});
console.log(tmp) // 14

這個就比較複雜一點點,callback function 有四個參數,範例只有用兩個而已

第一個參數是上一次的結果,如果是第一次執行的話,就是 array 第一個元素

第二個參數是目前的元素,如果是第一次執行的話就是 array 第二個元素

第三個參數是陣列索引,由 0 開始

第四個參數是目前的陣列元素

reduce 通常用在加總

Sort

1
2
3
4
5
6
7
8
9
10
11
12
var ary = [
{key: 'apple', value: 10},
{key: 'orange', value: 5},
{key: 'lemon', value: 6},
];
var tmp = ary.sort(function(a,b){
if (a.value === b.value) {
return 0;
}
return a.value < b.value ? 1 : -1;
});
console.log(tmp); // [{key: "apple", value: 10}, {key: "lemon", value: 6}, {key: "orange", value: 5}]

自訂排序,此範例是 value 的大至小排序

以上,雖然與 PHP 略有小小不同,但是大致上是差不多的,所有的 Function Programming 都是大同小異

還不習慣 Higher-Order Functions 的人可以多嘗試看看,可以讓語法更加的精簡

執行的效率也會比較高,使用到的變數也會比較少 :D

另外再補上 some 與 every 的用法

Some

1
2
3
4
5
6
7
8
9
var tmp = [1,3,5].some(function(o){
return o < 10;
});
console.log(tmp); // true
var tmp = [1,3,5].some(function(o){
return o < 5;
});
console.log(tmp); // true

任何一個 return true 就會是 true

Every

1
2
3
4
5
6
7
8
9
var tmp = [1,3,5].every(function(o){
return o < 10;
});
console.log(tmp); // true
var tmp = [1,3,5].every(function(o){
return o < 5;
});
console.log(tmp); // false

全部的元素都要 return true 才會是 true