JavaScript函数

函数是什么

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

函数的定义方法

  • 函数声明
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"]
    原文作者:阿布ccc
    原文地址: https://www.jianshu.com/p/f8a6a7952f75
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