回顧JavaScript基礎——函式

1：宣告函式

//宣告一個函式
/*
	function 函式名(引數1,引數2,...){
		//在內部定義函式體
	}
*/
function put(something){
    console.log("1" + something + "=");
}

function add(a,b){
    return a + b;
}

function testNum(num){
    if(num < 0 ) return;
    return num > 10;
}

2：呼叫函式

//在宣告的函式外部通過 函式名(引數1,引數2,...) 來呼叫函式
function put(something){
    console.log("1" + something + "=");
}
put(2);

function add(a,b){
    return a + b;
}
add(1,2);
console.log(add(1,2));//輸出結果：3
//函式可以賦值給一個變數
var result = add(1,2)
console.log(result);//輸出結果：3
//變數可以作為函式的引數
console.log(add(result,5));//輸出結果：8

function testNum(num){
    if(num < 0 ) return;
    return num > 10;
}
console.log(testNum(-5));//輸出結果：undefined
console.log(testNum(15));//輸出結果：true

3：函式表示式

function add(a,b){
    return a + b;
}
console.log(add);//不加小括號的話，就會輸出函式本身的值，也就是函式自己的定義
//可以將函式的定義賦值給一個變數，然後就可以跟普通函式一樣進行呼叫
var plus = add;
var res = plus(5,6);
console.log(res);//輸出結果：11

//定義一個函式將他賦值給一個變數,這時函式名可以省略不寫
var multiply  = function a(可以省略不寫) (a,b){
    return a * b;
}
console.log(multiply(2,3));//輸出結果：6

4：變數和函式的提升（Hoisting）

//可以在底下宣告這個變數，但是需要在輸出語句前給它賦值
x = 5;
console.log(x);//輸出結果：5
var x;

//可以在函式輸出語句的下方宣告函式
console.log(divide(8,4));//輸出結果：2
function divide(a,b){
    return a  / b
}

5：預設引數

//有預設引數的函式可以不用向他傳遞引數
function greetings(name = "z){
	console.log("你好，" + name);//輸出結果：你好，z
}
greetings();
//向有預設引數的函式重新傳遞一個引數，會將預設值覆蓋
greetings("zhou");//覆蓋預設引數後的輸出結果：你好。zhou

//如果函式存在多個預設引數，且只有第一個引數有預設值，需要向第二個引數傳遞引數，可以將第一個引數傳遞為undefined
function greetingsWithWeather(name = "z", weather){
    console.log("你好，" + name + ",今天是"+weather);//輸出結果：你好，z，今天是晴天
}
greetingsWithWeather(undefined,"晴天");

6：遞迴：函式自己呼叫自己

function sum(n){
	if(n === 1){
        return 1;
    }
    return n  = sum (n-1);
}
console.log(sum(100));//輸出結果：5050

//1 1 2 3 5 8 13 ...,每個數都是前兩個數的和
function fib(num){
    if(num <= 1){
        return 1;
    }return fib(num-1)+fib(num-2);
}
console.log(fib(5));//輸出結果：8

7：arguments函式裡內建的跟陣列類似的引數集合

function log(){
    console.log(arguments[0]);
}
log("abc");//輸出結果：abc

function logs(){
    console.log(arguments[0]);
}
logs("abc","bcd");//輸出結果：abc

function loges(){
    if(let i =0,i<arguments.length;i++){
        console.log(arguments[0]);
	}
}
    
loges("abc","bcd","efg");//輸出結果：依次列印出abc bcd efg

8：作用域，指自定義變數的可以範圍，分區域性作用域（函式內部定義的變數），全域性作用域（在最外層定義的變數）

//全域性作用域的變數
var x = 5
//區域性作用域
function add(a){
    var y = 10;
    console.log(y);//輸出結果：10
    return a + x;
}
console.log(add(8));//輸出結果：13
console.log(y);//輸出結果：undefined。訪問不到函式內部的變數

var num = 100;
function multiply(num){
    return num * 10;
}
console.log(multiply(4));//輸出結果：40

10：var，let（const定義的常量跟let定義的變數一樣）

相同之處：

​ 1）都是用來定義變數的；

​ 2）在函式內部定義的變數，出了函式，就不能再訪問；

​ 3）定義的全域性變數在哪裡都能訪問；

不同之處：

​ 1）除了函式之外，在其他程式碼塊內部定義的變數，出了函式是否能訪問

//在這個程式碼塊外部訪問不到程式碼塊內部定義的let變數，但可以訪問內部定義的var變數
var z = 6;
if(z > 2){
    console.log(z);//輸出結果：6
    var innerA = 17;
    let innerB = 17;
}
console.log(innerA);//輸出結果：17
console.log(innerB);//報錯

for (var i = 0;i < 10;i++){
    console.log(i);//輸出結果：0、1、2、3、4、5、6、7、8、9
}
 console.log(i);//輸出結果：10
for (let i = 0;i < 10;i++){
    console.log(i);//輸出結果：0、1、2、3、4、5、6、7、8、9
}
 console.log(i);//輸出結果：報錯

11：箭頭函式

//var 變數名 = () =>{}
var greeting = () =>{
    console.log("hello");//輸出結果：hello
}
greeting();

//1:var 變數名 = 引數=>{}
var greeting = name =>{
    console.log("hello"+name);//輸出結果：hello z
}
greeting("z");

//2:var 變數名 = (引數1,引數2,...)=>{}

var greetings = (name,age) =>{
    console.log("hello"+name+19);//輸出結果：hello z 19
}
greetings("z",19);

//3:var 變數名 = 引數 => 方法
var num = x => x+1;
console.log(num(2));//輸出結果：3

12：閉包（函式內部再定義函式）

function squareSum(a,b){
    function square(x){
        return x * x;
    }
    return square(a) + square(b)
}
console.log(2,3);//輸出結果：13

function person(){
    let name = "z";
    function getName(){
        return name;
    }
    return getName;
}
var getName = person();
console.log(getName);//輸出內部定義的getName函式
console.log(getName());//輸出結果：z

13：柯里化（curry：把一個接收多個引數的函式，變成一系列接收一個引數的內部函式）

function addThreeNums(a,b,c){
    return a + b + c;
}
console.log(addThreeNums(1,2,3));//輸出結果：6

function addThreeNumsCurry(a){
    return function(b){
        return function(c){
            return a + b + c;
        };
    };
}
console.log(addThreeNumsCurry(1)(2)(3));//輸出結果：6
//如果存在固定的引數和變化的引數，這樣就可以先計算出固定的引數的值，
var fixedTwo = addThreeNumsCurry(1)(2);
console.log(fixedTwo(4));//輸出結果：7
console.log(fixedTwo(5));//輸出結果：8
console.log(fixedTwo(6));//輸出結果：9

14：自執行函式（函式在定義完後，直接呼叫它自己）

自執行內部的程式碼，外部訪問不到，防止被篡改，內部也形成了自己的作用域，防止和外部的變數命名衝突

var num1 = 10;
(function(){
    var num1 = 20;
    console.log(num1);//輸出結果：20
})();
console.log(num1);//輸出結果：10

15：回撥函式

function request(cb){
    console.log("請求資料");//1：先輸出
    cd("success");//呼叫回撥函式
    console.log("請求結束");//4:最後輸出
}

//定義一個回撥函式
function callback(result){
    console.log("執行回撥");//2：其次輸出
    console.log("執行結果是；"+ result)//3：然後輸出
}
request(callback);
/*
//用箭頭函式簡化程式碼
request(result =>{
    console.log("執行回撥");//2：其次輸出
    console.log("執行結果是；"+ result)//3：然後輸出
})
*/