(js基础篇)6.函数

说明：函数式程序的主要"构建模块"。函数使该段代码可以被调用很多次，而不需要写重复的代码。

1.函数声明

• 表达式

    function name(parameters){
    	...body...
    }
  

• 说明 function 关键字首先出现， name 是函数名，括号之间的 参数 列表（用逗号分隔），括号之间的代码是 函数体

• 代码案例

  function showName(name){
    return name;
  }
  

2.局部变量

• 在函数中声明的变量只在该函数内部可见

• 代码案例

  function showName(){
      let name = "google"; // 局部变量
      alert(name); // google
  }
  showName();  
  alert(name);  // 报错，变量是函数的局部变量
  

3.外部变量

• 函数之外的变量，函数也可以访问

• 代码案例

  let status = 0;		
  function showName(){
      let status = 1;
      let name = "google"; // 局部变量
      alert(name); // google
      alert(status); // 1   调用函数内部的变量
  }
  showName();  
  alert(name);  // 报错，变量是函数的局部变量
  alert(status); // 0  全局变量
  

• PS：函数体中，只有在没有局部变量的情况下才会使用外部变量。如果在函数内部声明了同名变量，name函数会遮蔽外部变量。

4.参数

• 我们可以使用参数来将任意数据传递给函数

• 代码案例

    function showMessage(name, age){
    	console.log(`姓名：${name},年龄：${age}`);
    }
    showMessage('james', 32);   // 姓名：james,年龄：32
  

5.默认值

• 如果未提供参数，那么其默认值则是 undefined

• 代码案例

    function showMessage(name, age = 23){
    	console.log(`姓名：${name},年龄：${age}`);
    }
    showMessage('job'); // 姓名：job,年龄：23
  

6.返回值

• 函数可以将一个值返回到调用代码中作为结果。

• 代码案例

    function getMark(){
    	return '123456'
    }
    console.log(getMark()); // 123456
  

• PS：如果函数无返回值，它就会像返回 undefined 一样
  

• 空值的return和return undefined等效

7.函数表达式

• 语法结构

    let joinActivity = function(){
    	console.log('加入活动');
    };
    // 调用
    joinActivity();
  

8.回调函数

• 将函数作为值来传递

• 代码案例

    function infoRegister(name, age, success, fail){
    	if(name&&age){
    		success()
    	}else{
    		fail();
    	}
    }
    // 调用
    infoRegister(
    	'mamba',
    	23,
    	addSuccess,
    	addFail
    );   // 结果返回添加成功
    // 添加成功
    function addSuccess(){
    	console.log('添加成功');
    }
    // 添加失败
    function addFail(){
    	console.log('添加失败');
    }
  

• 说明：infoRegister的两个参数值success和fail就是回调函数，简称回调。

9.匿名函数

• 直接在调用内进行函数声明，没有名字。

• 代码案例

    function infoRegister(name, age, success, fail){
    	if(name&&age){
    		success()
    	}else{
    		fail();
    	}
    }
    // 调用
    infoRegister(
    	'mamba',
    	23,
    	function(){
    		console.log('添加成功');
    	},
    	function(){
    		console.log('添加失败')
    	}
    );
  

10.函数表达式和函数声明区别

• 区别

1.函数声明：在主代码流中声明为单独的语句的函数。函数表达式：在一个表达式中或另一个语法结构中创建的函数
2.函数声明：在函数声明被定义之前，它就可以被调用。 函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。

• 代码案例

1.函数声明

	getName('mamba'); // name
	function getName(name){
		console.log(name);
	}

2.函数表达式

	getName('mamba'); // 报错！！
	let getName = function(name){
		console.log(name);
	}

11.箭头函数

• 表达式 let func = (arg1, arg2, ...argN) => expression

• 说明：函数func 参数arg1...argN 使用参数对右侧的expression求值并返回其结果

• 代码案例

    // 单行
    let sum = (val1, val2) => val1 + val2;
    console.log(1, 2); // 3
    // 多行
    let getTotal = (val1, val2, val3) =>{
    	let total = val1 + val2 + val3;
    	return total;
    }
    console.log(getTotal(1, 2, 3)); // 6