JavaScript統計數據處理（3） - 函數

JavaScript是一種廣泛使用網頁編程語言，
在瀏覽器中運用JavaScript技術處理統計數據具有最佳的推廣傳播效果

函數(Function)是被設計為執行特定任務的代碼塊。它在可以實現定制運算功能的同時，還帶有一個入口和一個出口。所謂的入口，就是函數所帶的各個參數，我們可以通過這個入口，把函數的參數值代入子程序，供計算機處理；所謂出口，就是指函數的函數值，在計算機求得之后，由此口帶回給調用它的程序。

在程序設計中，常將一些常用的功能模塊編寫成函數，放在函數庫中供用戶選用。善於利用函數，可以減少重復編寫程序段的工作量。

簡而言之，JS函數（function）就是能完成某個常用功能的一小段代碼，而JS方法（method）是通過對象調用的javascript函數。也就是說方法也是函數，只是比較特殊的、屬於指定對象的函數。將函數和對象綁定在一起時，函數就變成了某個對象的方法（method）。

JS中所有事物都是對象，對象是擁有屬性和方法的數據。但是，JS對象又是由函數創建的，JS函數本身也是對象。“方法是函數、對象是函數”，JS中函數的用途和含義有點...

本文從“JS函數（function）就是能完成某個常用功能的一小段代碼”出發，介紹JS函數的幾種常用定義方式。掌握JS函數基本技術后，在統計數據處理過程中，我們將函數理解為某一統計對象（項目）所定制的方法。

導讀：

• 普通函數
• 函數arguments對象
• 匿名函數
• 閉包和遞歸函數
• Promise回調函數

1、普通函數

  [返回]

I、基本語法

function 函數名稱(參數1, 參數2, 參數3) {
    要執行的代碼
    return 返回值
}

JavaScript函數語法解析如下：

• JavaScript函數通過function關鍵詞進行定義，其后是函數名稱和括號()
• 函數名可包含字母、數字、下划線和美元符號
• 圓括號可包括由逗號分隔的參數
• 由函數執行的代碼被放置在花括號{}中
• 函數返回值由return關鍵字指定

II、無參數函數

console.clear();
function test1() {
return "Hello World!";
}
//執行函數返回"Hello World!"，並賦值給變量str
var str = test1();  
console.log(str);

III、有參數函數

//計算任意兩個數的和
function oSum(x, y) {
return x+y;
}
var mySum = oSum(15, 85);  
console.log(mySum);  //100

IV、參數默認值設置

//求和函數中給兩個參數設置默認值
console.clear();
function oSum(x = 50, y = 50) {
return x+y;
}
var mySum = oSum(15, 55);  
console.log(mySum);  //70
mySum = oSum(15);  
console.log(mySum);  //65
mySum = oSum();  
console.log(mySum);  //100

V、參數為函數

console.clear();
function oSum(x, y) {return x+y;}
var mySum = oSum(oSum(45, 75), 100);
console.log(mySum);  //220

VI、對象{}為參數 - 解構賦值默認值

console.clear();
function oSum({x = 10, y = 20}) {
    return x+y;
}
console.log(oSum({}));  //30，這里直接調用oSum()出錯
console.log(oSum({x:100}));  //120
console.log(oSum({y:100}));  //110
console.log(oSum({x:100,y:200}));  //300
console.log(oSum({y:50,x:20}));  //70

VII、對象{}為參數 - 雙重默認值

//代碼容錯更好
console.clear();
function oSum({x = 10, y = 20} = {}) {
    return x+y;
}
console.log(oSum());  //30
console.log(oSum({}));  //30
console.log(oSum({x:100}));  //120
console.log(oSum({y:100}));  //110
console.log(oSum({x:100,y:200}));  //300
console.log(oSum({y:50,x:20}));  //70

2、函數arguments對象

  [返回]

在JavaScript中，參數在函數內部是以一個數組表示的，arguments是函數內部的一個專門用來存儲實參的數組對象。函數arguments的對象在函數運行時用於檢測和重新設置參數。

I、arguments.length - 函數參數數量

