JavaScript函数

2018-06-06 本文已影响20人阿布ccc

函数是什么

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数的定义方法

函数声明

function functionName(parameters) {
  执行的代码
}

函数表达式

命名函数表达式

var test=function abc (){
   console.log("Hello!")
}

匿名函数表达式

var test=function (){
   console.log("Hello!")
}

一般使用匿名函数表达式

函数的参数

形参

function sum(a,b){
  //var a=
  //var b=
  return a+b;
}

函数的形参指的是函数的形式参数，它实际上相当于在函数内部定义变量a、b，只不过a、b的值等于函数被调用时候传过来的实际参数的值。

实参

sum(12,15)

这里调用函数sum时传入的两个参数成为实参。在sum函数被调用后，a、b的值分别等于12、15。
同样我们可以获得函数的实参列表，在函数中通过输出sum.length可以获取实参长度。

形参和实参的一些方法
- 函数有一个内置属性arguments，arguments表现上是一个数组，只具有length这么一个数组属性，里面存放的是传入的实参。可以通过输出arguments来获取传入的形参。
```
function sum(a) {
  for(var i=0;i<arguments.length;i++){
    console.log(arguments[i])
  }
}
sum(11,21,3)    //11,21,3
```
- 函数也可以获取到自己的形参列表
```
function sum(a,b,c,d,e,f) {
  console.log(sum.length)
}
sum(1,2,3)        //6
```
- JavaScript函数参数是不定个数和类型的，也就是你可以定义5个形参而调用时传入10个实参，也可以定义10个形参而在调用时传入5个实参。我们可以通过arguments和sum.length来比较实参形参长度，也可以基于此实现一种类型于EXCEL求和函数的功能。即将传入的实参全部累加。
```
function sum() {
  var result=0;
  for(var i=0;i<arguments.length;i++){
      result+=arguments[i]
  }
  console.log(result)
}
sum(1,2,3,4,5,6,7,8,9)      //45
```

函数的返回值

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction(){
  var x=5;
  return x;
}

整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

JavaScript预编译

JavaScript是解释型语言，即在执行时解释一行执行一行。但是在解释之前，会先扫描一遍，检查有无语法错误等，然后进行预编译，即在执行之前要经过两步。
正是因为预编译的存在，所以函数具有函数声明整体提升的特性，你可以先执行函数再定义函数，同样变量可以声明提升，即变量的声明可以提升到最高，但赋值可以不可以提升。

总结起来就是：
函数声明定义的函数整体提升，函数表达式定义的函数定义提升，赋值不提升；
变量声明提升，赋值不提升，

我们可以通过一个实际例子说明函数的预编译的过程

function fn(a) {
    console.log(a);    //ƒ a(){}        第1个

    var a=123;

    console.log(a);     //123        第2个

    function a(){}

    console.log(a);     //123        第3个

    var b=function(){}

    console.log(b)      //ƒ (){}        第4个

    function d(){}

    console.log(d)      //ƒ d(){}        第5个

}
fn(1)

函数预编译的过程是：
预编译(函数执行前)※
1. 创建AO对象（Active Object）（执行期上下文）
2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
3. 实参形参相统一，实参值赋给形参
4. 查找函数声明，函数名作为AO对象的属性，值为函数引用
在上面的例子中我们可以这样分析：
1、创建AO对象
AO={
}
2、查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
只找形参和变量声明，不找函数声明
AO={
a:undefined,
b:undefined
}
3、实参形参相统一，实参值赋给形参
AO={
a:1,
b:undefined
}
4、查找函数声明，函数名作为AO对象的属性，值为函数引用
AO={
a:function a (){},
b:undefined,
d:function d (){},
}
此时AO对象创建完毕，接下来执行函数，要注意函数是按照语句顺序依次往下执行的：
1、第一个console.log(a)，他所输出的a应该去AO对象中去寻找，为：function a (){},
2、第二个console.log(a)，由于在预编译是a已经被变量声明提升，所以上一句var a=123其实是一个对a进行赋值的过程，即此时AO对象中的a由function a (){}被赋值为123，输出结果为：123
3、第三个console.log(a)，第二个和第三个console.log(a)中间的function a(){}由于在预编译的时候已经被整体提升上去，所以不用考虑，AO对象中的a值不变，所以输出：123
4、第四个console.log(b)，他的上一句var b=function(){}中的var b在预编译的过程中声明已经被提升上去，这句的意思是对AO对象中的b进行赋值，此时AO对象中的b由undefined变为function b(){}，所以这句输出结果为：function b(){}
5、第五个console.log(d) 忽略已经在预编译过程中整体提升的d，即输出AO对象中的d，值为：function d(){}

高阶函数

map
将一个函数作用在Array的每一个元素上

//把Array的所有数字转为字符串：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
console.log(arr);

//Array的所有数字的二次方
var arr=[1,2,3,4,5,6,7,8,9]
var result=arr.map(function (x) {
    return x*x;
 })
console.log(result);        // [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算

//对一个函数求和
var arr=[1,2,3,4,5,6,7,8,9]
var result=arr.reduce(function(x,y){
    return x+y
});
console.log(result);        //45

//要把[1, 3, 5, 7, 9]变换成整数13579
var arr=[1,3,5,7,9];
var result=arr.reduce(function(x,y){
    return x*10+y;
})
console.log(result);        //13579

filter
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素
filter()接收的回调函数，可以有多个参数。通常我们仅使用第一个参数element，表示Array的某个元素。
回调函数还可以接收另外两个参数，表示元素的位置和数组本身：element, index, self

//把一个Array中的空字符串删掉
var arr = ['A', ' b  ', '1','B', null, undefined, 'C', '  '];
var result = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
console.log(result); // ['A', 'B', 'C']

//利用filter，可以巧妙地去除Array的重复元素：
var r1,arr1 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
var r2,arr2=[1,2,3,4,5,6,7,8,1,2,3,4,5,6]
r1 = arr1.filter(function (element, index, self) {
     return self.indexOf(element) === index;    //indexOf()返回某个元素在数组中第一次出现的位置
});
r2 = arr2.filter(function (element, index, self) {
     return self.indexOf(element) === index;
});
console.log(r1);    // ["apple", "strawberry", "banana", "pear", "orange"]
console.log(r2);    // [1, 2, 3, 4, 5, 6, 7, 8]

使用ES6的集合转换方法去重
集合这个数据结构最大的特点就是:集合内部的元素都是唯一的， ES6标准给我们提供了Set集合，利用这个新的数据结构我们可以很容易的实现数组去重
var arr=['apple', 'strawberry',null,undefined, 'banana', 'pear', 'apple', 
'orange',null,undefined, 'orange', 'strawberry'];
function unique(arr){
   return Array.from(new Set(arr));
}
console.log(unique(arr))    //["apple", "strawberry", null, undefined, "banana", "pear", "orange"]