JavaScript函數

JavaScript函數

文章目錄

• JavaScript函數
• • 1、函數定義
  • 2、函數參數
  • 3、函數的返回值與表達式
  • • • 函數返回值return
      • 函數表達式
  • 4、匿名函數
  • 5、箭頭函數
  • 6、小結
  • 7、函數全局變量與局部變量
  • • 1.介紹
    • 2.示例

1、函數定義

• 用來封裝你的重複性代碼
• 在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填補)

2、函數參數

• 參數通常五個如下
• 函數內引用的參數大於傳入的參數會以 「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);     // 正常執行

3、函數的返回值與表達式

函數返回值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

4、匿名函數

• 沒有名字的函數
• 函數能夠被賦值, 但對於一個匿名函數來講賦予名字沒有意義
• 匿名函數通常與 map( ) 之類的函數組合使用

/*function () { console.log('哈哈哈'); }*/
let res = function() {  // 函數還能夠被賦值, 對於匿名函數這也賦值雖然沒有什麼意義, 可是爲了然函數能正常執行, 仍是賦值一個變量吧~
   console.log('哈哈哈');
};
res();  // 哈哈哈

5、箭頭函數

• 箭頭函數: 主要用來處理簡單的業務邏輯 相似於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`

6、小結

/* 函數定義: 無參, 有參 函數調用: 無參直接調用. 有參調用傳值多餘部分不要, 少的部分用undefined提補. arguments: 能夠接受全部參數, 能夠經過arguments.length獲取傳入的參數個數. 函數返回值: 單個返回值. 多個返回值需被包含, 若是不包含只返回逗號前面一個值. 匿名函數: 匿名函數可被賦值. 箭頭函數: 無參: let a = () => 返回值; 有參: let a = 形參 => 返回值; */

7、函數全局變量與局部變量

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