JS基础--函数

嗨！我是前端小M~

Function（函数）

 

函数有什么作用呢？

 

1. 重用 (多次调用 提高效率) 
2. 维护(方便维护)
3. 参数（修改参数）
4. 返回值（结果）

函数三要素：功能，参数，返回值

如何创建函数呢？

1.声明式  function fn(){
         }
         fn();           //可进行预解析  可以先调用在声明，也可以先声明在调用

　　

2.表达式 let fn = function(){
        }                //不能预解析
        fn();       

　　

3.构造函数 let foo = new Function(){
          }
          foo();     

　　大家不要忘记调用函数哦，因为函数只有调用才能被执行

匿名函数 function(){} 没有命名的函数，通常用在callback里面

(function(){
 })();  

IIFE立即执行函数

 

函数参数

 

1. 形参（形式参数）
2. 实参 （实际参数）

   let foo = function(a,b){     //(a,b)就是接收实参的形参
      console.log(`我是${a},我喜欢吃${b}`)  //我是张三，我喜欢吃虾条       我是王五，我喜欢吃面条
   }
   let result1 =foo(张三，虾条)；//(张三，虾条)就是传入的实参
   let result2 =foo(王五，面条)；
   

        3.函数返回值 return， 当函数调用完后，重新拿个变量保存，在函数外边能使用作用域内部的结果

            return后面的语句不会被执行（类似break），每次只能返回一个值

Math.random()  数字随机数  [0,1)
let createRandom = function (min, max) {
     if (!max) {
       [min, max] = [0, min]
    }
    let number = parseInt(Math.random() * (max - min + 1) + min);
    return number;  //传入参数，返回结果
}
 createRandom(5,20);   //直接引用　

函数的方法

1）arguments[index]伪数组对象保存实参   //伪数组不能使用数组方式

let fn = function (x) {
    console.log(x);               //a
    console.log(arguments[0]);    //a
    console.log(arguments[1]);    //b
    console.log(arguments[2]);    //1
}
fn("a", "b", 1)

2）默认参数    （有实参就不打印默认参数）

let fn = function(x="nihao",y=12){
    console.log(x);
}
let result1 = fn();       //没实参打印nihao  12
let result2 =fn("buhao",45); //有实参打印buhao 45
当只传入一个实参，其他形参没有接收值时，我们不想打印undefi就设置默认值

3）不定参数||剩余参数||reset参数(...),     接收多余的没有形参的实参，是数组

  不定参数只能写在形参最后
 function fn(x,...reset){
  console.log(x,reset);  //12 [ 'a', 'b', true, 12 ]
}
fn(12,"a","b",true,12)　

4）解构    保证等号(=)左右两边相同的数据类型，把复杂数据类型的值拆开

 1）function fn([a,b]) {
    console.log(a,b);   //1  2 由外传里
    }
    fn([1,2]);
   2）let fn =function(){
    let a=1,b=2;
    return [a,b];
    }
    let [x,y] = fn();
    console.log(x,y);   // 1  2  由里传外
    可用于数组交换

5）箭头函数

1)只有一个return语句，return关键字省略，{}省略
  let fn = ()=>{
  return a-b;       =========>         let fn = ((a-b)=>a-b);
  }
  
2)如果有且仅有一个形参（）省略
 function fn(){};    
 let fn = function(){};    =========>  let fn = str=>{}
3)没有自己的this属性，捕获其所在的上下文的this值

6）callback回调函数

  将函数A当作参数传给函数B，在函数B中执行，函数A就是回调
   （arr (sort,every,some,filter,map,forEach)）
   function fn1(){
    console.log(`callback`);    //callback
}
   function fn2(a){
    a();
    console.log(a);            //Function:fn1
}
   fn2(fn1);

7）递归 （递归函数）（函数直接或间接调用自己，就是递归）

1.function fn(){
    fn();     ===========> 死循环 Maximum call stack size exceeded  所以要设置出口
}
fn();

　　

2.function fn(num) {
    console.log(num);
    if (num === 0) {
        return;
    }
    fn(num-1);      =============> 设置出口 //4 3 2 1 0
}
fn(4);