javascript函数

-

JavaScript函数function

函数基础知识

背景

• 当对多个数据进行相同操作时(比如获取数组的最大值)，会导致代码重复并且修改麻烦。代码结构冗余，结构不清晰。

概念

• 函数本身可以理解为一段代码的容器。一个函数里的代码可以重复的被使用。具有特定的功能和方法；
• 函数也是一个对象
• 函数中可以封装一些功能，有需要时进行调用
• 使用typeof检查一个函数对象时，会返回function

作用

• 对某一功能进行封装，可以重复调用，无需任何修改，将具体的功能封装为多个函数，降低代码的耦合

定义和使用

函数的定义与调用

• 创建一个函数对象

  //可以将要封装的代码以字符串的形式传递给构造函数
  var fun = new Function("console.log('Hello 这是我的第一个函数');");//很少使用
  

• 使用函数声明来创建一个函数

  //语法：
  function  函数名([形参1,形参2....形参n]){
      语句...
  }
  //例
  function fun2(){
      console.log("这是我的第二个函数~~~");
      }
  

• 使用 函数表达式 来创建一个函数

  //语法：
  var  函数名=function([形参1,形参2....形参n]){
      语句...
  }
  //例
   var fun3 = function(){
    console.log("我是匿名函数中封装的代码");
  };   
  

函数的调用

• 封装到函数中的代码不会立即执行

• 函数中的代码会在函数调用时执行

• 当调用函数时，函数中封装的代码会按照顺序执行

• 函数一旦定义，可以多次使用

• 每使用一次函数，就会执行一次函数里的所有代码

  //语法
  函数名();
  

函数的参数

背景

• 基本的函数使用只能解决代码重复问题，但还是不能解决针对不同数据进行操作的问题。通过参数来解决针对不同数据进行相同操作的问题。

概念

• 函数参数是一种数据传递的机制。该机制中参数分为形式参数和实际参数。这两种参数协同一起使用可以解决函数不能针对不同数据进行操作的问题

参数分类

• 形式参数

  • 本质是一个变量，写在函数定义时()中。该变量会在函数被调用时自动创建，该变量的数据是通过实际参数传递过来。
  • 形式参数接收到数据之后，可以在函数的{}里进行使用。这样就完成了将函数外的数据传递到函数中进行处理。

• 实际参数

  • 是指某个具体的数据或已定义的变量。写在函数调用时()中，会在函数调用时将具体的数据传递给形式参数。
  • 当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递

• 形式参数和实际参数之间的关系

  • 在函数调用时，我们会把要处理的数据通过实际参数传递到函数中，被形式参数所接受，那么在函数中就可以通过形式参数来处理传递进去的数据

• 使用

  function 函数名(形式参数1,形式参数2,形式参数n){
  }
  函数名(实际参数1,实际参数2,实际参数n);
  

  • 调用函数时解析器不会检查实参的类型,

  • 所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查

  • 函数的实参可以是任意的数据类型

  • 调用函数时，解析器也不会检查实参的数量

  • 多余实参不会被赋值

  • 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

函数返回值

背景

• 通过参数可以实现处理不同的数据，但没办法直接获取函数处理后的数据。通过返回值来实现在函数调用后能够继续使用函数中处理后的数据

概念

• 返回值是函数允许在调用后通过return语句能够将函数里的某个数据输出到函数外。我们可以定义变量来接收return返回的数据

返回值的使用

使用返回值

1. 在函数中合适的位置书写 return语句。一般是函数的最后一行
2. 在函数调用时用变量来接收

function 函数名(){
    //省略了函数主体代码
    return 要返回的数据;
}
var 变量名  = 函数名():
//例子
function mianji(r){                
return 3.14*r*r;
}
mianji()；
/*调用函数
 相当于使用的函数的返回值*/
 mianji
/* 函数对象
 相当于直接使用函数对象*/

• 在函数调用后用变量来接收返回的数据。

• 在函数中return后的语句都不会执行

• return语句后不跟任何值就相当于返回一个undefined

• 函数中不写return，默认会返回undefined

• return后可以跟任意类型的值

• 需保证任何情况下，函数最终只会执行一个return

立即执行函数

• 立即执行函数

• 函数定义完，立即被调用，这种函数叫做立即执行函数

• 立即执行函数往往只会执行一次

• 语法

  (function(){
   alert("我是一个匿名函数~~~");
   })();
  

箭头函数 ES6

概念

• 箭头函数就是个简写形式的函数表达式，箭头函数相当于匿名函数，所以采用函数表达式的写法。左边是传入函数的参数，右边是函数中执行的语句。
• 箭头函数用 => 符号来定义

语法

var sum =(x,y) =>{return x+y;}
//相当于
var sum = function(x,y){
    return x+y;
}

（1）当要执行的代码块只有一条return语句时，可省略大括号和return关键字：

var sum  = (x,y) => x+y;

（2）当传入的参数只有一个时，可以省略小括号：

var ji = x => x*x
//和上面一样 相当于一个函数 的参数 为 x return x * x 的值

（3）当不需要参数时，使用空的圆括号：

var one = () => 1;

拓展

arguments的使用

• 概念：在javascript中，arguments实际上是当前函数的一个内置对象,所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参；

• 应用：当我们不确定有多少参数传递的时候，可以用arguments来获取

• 只有函数才有arguments内置对象

arguments展示形式是一个伪数组(不是真正意义上的数组)，因此可以进行遍历，具有以下特点：

• 具有length属性
• 按索引方式存储和读取数据
• 不具有数组的push、pop…等方法