1. 首頁 > 生活百科 > >

day05-JavaScript02

生活百科day05-JavaSc

JavaScript028.JavaScript函數

  • JavaScript函數介紹
    函數是由事件驅動的，或者當它被調用時 ， 執行的可重復使用的代碼
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函數快速入門</title><script type="text/javascript">//定義一個簡單的函數//如果不調用函數 ， 該函數不會執行//在js中如果要執行函數 ， 有兩種方式：1.主動調用 2.通過一個事件去觸發該函數function hi() {alert("hi~~~");}//hi();主動調用</script></head><body><!--這里表示給按鈕button綁定了一個onclick事件 ， 當用戶點擊了該button，就會觸發hi()函數--><button onclick="hi()">點擊這里</button></body></html>
day05-JavaScript02

文章插圖

day05-JavaScript02

文章插圖
8.1JS函數的定義方式方式一：function關鍵字來定義函數
基本語法：
function 函數名(形參列表){ 函數體 return 表達式}//調用 函數名(實參列表);
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函數使用方式1</title><script type="text/javascript">//1.定義沒有返回值的函數function f1() {alert("f1被調用")}f1();//f1被調用//2.定義有形參的函數//這里的形參不需要指定類型,name的數據類型是由實參決定的function f2(name) {alert("hi" + name);}f2("你好嗎？");//hi你好嗎？f2(800);//hi800//3.定義有形參和返回值的函數,不需要指定返回的類型，返回類型由返回的數據來決定function f3(n1, n2) {return n1 + n2;}alert("f3(\"hi\",200)="+f3("hi",200));//f3("hi",200)=hi200</script></head><body></body></html>方式二：將函數賦給變量
基本語法：
var 函數名=fuction(形參列表){函數體return 表達式}//調用 函數名(實參列表);
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>使用函數的第二種方式</title><script type="text/javascript">//可以理解成f1指向了函數var f1 = function () {alert("老師你好");}console.log(typeof f1);//f1的數據類型是 functionf1();//調用函數-老師你好var f3 = f1;//將f1指向的函數賦給其他變量f3();//老師你好var f2 = function (name) {alert("hi" + name);}f2("小紅帽");//hi小紅帽var f4 = function (n1, n2) {return n1 + n2;}alert(f4(100, 50));//150</script></head><body></body></html>8.2JS函數注意事項和細節
  1. JS中函數的重載會覆蓋掉上一次的定義
  2. 函數的arguments隱形參數(作用域在fuction函數內)，隱形參數是一個對象數組
    • 隱形參數：在function函數中不需要定義 ， 可以直接用來獲取所有參數的變量
    • 隱形參數特別像java的可變參數一樣 public void fun(int ...args)，操作類似數組
    • 如果函數有形參，在傳入實參的時候，仍然按照順序匹配，如果實參個數大于形參個數，就將匹配上的數賦給形參，忽略沒有匹配上的實參 。但是仍然會把所有的實參都賦給arguments
    • 如果形參個數大于實參個數，沒有匹配的形參的值就是undefined
例子1：JS中函數的重載會覆蓋掉上一次的定義
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函數使用的注意事項</title><script type="text/javascript">//1.1js中函數的重載會覆蓋掉上一次的定義function f1() {alert("ok f1")}function f1(name) {alert("hi " + name);}//1.2當調用方法f1()的時候，實際上調用的是f1(name)方法//調用f1(name)時，如果沒有傳入實參，那么這個形參name就是undefinedf1();//hi undefined</script></head><body></body></html>
例子2：隱形參數
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>函數使用的注意事項</title><script type="text/javascript">function f2() {//隱形參數是一個對象數組//遍歷函數的arguments隱形參數//arguments是一個數組//注意：如果希望通過console.log輸出對象的數據 ， 使用逗號,來連接，而不是加號+console.log("arguments=", arguments);//arguments=Arguments { 0: 10, 1: 20, 2: "50", 3: "nihao", … }console.log("arguments長度=", arguments.length);//arguments長度= 4}f2(10, 20, "50", "nihao");//如果函數有形參，在傳入實參的時候，仍然按照順序匹配//如果實參個數>形參個數，就就將匹配上的數賦給形參，忽略沒有匹配上的實參//但是仍然會把所有的實參都賦給argumentsfunction f3(n) {console.log("n=", n)//n= 100console.log("arguments=", arguments)//arguments=Arguments { 0: 100, 1: 300, 2: 788, … }}f3(100, 300, 788);//如果形參個數大于實參個數，沒有匹配的形參的值就是undefinedfunction f4(a, b, c, d) {console.log("d=", d);//d= undefined}f4(100, 200, 300);</script></head><body></body></html>

推薦閱讀