JS函数简介及用法

函数

1.函数的概念

​ 在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的操作，但是比较具有局限性，此时我们就可以使用JS中的函数

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

2.函数的使用

// 函数使用分为两步： 声明函数 和 调用函数
// 1.声明函数
	function 函数名() {
        // 函数体
    }
// (1) function 声明函数的关键字 全部小写
// (2) 函数时做某件事情，函数名一般是动词
// (3) 函数不调用自己不执行
// 2.调用函数
  函数名();
// 调用函数的时候千万不要忘记加小括号

• 调用的时候千万不要忘记添加小括号
• 口诀：函数不调用，自己不执行。

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

（1）函数的封装

• 函数的封装是把一个或者多个功能通过==函数的方式封装起来==，对外只提供一个简单的函数接口
• 简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）

// 案例一 利用函数计算1-100之间的累加和
// 1.声明函数
	function getSum(num1, num2) {
        var sum = 0;
        for (var i = num1; num1 <= num2; i++) {
            sum += i;
        }
        console.log(sum);
    }
// 2.调用函数
	getSum(1, 100);

3.函数的参数

// 1.函数可以执行重复相同的代码
	function cook() {
        console.log('酸辣土豆丝');
    }
	cook();
// 2.我们可以利用函数的参数实现函数重复不同的代码
	function 函数名(形参1, 形参2, ...) {  // 在声明函数的小括号里面是 形参 （形式上的参数）
        
    }
	函数名(实参1, 实参2, ...); // 在函数调用的小括号里面是实参（实际的参数）
// 3.形参和实参的执行过程
    function cook(aru) {  // 形参时接收实参的  aru = '酸辣土豆丝' 形参类似于一个变量
        console.log(aru);
    }
 	cook('酸辣土豆丝');
	cook('大肘子');
// 4.函数的参数可以有，也可以有参数不限的

​ 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为==形参，而在调用该函数时==，同样也需要传递相应的参数，这些参数被称为==实参==。

参数	说明
形参	形式上的参数，函数定义的时候 传递的参数 当前并不知道是什么
实参	实际上的参数，函数调用的时候传递的参数，实参是传递给形象的

参数的作用：在==函数内部某些值不能固定，我们可以通过参数调用函数时传递==不同的值进去。

// 案例二 1.利用函数求任意两个数的和
	function getSum(num1, num2) {
        console.log(num1 + num2)
    }
	getSum(1,3);
// 2.利用函数求任意两个数之间的和
	function getSums(start,end) {
        var sum = 0;
        for (var i = start; i <= end; i++) {
            sum += i;
        }
        console.log(sum);
    
// 3.注意点
// （1） 多个参数之间逗号隔开
// （2） 形参可以看做是不用声明的变量

（1）函数形参实参个数不匹配问题

// 函数形参实参个数匹配
	function getSum(num1, num2) {
        console.log(num1 + num2);
    }
// 1.如果实参的个数和形参的个数一致 则正常输出结果
	getSum(1, 2);
// 2.如果实参的个数多于形参的个数  会取到形参的个数
	getSum(1, 2, 3);
// 3.如果实参的个数小于形参的个数 多余的形参定义为undefined 最终结果就是 NaN
// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接收值 结果是undefined
	getSum(1);  //  NaN

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

（2）小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔
• 形参的个数和实参个数不匹配，但是结果不可预计，我们尽量匹配

4.函数的返回值

（1）return 语句

有的时候我们希望函数将返回值调用给调用者，此时通过 return 语句就可以实现

// 1.函数的返回值格式
	function 函数名() {
        return 需要返回的结果;
    }
    函数名();
// (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名(); 通过return 实现的
// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
// 2.代码验证
	function getResult() {
        return 666;
    }
    getResult();  // getResult() = 666;
	console.log(getResult());
// 3.求任意两个数的和
	function getSum(num1, num2) {
        return num1 + num2;
    }
	console.log(getSum(1, 2));

// 案例一  利用函数求两个数的最大值
	function getMax(num1, num2) {
		//if (num1 > num2) {
		//	return num1;
		//} else {
		//	return num2;
		//}
        // 三元表达式
        return num1 > num2 ? num1 : num2;
	}
	console.log(getMax(1, 3));

// 案例二 利用函数求任意一个数组中的最大值
	function getArrMax(arr) {
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
	// getArrMax([5, 2, 99, 101， 67， 77])； //实参是一个数组
	// 在我们实际开发里面，我们经常用一个变量来接收 函数的返回结果 使用更简单
	var re = getArrMax([5, 2, 99, 101， 67， 77]);
	console.log(re);

（2）return 终止函数

函数返回值注意事项

// 1.return 终止函数
	function getSum(num1, num2) {
        return num1 + num2;  // 后面的代码不执行
        alert('我是不会被执行的');
    }
	console.log(getSum(1, 2));

return 只能返回一个值，如果用逗号隔开多个值，以最后一个为准。

// 2. return 只能返回一个值
	function fn(num1, num2) {
        return num1, num2;  // 返回的结果是最后一个值
    }
	console.log(fn(1, 2));

// 3. 我们求任意两个数的 加减乘除数结果
	function getResult(num1, num2) {
        return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
    }
	var re = getResult(1, 2);
	console.log(re);

（3）函数没有 return 返回 undefined

// 4.我们的函数如果有return 则返回的是 return 后面的值，如果函数没有 return 则返回 undefined
	function fun1() {
        return 666;
    }
	console.log(fun1()); // 返回 666


	function fun2() {
        
    }
	console.log(fun2());  // 返回 undefined

（4）break,continue,return 的区别

• break：结束当前的循环（如for、while）
• continue：跳出本次循环，继续执行下次循环(如for、while)
• return：不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前的函数体内的代码

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScript中，arguments实际上他是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

// arguments 的使用
function fn() {
    console.log(arguments);  // 里面存储了所有传递过来的实参
}
fn(1, 2, 3);

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

• 具有length属性
• 按索引方式存储数据
• 不具有数组的push，pop等方法

// 案例1 翻转数组
// 利用函数翻转任意数组 reverse 翻转
  function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
      newArr[newArr.length] = arr[i];
    }
    return newArr;
  }
  var re = reverse([1, 2, 3, 4, 5]);
  console.log(re);

// 案例2 冒泡排序
 function sort(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 re = sort([1, 4, 2, 9]);
  console.log(re);

// 案例3 判断闰年案例
function isRunYear(year) {
    // 如果是闰年返回 true  否则 返回 false
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      flag = true;
    }
    return flag;
  }
  console.log(isRunYear(2000));
  console.log(isRunYear(1999));

6.函数可以调用另一个函数

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

// 案例 判断当前年份2月份天数
 function monthDays() {
    var year = prompt('请你输入年份');
    if (isRunYear(year)) {
      alert('当前年份2月份有29天')
    } else {
      alert('当前年份2月份有28天')
    }
  }
  monthDays();

  function isRunYear(year) {
    // 如果是闰年返回 true  否则 返回 false
    var flag = false;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      flag = true;
    }
    return flag;
  }

7.函数的两种声明方式

// 函数的2种声明方式
// 1.利用函数关键字自定义函数（命名函数）
	function fn() {
        
    }
	fn();
// 2.函数表达式
	// var 变量名 = function() {};
    var fun = function() {
        console.log('我是函数表达式');
    };
	fun();
// (1) fun是变量名 不是函数名
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数