前言：
學習一門編程語言的基本步驟
（01）了解背景知識
（02）搭建開發環境
（03）語法規范
（04）常量和變數
（05）資料型別
（06）資料型別轉換
（07）運算子
（08）邏輯結構
（09）函式
9.函式——function
1.函式
函式分為系統函式和自定義函式
JS提供的函式—isNaN/parseInt/parseFloat/Number/prompt...
function：功能體，函式（方法），可以接收若干個資料，回傳處理結果，用于封裝反復執行的代碼，
1）創建一個普通函式
function 函式名稱（）{ //名字可以自定義
函式體 //要封裝的代碼
}
//呼叫
函式名稱();
//function普通函式 function say(){ console.log("hello"); console.log("javaScript"); console.log("hello is me"); } say ();//呼叫函式列印上述文字 //練習：封裝計算1-100之間1-100的和 function R(){ for (var i=1,sum=0;i<=100 ;i++ ){ sum+=i;//for回圈運算 } console.log(sum);//最后是列印sum } R();//所以呼叫r之后列印sum，結果為5050
2）創建帶有引數的函式 ——function-param
function 函式名稱（引數串列）{ //引數串列用于接受傳遞的資料
函式體；
}
//呼叫
函式名稱（引數串列）//實際傳遞的資料
引數：創建函式時的引數成為形參，呼叫時引數成為實參，實參會賦值給形參，多個引數之間用逗號隔開，引數可以有0個或者多個，如果引數未被賦值，值為undefined，
//function有引數函式 //計算任意兩個數字相加的和 function add(var1,var2){//引數：形參——引數形式 console.log(var1+var2); } //呼叫 add(2,3);//引數：實參——實際接收的引數 //練習：創建函式，封裝計算1-任意數字之間所有整數的和，呼叫多次 function getsum(b){ for (i=1,sum=0; i<=b;i++ ){ sum+=i; } console.log(sum); } getsum(100); getsum(1004); getsum(10042); //練習：創建函式，封裝計算任意兩個年份之間閏年的個數，呼叫多次 function runnian(year,year2){ for (i=year,count=0;i<=year2 ;i++ ){ if (i%4===0 && i%100!==0 || i%400===0 ){ count++; console.log(i,count); } } } runnian(1980,2000); runnian(1880,2100);
3）創建帶有 回傳值得函式——function-return
function 函式名稱（引數串列）{
函式體；
return 值；//回傳值，函式執行完回傳的結果
}
//呼叫
函式名稱（引數串列）
注意事項： 如果函式中沒有return，或是return 中沒有加任何值，回傳undefined；執行完return后的代碼不會再執行，
return 函式：供外部使用的資料，return后面的資料不會被執行，
//function帶有回傳值的函式 function add(n1,n2){ //回傳n1+n2的結果，用于后期保存，可以理解為如果n1,n2如果有引數傳進來之后就執行n1+n2，然后保存結果，以便于后續使用 return n1+n2; } //把函式的結果保存下來 var a=add(100,140); console.log("總成績為："+a); //練習：創建函式，傳遞任意年份，回傳是否為閏年，如果是回傳true，不是回傳false；列印該年天數 function year(a){ if (a%4===0 && a%100!==0 || a%400===0){ return true; }//else { 可以省略 return false; } function getdays(a){ if(year(a)){//此處解釋為如果year(a)為真就執行以下 return a+"閏年，366天"; }//此處省略else 否則 return a+"不是閏年，365天"; } console.log(getdays(2019));//2019不是閏年，365天 //練習：計算1-任何數字之間所有整數階乘的和 //1!+2!+3!+4!+5! //步驟一：計算任意數字的階乘n-1之間所有整數的乘積 function R(a){ for (var b=1,num=1;b<=a ; b++){ num*=b; } return num; } //R(4); //步驟2：計算1-n之間所有整數的和 function getSum(a){ for(var i=1,sum=0;i<=a;i++){ sum+=R(i); } return sum; } console.log(getSum(5));//153
總結：對比break和return的用法
break用于結束switch陳述句，還可以用于提前結束回圈，
return用于在函式中的回傳值，也可以結束函式后續代碼執行，
2.作用域——scope
變數或者函式的可訪問范圍，分兩種
全域作用域：在全域使用var宣告的變數，可以在任意范圍訪問到，
函式作用域：在函式中使用var宣告的變數，只能在函式內部訪問到，
//作用域——scope //全域作用域下的變數 var a=1;//全域變數，在此處除function fn(){}函式以外就是全域， //函式作用域下使用var宣告的變數 function fn(){ var b=2;//區域變數 console.log(a);//全域函式a可以在任意范圍訪問 console.log(b);//2,區域變數可以在函式作用域內訪問 } console.log(a);//1 fn();//1 呼叫函式，執行函式體代碼， console.log(b);//報錯，b is not defined
注意事項：函式中不使用var宣告的變數，默認是全域變數，可以在函式的外部訪問，不推薦這樣寫，
//注意事項 function fn2(){ c=3;//函式中不使用var宣告的變數默認是全域變數，不建議這么寫，造成全域污染 } console.log(c);//即使c是包裹在函式內部，但是沒有宣告的變數默認是全域變數，所以在函式外部是可以訪問的 fn2();//而呼叫fn2()的時候內部是什么都沒有寫的，相當于沒有任何函式體代碼
1）變數提升
JS程式執行前，會將使用var關鍵字宣告的變數提升到所在作用域的最前邊，但是賦值還是在原來的位置，
//變數提升——全域作用域 var a=1;//宣告變數并賦值 console.log(a); /***************** 實際在程式中應為 ****************/ //變數提升——全域作用域 var a;//宣告提前 a=1;//var a=1中，宣告提前，但是賦值留在原地 console.log(a); //變數提升——函式作用域 function fn(){ console.log(b); var b=2; } fn(); /***************** 實際在程式中應為 ****************/ //變數提升——函式作用域 function fn(){ var b;//變數提升到所在函式作用域前面 console.log(b);//此時只宣告，沒有賦值，所以列印結果是undefined b=2;//賦值留在原地， } fn();//所以呼叫后結果是undefined
2）函式的作用域
函式的可訪問范圍，在全域作用域下創建的函式可以在任意位置訪問；在函式作用域下創建的函式只能在函式內部訪問，
//函式作用域 var n=5,m=7; function fn2(){ //var n;提升到所在作用域最前面，相當于此處有一個宣告變數，但是未賦值，只能在內部訪問這個n console.log(n);//此時列印的n值為undefined，因為在函式作用域中var宣告提前到作用域最前面， var n=8;//此處的相當于正常為 n=8 給前面宣告的變數賦值， console.log(n);//此時列印的n值為8 console.log(m);//函式作用域內沒有m，呼叫全域的m } console.log(n);//此處列印的n值是全域作用域下的n，值為5 fn2();//此處呼叫fn2
3）函式提升
和變數提升一樣，JS程式執行前，會把function關鍵字創建的函式提升到坐在作用域的最前邊，在呼叫的時候才會執行函式提升的代碼，
//函式提升 fn();//先呼叫， function fn(){ console.log(1); } /***************** 實際在程式中應為 ****************/ function fn(){//提升到當前作用域最前端，先創建 console.log(1); } fn();//呼叫3.匿名函式 沒有名稱的函式 function(){ } 1）創建函式 function fn1(){ }——函式宣告
//創建函式——函式宣告 function fn1(){ } var a;var fn2=function(引數){ 函式體 }——函式運算式，變數名就是函式名稱
//創建函式——函式運算式 //變數名稱就是函式名稱 var fn2=function(a,b){ console.log(a+b); } fn2(1,3); //練習：使用函式運算式創建函式，計算任意兩個數字之間所有整數的和 //只能先創建在呼叫，因為不存在提升， var add=function(a,b){ for (i=1,sum=0;i<=b ;i++ ){ sum+=i; } return sum; } console.log(add(3,10));總結：對比函式宣告與函式運算式的區別 函式宣告，創建函式存在提升，可以在任意位置創建，后呼叫， 函式運算式，使用變數創建，只存在變數的提升，不存在函式提升，只能先創建，再呼叫，
2）匿名函式的自呼叫
目的：創建函式作用域包裹起來，防止污染全域，
(function（形參串列）{
//函式體中的變數不能被外部訪問
}）（實參串列）；
//匿名函式 //避免全域污染，把變數放到函式作用域下 (function(){//匿名函式可以自己呼叫自己函式內的資料,匿名函式需要用（）（） var num=2; console.log(num); })(); (function(a,b){//匿名函式可以自己呼叫自己函式內的資料,匿名函式需要用（）（） var num=4; console.log(a+b); })(3,5);
3）回呼函式——callback
把匿名函式以實參的形式傳遞，意味著形參就是傳遞的匿名函式的名稱
function fn（a）{
//呼叫fn的時候，匿名函式賦值給引數a，a就是函式名稱
a() //執行傳遞的匿名函式體中的代碼，
}
//回呼函式 function fn(a){ //實參賦值給形參 //把匿名函式賦值給a，a就是函式名稱 //a=function(){ } a(); } fn(function(){ console.log(1); console.log(2); }); //呼叫函式a，執行傳遞的函式體中的代碼 //練習：創建函式，傳遞兩個引數，實參使用匿名函式的形式傳遞，在匿名函式的函式體中添加若干行代碼；在函式中執行匿名函式中的代碼， function fun(a,b){ a(); b(); }; fun(function(){ console.log(3); },function(){ console.log(4); });
4.全域函式——global
parseInt()/parseFloat()/isNaN()/
encodeURI() 對網址中的漢字進行編碼
decodeURI() 對已經編碼網址進行解碼
isFinite() 判斷一個值是否為有限值，是—>true 不是-false
eval() 可以執行字串中的運算式
//全域函式 //對一個網址中的中文編碼 var str='http://www.jd.com/search?kw=電腦'; var str2=encodeURI(str); console.log(str2);//http://www.jd.com/search?kw=%E7%94%B5%E8%84%91 //對已經編碼的網址進行解碼 var str3=decodeURI(str2); console.log(str3);//http://www.jd.com/search?kw=電腦 //isFinite判斷一個值是否為有限值，是—>true 不是-false //2/0-> Infinity(無窮) 0/2->0 console.log(0/2,2/0);//0 Infinity console.log(isFinite(1/3));//true //eval可以執行字串中的運算式 console.log("1+2");//1+2 console.log(eval("1+2"));//3
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/148158.html
標籤：JavaScript
上一篇：前端開發：mock.js的簡單應用（生成隨機資料，攔截 Ajax 請求）
下一篇：this指標