console.clear();
function fn(a,b,c){
console.log(arguments.length);  //3
return a+b+c;
}
console.log(fn(1,2,3));         //6

II、arguments[] - 函數輸出和設置

console.clear();
function fn(a,b,c){
console.log(arguments[0]);  //1
console.log(arguments[1]);  //2
console.log(arguments[2]);  //3
arguments[0] = 5;  //重新設置參數a=5
return a+b+c;
}
console.log(fn(1,2,3));    //10

III、arguments轉數組

arguments對象不是一個真正的數組 ，它類似於數組，但除了length屬性和索引元素之外沒有任何數組屬性。例如，它沒有pop方法。但是它可以被轉換為一個真正的數組，轉換為真實的數組后就可以使用完整的數組方法

console.clear();
function fn(a, b, c) {
var arr = Array.from(arguments);  //進行轉數組操作
console.log(arr);  //輸出數組
return a + b + c;
}
console.log(fn(1, 2, 3)); //6

3、匿名函數

  [返回]

匿名函數顧名思義指的是沒有名稱的函數，在實際開發中使用的頻率非常高，是學好JS的重點。

I、變量匿名函數

console.clear();
var fn = function fn(a,b,c=9) {
return a+b+c;
}
console.log(fn(1,2));         //12
console.log(fn(1,2,3));       //6

II、無名稱匿名函數

即在函數聲明時，在后面緊跟參數。Js語法解析此函數時，里面代碼立即執行。

console.clear();
console.log(function(a,b){return a+b;}(2,3));
console.clear();
//加括號執行無匿名函數（輸出"Hello Word!"）
(function (){
    console.log("Hello Word!");
})()
//加括號執行有匿名函數（輸出"Hello Word! lei."）
(function (str){
    console.log("Hello Word!" +" "+ str +".");
})("lei")

注：函數代碼function(a,b){return a+b;}沒指定函數名稱，如果需要執行匿名函數，在匿名函數后面加上一個括號即可立即執行！

III、事件綁定匿名函數

通常我們瀏覽網頁時會通過鼠標或鍵盤輸入信息，例如鼠標點擊某個按鈕稱“click點擊事件”、文本框內文字信息改變了稱“change事件”。總之，用戶所有的鼠標、鍵盤操作都稱為事件，都可以通過JS代碼來捕獲這些事件。

console.clear();
//通過id或取圖標對象
var logo=document.querySelector("#myLogo");
    //給左上角“銀河統計”圖標增加點擊事件
    logo.onclick=function(){
        console.log("歡迎來到銀河統計工作室！");
    }
    logo.onmousemove=function(){
        logo.style.cursor="pointer";
        console.log("鼠標在圖像上面！");
    }
    logo.onmouseout=function(){
        logo.style.cursor="default";
        console.log("鼠標已經離開圖像！");
    }

注：代碼網頁圖像標記，<img id="myLogo" src="###"/>； 網頁HTML元素事件后文中將有介紹

IV、對象綁定匿名函數做為對象的方法

前面我們介紹JS對象時提到，事件是有屬性和方法組成的數據結構，事件的方法可以通過綁定匿名函數的方式建立。

console.clear();
var obj={
    name:"Carolyn",
    age:11,
    fn:function(str){
        return "My name is "+this.name+" Siyu"+". I'm "+this.age+" years old now.";
    }
};
console.log(obj.fn("Siyu")); //My name is Carolyn Siyu. I'm 11 years old now.

注：這里定匿名函數為屬性的返回值

V、匿名函數做為回調函數(callback)

什么是同步，什么是異步?

同步指的是一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面一個任務，以此類推。

異步指的是每一個任務有一個或多個回調函數（callback），前一個任務結束后，不是執行后一個任務，而是執行回調函數，后一個任務則是不等前一個任務結束就執行，所以程序的執行順序與任務的排列順序是不一致的、異步的。

JS是單線程的，它本身不可能是異步的，通過回調函數可以實現異步。JS中最基礎的異步是setTimeout和setInterval函數。

