javascript学习笔记(4)--函数&高阶函数

function foo(x) 
{ 
alert(x); 
}
foo(10);//然后就会在页面上显示一个小弹框，显示10
foo('啦啦啦');//然后就显示了一个啦啦啦

function表明这是一个函数
foo是函数名
x是传入的变量
{}是我们实现函数功能的部分，可以加上return,也可以不加上return,如果加上return的话函数调用结束返回return的结果，否则就返回undefined

当然也可以这样定义,把函数赋值给一个变量
比如说

var foo=function (x) 
{ 
alert(x); 
};

function()是个匿名函数，把他赋值给了foo

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数
传入的参数比定义的少也没有问题

foo(10,123213);//比如说后面的123213没有用，只有前面的10有效
foo();//undefined

这样的话确实是可以，但如果我们想要显示多个弹框的话，怎么确定要输入的变量数量呢

function foo() { 
for (var i=0; i<arguments.length; i++) { 
alert(arguments[i]);
} 
}
foo(10, 20, 30);

JavaScript还有一个关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array，但有时候可以当成是Array来处理

注意一下这个和之前的的区别，刚才第一个foo(x)括号里加了个参数，这个里面就没有参数,利用arguments，你可以获得调用者传入的所有参数

除了这个方法，还有一种，需要用到rest

function foo(a, b, ...rest) { 
alert(a); 
alert(b);
alert(rest);
}
foo(1);//显示3个弹框，一个是1，对应着a,第二个是undefined对应着b,然后还有一个空白的，对应着rest
foo(1,2);//显示3个弹框，一个是1，对应着a,第二个是2,对应着b,然后还有一个空白的，对应着rest
foo(1,2,3);//显示3个弹框，一个是1，对应着a,第二个是2,对应着b,然后还有一个3，对应着rest
foo(1,2,3,4)//显示3个弹框，一个是1，一个是2，一个是3，4

rest 相当于把我们给定的参数后面的其他参数全部当作一个 array来处理

上面介绍的都是普通函数，接下来就是我们的高阶函数
JavaScript的函数其实都指向某个变量,既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数

  function add(x, y, f) { return f(x) + f(y); }
  add(1,-1,Math.abs);//2

当我们调用aadd(1,-1,Math.abs)时，参数x，y和f分别接收1,-1,和函数Math.abs，根据函数定义，我们可以推导计算过程为
f(x) + f(y) ==> Math.abs(1) + Math.abs(-1) ==> 2; return 2;
看起来有点难以理解，但是我们不妨联想到之前用把函数赋值给变量的时候
如果单独的输入一个函数名

function foo(){return 1;}
foo;//function foo()
foo();//1
typeof foo;//"function"
typeof foo();//"number"

通过上面的我们这样理解，其实foo也就是函数的变量名，他指向了函数，他才是真正的函数，而foo()可以理解为是函数执行的结果，比如说这里就返回了1,number,所以我们作为函数的参数要想传入函数，就传入函数变量名就好啦

map可以对array进行整体操作,但不会改变array本身
arr.map(f)传入的参数是f，即函数

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
arr.map(String);//Array(9) [ "1", "2", "3", "4", "5", "6", "7", "8", "9" ]
arr;//只会返回一个结果，但不会改变arr本身Array(9) [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
arr.map(Math.tan);//Array(9) [ 1.5574077246549023, -2.185039863261519, -0.1425465430742778,1.1578212823495777-3.380515006246586, -0.29100619138474915, 0.8714479827243188, -6.799711455220379, -0.45231565944180985 ]
arr;//Array(9) [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

看了执行结果应该也可以明白啦，map实际上是给每个变量都加上了f的效果

reduce(f)
Array的reduce()把一个函数作用在这个Array的每个元素[x1, x2, x3…]上，这个作用在array上的函数也就是f必须接收两个参数的函数，reduce()把结果继续和序列的下一个元素做累次计算，其效果可以理解为
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) ,作用完一次的结果和下一个继续作用,有点像数学里面的多层函数，需要一层一层的计算，不难联想到斐波拉契数列

比方说对一个Array求积，就可以用reduce实现：

var arr = [1, 3, 5, 7, 9]; 
function s(x,u){
  return x*u;
}
arr.reduce(s);//945

当然reduce里传递的函数也可以不用事先定义，直接就在括号里定义就行

var arr = [1, 3, 5, 7, 9]; 
arr.reduce(function(x,y){return x*y;});//945

这也很好理解，因为我们之前定义函数的时候不就是

var f=function(){};

所以直接在参数里写函数和先定义函数效果是一样的

javascript学习笔记(4)--函数&高阶函数

猜你喜欢