javaScript函数

目录

函数的概念

函数的使用

声明函数：

调用函数：

函数的封装

函数的参数

函数的返回值

break ,continue ,return 的区别

arguments的使用

函数可以调用另外一个函数

函数的两种声明方式

自定义函数方式（命名函数）

函数表达式方式（匿名函数）

作业：

---

函数的概念

在实际敲代码中，可能会遇到逻辑一样，但是几个值不一样，这个时候可以使用函数，使不用重复敲同一种逻辑。

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

函数在使用时分为两步：声明函数和调用函数

声明函数：

function 函数名() {
    // 函数体
}

function 关键字用来声明函数

函数命名：通常为了实现某个功能才定义的，通常命名为动词：如getSum。

调用函数：

函数名(); // 调用函数，执行函数体代码

注意：函数本身不会执行代码，调用了才会执行函数体代码。

函数的封装

概念：函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

案例： 计算1-100之间值的函数

// 声明函数
function getSum(){
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

函数的参数

        在声明函数时，后面括号可以传入参数，这些参数被称为形参。而在调用函数时，也需要传入相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数 函数定义时 传递的参数
实参	实际上的参数 函数调用时 传递的参数 实参是传递给形参的

参数的作用：在函数内部某些值不确定，可以在调用函数时传递不同的值进去。

// 带参数的函数声明
function 函数名 (形参,形参,形参...) { // 定义任意多的参数,多个参数之间逗号分隔
    // 函数体
}

// 带参数的函数调用
函数名 (实参1,实参2,实参3...);

案例：利用函数求任意两个数的和

function gwtSum(num1,num2) {
    console.log(num + num2);
}

getSum(1,5); // 6
getSum(5,5); // 10

函数形参和实参个数不匹配问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

function sum (num1,num2){
    console.log(num1 + num2);
}

sum(100,200); // 输出正确结果
sum(100,200,500,100); // 只取到形参的个数
sum(200); // 多的形参定义为undefined，结果为NaN

注意：在JS中，形参的默认值是undefined。

函数的返回值

        有时候希望函数直接将值返回给调用者，可以使用return语句实现

语法结构：

// 声明函数
function 函数名(){
    ...
    return 需要返回的值;
}

// 调用函数

函数名(); // 调用函数就可以得到函数体内return后面的值 

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

如果函数没有return，返回的值是undefined。

案例：利用函数求任意两个数的最大值

function getSum(num1,num2){
    return num1 > num2 ? num1 : num2;
}

getSum(2,5); // 5

利用函数求任意一个数组中最大值

    //定义一个获取数组中最大数的函数
    function getMaxFromArr(numArray) {
      var maxNum = 0;
      for (var i = 0; i < numArray.length; i++) {
        if (numArray[i] > maxNum) {
          maxNum = numArray[i];
        } 
      }
      return maxNum;
    }
    var arrNum = [5, 2, 105, 101, 67, 557];
    console.log(getMaxFromArr(arrNum));

return语句之后的代码不会执行：

function add(num1，num2){
    //函数体
    return num1 + num2; // 注意：return 后的代码不执行
    alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 27

return只能返回一个值(如果传入多个实参，返回最后一个)：

function add(num1，num2){
    //函数体
    return num1，num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）

continue ：跳出本次循环，继续执行下次循环（如 for、while）

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

简述：当不确定有多少个参数传递时，可以使用arguments来获取。JS中，arguments实际上是当前函数一个内置对象。所有函数都内置了一个，arguments对象存储了传递过来的实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有length属性

按索引方式存储数据

不具有数组的push、pop等方法

案例：利用函数求任意个数的最大值

    function getMax() {
      var max = arguments[0];
      for (var i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
          max = arguments[i];
        }
      }
      return max
    }
    console.log(getMax(1, 5, 8, 4, 55, 10));

函数可以调用另外一个函数

        每个函数都是独立的代码块，用于完成特殊任务，所以经常会用到函数相互调用的情况

function fn1() {
  console.log(111);
  fn2();
  console.log('fn1');
}
function fn2() {
  console.log(222);
  console.log('fn2');
}
fn1();

函数的两种声明方式

自定义函数方式（命名函数）

语法结构：

// 声明定义方式
function fn() {...}
// 调用  
fn();  

因为有名字，所以也被称为命名函数。

调用函数的代码可以放在函数的前面或后面

函数表达式方式（匿名函数）

语法结构：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也叫匿名函数。

这个fn存储的是一个函数。

函数表达式方式原理跟声明变量方式是一样的。

函数调用的代码必须放在函数体后面

作业：

1、写一个函数，实现可以反转任意数组

代码：

   function getInvertArray(Arr) {
      var newArr = [];
      for (var i = Arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = Arr[i];
      }
      return newArr;
    }

    var arr = ['第一', '第二', '第三'];
    console.log(getInvertArray(arr));

2、写一个函数，实现对数字数组的排序（封装冒泡排序）

代码：

    function getArraySorting(Arr) {
      for (var i = 0; i < Arr.length - 1; i++) {
        for (var j = 0; j < Arr.length - i - 1; j++) {
          // 前一个元素和后一个元素比较
          if (Arr[j] > Arr[j + 1]) {
            // 交换两个变量
            var temp = Arr[j];
            Arr[j] = Arr[j + 1];
            Arr[j + 1] = temp;
          }
        }
      }

      return Arr;
    }

    var arr2 = [5, 4, 3, 2, 1];
    console.log(getArraySorting(arr2));

3、做一个简易计算器

如图：

代码：

    var num = parseInt(prompt('欢迎使用简易计算器：' + '\n' + '1.加法运算' + '\n' + '2.减法运算' + '\n' + '3.乘法运算' + '\n' + '4.除法运算' + '\n' + '5.退出' + '\n' + '请输入您的选项'))

    function ifNum() {
      if (num != 5) {
        var num1 = parseInt(prompt('请输入第一个数字'));
        var num2 = parseInt(prompt('请输入第二个数字'));
        var result;
      }
      if (num === 1) {
        result = num1 + num2;
      } else if (num === 2) {
        result = num1 - num2;
      } else if (num === 3) {
        result = num1 * num2;
      } else if (num === 4) {
        result = num1 / num2;
      } 
      alert(num !== 5 ? '结果是：' + result : '退出');
    }

    ifNum();