Javascript函数:函数的使用 函数的返回值(1.return 语句2.break ,continue ,return 的区别)arguments 使用 (伪数组) 调用函数 函数的两种声明方式

概念：

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。此时使用JS 中的函数更加方便。

函数：

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

函数的封装

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

一、函数的使用

1. 无参数

语法结构

//1.声明函数
function 函数名() {
  //函数体代码
  }
//2.调用函数
函数名();  

执行思路:

1.调用函数名

2.返回声明函数找到对应的函数名

3.执行函数体

注意：

1.函数名一般用动词

2. 函数不调用自己不执行

2. 有参数

语法结构

      function 函数名(形参1, 形参2...) {
      //函数体代码
      }
      函数名(实参1, 实参2...);
      

执行思路:

1.调用函数名

2.返回声明函数找到对应的函数名

3.实参 将参数传递给 形参，并与形参一 一对应

4.执行函数体

3. 形参与实参个数不同

语法结构

function getSum(num1, num2) {
        console.log(num1 + num2);
    }
1.实参个数 = 形参个数 则正常输出结果
    getSum(1, 2);//输出结果：3
    
2.实参个数 > 形参个数 取形参的个数 
    getSum(1, 2, 3);//输出结果：3
    
3.实参个数 < 形参个数  多余的形参定义为undefined  最终的结果就是 NaN
（形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined ）
    getSum(1); //输出结果：NaN
    
4.尽量让实参的个数和形参相匹配

注意：

1.函数可以带参数也可以不带参数

2. 声明函数时，函数名 括号里面的是形参，形参的默认值是undefined

3. 调用函数时，函数名 括号里面的是实参

4.形参简单理解为：不用声明的变量

二、函数的返回值

return 语句

1. 返回函数

语法结构

function 函数名() {
 return ;
  }
console.log(函数名());

执行思路:

1.首先执行： console.log()输出

2.第二步执行：调用函数名

3.第三步执行：返回声明函数找到对应的函数名

4.第四步执行：函数遇到 return，把 return后面的结果返回给函数的调用者 函数名()

5.第五步： 由 console.log()输出结果
例：

1.
function num() {
 return 123；
  }
console.log(num());//输出结果：123

2.
function cook(str) {
 return str；
  }
console.log(cook(123));//输出结果：123

3. 
function cook(str1,str2) {
 return str1+str2；
  }
console.log(cook(1,2));//输出结果：3

2. 终止函数
   return 之后的代码不被执行

例：

 function cook(str) {
 return str；
 console.log('456')//不被输出
  }
console.log(cook(123));
//输出结果：123

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

例：

 function cook(str1，str2) {
 return str1,str2；//返回str2
  }
console.log(cook(1,2));
//输出结果：2

若想输出 多个值可结合数组

例：

 function cook(str1，str2) {
 return [str1,str2]；
  }
console.log(cook(1,2));
//输出结果：(2)[1,2]  

4. 函数没有return时返回undefined

例：

function cook() {

  }
console.log(cook());//输出结果：undefined

break ,continue ,return 的区别

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

三、arguments 使用

arguments 存储了传递的所有实参

使用条件：不确定有多少个参数传递的时

语法结构

function xxx() {
 console.log(arguments); //输出结果：（3）[1,2,3]
  }
xxx(1,2,3); 

执行思路:

1.执行调用函数名 xxx()

2.返回声明函数找到对应的函数名

3.执行函数体 （由于 arguments 存储了传递的所有实参 所以可以输出所有实参）
例

     1.
      function fn1() {
          console.log(arguments); //输出结果：Arguments(3) [1, 2, 3, ]
          console.log(arguments.length); //输出结果：3
          console.log(arguments[1]); //输出结果：2
      }
      fn1(1, 2, 3);


     2.按照数组的方式遍历arguments//arguments展示形式是一个伪数组，因此可以进行遍历
      function fn() {
          for (var i = 0; i < arguments.length; i++) {
              console.log(arguments[i]);
              //输出结果：
              //1
              //2
              //3
              //4
          }
      }
      fn(1, 2, 3, 4);

注意：

只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments

伪数组

特点：

1.具有 length 属性（数组的长度）

2.按索引方式储存数据

3.不具有数组的 push() , pop() 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

四、调用函数

在一组函数中调用另一组函数( 函数可以相互调用)

例：

      function fn1() {
          console.log(11);
          fn2(); // 在fn1 函数里面调用了 fn2 函数
      }
      function fn2() {
          console.log(22);

      }
       fn1();
      //输出结果
      //11
      //22
        执行思路:
           先执行fn1()，输出11，由于fn1内包含fn2，所以在执行fn2()，输出22

五、函数的两种声明方式

1. 定义函数方式(命名函数)
   利用函数关键字 function 自定义函数方式

语法结构

//1.声明函数
function 函数名() {
  //函数体代码
  }
//2.调用函数
函数名();  

2. 函数表达式方式(匿名函数）
   利用函数表达式方式的写法

语法结构

var   变量名 = function(){
 //函数体代码
 };
 变量名();

例：

var   fu = function(str){
console.log(str);//输出结果：123
};
fu(123);

注意：

1.函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数

2.函数表达式也可以进行传递参数