Introduction to typical high-order function applications in javascript_javascript skills

Reason
Although I have used JavaScript language before, after all, it was for some scattered "code snippets" written to cooperate with the backend, let alone a JavaScript project. I'm honored to have just arrived at the company last month when the project started to be demolished and rewritten. Our team started the architecture and implementation from scratch with a very clear purpose of improving and surpassing the previous version. This is a real JavaScript "project". Of course, our team is not responsible for the server side. This is also when I really started programming in JavaScript full-time. Since I was more interested in formal methods in school, and JavaScript is a functional language, I wanted to use JavaScript to express more functional things.

Several functions
These methods are all new methods for javascript 1.6 arrays. It is a very typical functional function, and of course it is also very practical. The following definition of functional does not come from javascript.

filter: accepts a set Xs (X represents the type, s represents the set), and a predicate. This predicate is a mapping (function) from X to bool. Then filter this set and return the set of elements whose predicate is true. The following is a simple implementation:

Copy code The code is as follows:

function filter(arr,callback ){
var i,out=[];
for(i=0;iif(callback(arr[i]))
out.push (arr[i]);
}
return out;
}

Add a simple test:

Copy code The code is as follows:

var arr = [1,2,3,4,5,6,7,8,9,10];
var even = function(item){
if(typeof item !== "number") return false;
return !(item & 1);
};
var filtered = filter(arr,even);
console.log(filtered);

Result:
2,4,6,8,10
map: accepts a set Xs, A function f, then maps each element in the Xs set using f in order, and returns the set f x1, f x2, f x3... f xn. The implementation is as follows:

Copy code The code is as follows:

function map(arr,callback){
var i,l= arr && arr.length || 0,out = new Array(l);
for(i=0;iout[i]=callback(arr [i]);
return out;
}

Test it:

Copy code The code is as follows:

var arr = [1,2,3,4,5,6,7,8,9,10];
var addTen = function(item) {
return item 10;
};
var mapAdded = map(arr,addTen);
console.log(mapAdded);

Result:
11,12,13,14,15,16,17,18,19,20
In addition, there are three functions, forEach, every and some, which appeared in JavaScript 1.6. But in the process of using it, I still feel that there is still a powerful function missing, which is the fold function (fold). As the saying goes map-reduce, wouldn't it be disappointing to have map without "reduce"? Let’s take a look at this “reduce”.

Implementation of Reduce
The reduce mentioned above is actually the fold function (fold). It accepts a set of Xs and a binary operator f. Then f is inserted between every two adjacent elements in the set. For example, fold plus [1,2,3,4] means 1 2 3 4. To be more precise, a "starting element" is usually required as the second parameter at the beginning of f. For example, fold plus [1,2,3,4] means (1 (2 (3 (4 0))). The following is the implementation:

Copy code The code is as follows:

function fold(arr,callback,b){
var i,x;
if(b) x=b,i= 0;
else x=arr[0],i=1;
for(;ix=callback(arr[i],x);
return x;
}

Test:

Copy code The code is as follows:

var arr = [1,2,3,4,5,6,7,8,9,10];
var plus = function(a,b){
return a b;
};
var foldPlus = fold(arr,plus,0);
console.log(foldPlus);

Result:
55

This function is called reduce in ECMAScript 5, but it is usually called fold in functional expressions. This is a very vivid name.
Summary
In fact, the writing style when implementing these functional functions above is not functional, because the JavaScript language has loop statements. What if there is no loop statement? Leave it to the next exploration.