JavaScript函数

JavaScript函数

一、函数定义

• 用来封装你的重复性代码
• 在python定义函数需要用到关键字def
• 在 js 中使用 function 定义函数

语法：

// 语法 
function [函数名](形参1,形参2,形参3...){
     
    [函数体代码];
}

// 无参函数
function func1() {
     
    console.log('hello world');
}
func1();  // hello world

// 有参函数
function func2(a, b) {
     
    console.log(a, b);
}
func2(1, 2); // 1 2
func2(1, 2, 3, 4, 5, 6, 7, 8, 9);  // 1 2(多了没关系 只要对应的数据)
func2(1); // 1 undefined(少了也没关系, 未定义的会用undefined填补)

二、函数参数

• 参数一般五个以下
• 函数内引用的参数大于传入的参数会以 “undefined” 替代
• 函数内引用的参数小于传入的参数, 那么只会取出相应的参数

function cook(isBad,a,b,c){
      // isbad形式参数
	if (isBad){
     
        alert('做饭');
		
	}else{
     
        alert('点一个外卖');
	}
}
var bad = false;  //刀坏了
cook(bad);  // 点一个外卖

• arguments 参数

函数中的arguments参数: 能够获取到函数接受到的所有的参数

function func3(a, b, c) {
     
    console.log(arguments);
}
func3(1, 2, 3);
// 执行结果:
/*
Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: 1
1: 2
2: 3
*/

// 使用arguments判断传参的确切性
function func4(a, b) {
     
    if (arguments.length < 2) {
     
        console.log('参数传少了!');
    } else if (arguments.length > 2) {
     
        console.log('参数传多了!');
    } else {
     
        console.log('正常执行');
    }
}
func4(1, 2, 3);  // 参数传多了!
func4(1);        // 参数传少了!
func4(1, 2);     // 正常执行

三、函数的返回值与表达式

函数返回值return

• 函数的返回值: 使用的也是等同于python中的关键字return

function func5() {
           // 返回一个值
    return 666
}
console.log(func5());  // 666

function func6(a, b) {
       // 返回多个值, 多个值必须被包含不然就会返回逗号前面的那一个值.
    return a, b
}
console.log(func6(1, 2));  // 2

function func7(a, b) {
     
    return [a, b]
}
console.log(func7(1, 2));  // [1, 2]

函数表达式

var division = function(a,b){
     
	return a/b;
}
// 调用
division(10,2)  // 5

四、匿名函数

• 没有名字的函数
• 函数可以被赋值, 但对于一个匿名函数来说赋予名字没有意义
• 匿名函数一般与 map( ) 之类的函数组合使用

/*function () {
   console.log('哈哈哈');
}*/
let res = function() {
       // 函数还可以被赋值, 对于匿名函数这也赋值虽然没有什么意义, 但是为了然函数能正常执行, 还是赋值一个变量吧~
   console.log('哈哈哈');
};
res();  // 哈哈哈

五、箭头函数

• 箭头函数: 主要用来处理简单的业务逻辑 类似于python中的匿名函
• ES6中允许使用“箭头”（=>）定义函数

// 如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分
var f = () => 5;

// 等同于
var f = function(){
     return 5};

let func8 = v => v*2;  // 箭头左边的是形参 右边的是返回值
console.log(func8(2)); // 4

let func9 = function (v) {
       // 上面与下面作用等同
    return v * 2;
};
console.log(func9(2)); // 4`

六、小结

/*
函数定义: 无参, 有参
函数调用: 无参直接调用. 有参调用传值多余部分不要, 少的部分用undefined提补.
arguments: 可以接受所有参数, 可以通过arguments.length获取传入的参数个数.
函数返回值: 单个返回值.  多个返回值需被包含, 如果不包含只返回逗号前面一个值.
匿名函数: 匿名函数可被赋值.
箭头函数: 
    无参: let a = () => 返回值; 
    有参: let a = 形参 => 返回值; 
*/

七、函数全局变量与局部变量

1.介绍

局部变量：

• 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

• 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

• JavaScript变量的生命期从它们被声明的时间开始。
• 局部变量会在函数运行以后被删除。
• 全局变量会在页面关闭后被删除。

作用域

• 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样

2.示例

跟python查找变量的顺序一致

• 示例1

var city = "BeiJing";
function f() {
     
  var city = "ShangHai";
  function inner(){
     
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  // 输出结果是？  ShenZhen

// ES6推荐使用let
let city = "BeiJing";
function f() {
     
  let city = "ShangHai";
  function inner(){
     
    let city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  // 输出结果是？  ShenZhen

• 示例2

var city = "BeiJing";
function Bar() {
     
  console.log(city);
}
function f() {
     
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？ BeiJing

// ES6推荐使用let
let city = "BeiJing";
function Bar() {
     
  console.log(city);
}
function f() {
     
  let city = "ShangHai";
  return Bar;
}
let ret = f();
ret();  // 打印结果是？ BeiJing

• 示例3：闭包函数

var city = "BeiJing";
function f(){
     
    var city = "ShangHai";
    function inner(){
     
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   // ShangHai

// ES6推荐使用let
let city = "BeiJing";
function f(){
     
    let city = "ShangHai";
    function inner(){
     
        console.log(city);
    }
    return inner;
}
let ret = f();
ret();   // ShangHai