console.clear();
var interval = setInterval(function(){
    console.log("回調函數，每間隔1秒鍾會被執行一次");
},1000);
//點擊銀河統計圖表停止setInterval計算器運行
var logo=document.querySelector("#myLogo");
    logo.onclick=function(){
        console.log("Stop!");
        clearInterval(interval)
    }
setTimeout(function() {
      console.log("張三")
}, 1000 );
setTimeout(function() {
      console.log("李四")
}, 2000 );
setTimeout(function() {
      console.log("王五")
}, 3000 );
//jS最基礎的異步實現
function a() {
      console.log("執行a函數");
      setTimeout(function() {
            console.log("執行a函數的延遲函數");
      },2000);
}
function b() {
      console.log("執行b函數");
}
a();
b();

VI、匿名函數做為返回值

console.clear();
function fn(){
    return function(){
        return "Carolyn";
    }
}
//調用匿名函數
console.log(fn()());  //Carolyn
//或者
var box=fn();
console.log(box());   //Carolyn

4、閉包和遞歸函數

  [返回]

假設，函數A內部聲明了個函數B，函數B引用了函數B之外的變量，並且函數A的返回值為函數B的引用，那么函數B就是閉包函數。

遞歸就是函數自己調用自己，當函數自己時，其自身為閉包函數，參數為域外變量。

console.clear();
function funA(arg1,arg2) {
  var i = 0;  //funA作用域的變量
  function funB(step) {
    i = i + step;  //訪問funB作用域外變量i
    console.log(i)
  }
  return funB;
}
var allShowA = funA(2, 3); //調用的是funA arg1=2，arg2=3
allShowA(1);//調用的是funB step=1,輸出 1
allShowA(3);//調用的是funB setp=3,輸出 4
//累加
console.clear();
function f(num){ 
    if(num<1){ 
        return 0; 
    }else{ 
        return f(num-1)+num; 
    } 
}
console.log(f(9)); //45
//階乘
console.clear();
function f(num){ 
    if(num<1){ 
        return 1; 
    }else{ 
        return f(num-1)*num; 
    } 
}
console.log(f(4));  //24
//在對象中定義遞歸方法
var obj = {  
    num : 5,  
    fac : function (x) {  
        if (x === 1) {  
            return 1;  
        } else {  
            return x * obj.fac(x - 1);  
        }  
    }  
}; 
console.log(obj.fac(5))  /120
//使用arguments.callee
function fact(num){ 
    if (num<=1){ 
        return 1; 
    }else{ 
        return num*arguments.callee(num-1); 
    } 
} 
console.log(fact(4));  //24

5、Promise回調函數

  [返回]

Promise是ES6語言標准中提供的對象。Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。

console.clear();
//基本用法，
var p = new Promise(function(resolve, reject){
setTimeout(function(){
	resolve(console.log("done"));
	}, 1000);
});
//做為對象返回
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}
timeout(1000).then((value) => {  //參數value='done'
  console.log(value);
});
//完整使用方法
function promiseTest(){
let p = new Promise(function(resolve, reject){
	setTimeout(function(){
		var num = Math.random()*100; //生成1-100的隨機數
		console.log('隨機數生成的值：',num)
		if(num>=60){
			resolve(num);
		} else {
			reject('數字太於60了即將執行失敗回調');
		}
	}, 2000);
   })
   return p
}
promiseTest().then(
	function(data){  //data = num
		console.log('resolved成功回調');
		console.log('成功回調接受的值：',data);
	}
)
.catch(function(reason, data){
	console.log('catch到rejected失敗回調');
	console.log('catch失敗執行回調拋出失敗原因：',reason);
});

本文介紹了JS函數的各種用法，結合JS數組、對象以及后面將要介紹的JS條件和循環技術，JS函數在處理統計數據過程中將變得無所不能！

提示：本頁中JS腳本代碼可復制粘貼到JS代碼運行窗口調試體驗； 文本編輯快捷鍵：Ctrl+A - 全選；Ctrl+C - 復制； Ctrl+X - 剪切；Ctrl+V - 粘貼