JavaScript快速入門-06-函數

来源:https://www.cnblogs.com/surpassme/archive/2022/08/25/16626049.html
-Advertisement-
Play Games

6 函數 6.1 函數定義 函數可以封裝語句，然後在任何地方、任何時間執行。JavaScript中的函數使用function關鍵字聲明，主要由函數名、函數參數和函數體組成。其基本語法和聲明如下所示： 方式一： function functionName(arg0, arg1,...,argN) { ...


6 函數

6.1 函數定義

    函數可以封裝語句，然後在任何地方、任何時間執行。JavaScript中的函數使用function關鍵字聲明，主要由函數名、函數參數和函數體組成。其基本語法和聲明如下所示：

  • 方式一：
function functionName(arg0, arg1,...,argN) {
	statements
}
  • 方式二：
let variable=function(arg0, arg1,...,argN) {
	statements
}
  • 方式三：
let variable=(arg0, arg1,...,argN) => {
	statements
}
  • 如果函數無返回值，則不需要return語句，如果有返回值，則需要return語句
  • 在碰到return語句後，則立即返回，後續語句不再執行

    示例如下所示：

// 無返回值函數
function hello(name){
    console.log("Hello ,",name);
}
// 存在返回值函數
function sum(number1,number2){
    return number1+number2;
}

// 遇到return語句，提前返回
function testReturn(age){
   return "test return ";
   console.log("age is:",age);

}

// 使用函數表達式定義函數
let diff=function(number1,number2){
    return number1-number2
}

// 箭頭函數
let mul=(number1,number2) =>{
    return number1*number2;
}

hello("Surpass");
console.log("sum is :",sum(7,18));
console.log(testReturn(18));
console.log("diff is:",diff(7,18));
console.log("mul is:",mul(7,18));

輸出結果如下所示：

Hello , Surpass
sum is : 25
test return
diff is: -11
mul is: 126

6.2 箭頭函數

    箭頭函數實例化的函數對象與正式的函數表達式創建的函數對象行為是相同的。任何可以使用函數表達式的地方，都可以使用箭頭函數。需要註意事項如下所示：

  • 1、在僅有一個參數時，可以省略括弧，以下兩種寫法完全等效：
let absValue1=(x)=>{return Math.abs(x);};
let absValue2=x=>{return Math.abs(x);};
  • 2、當沒有參數時，括弧不能省略
let getRandomNumber=()=>{return Math.random()*10;};
  • 3、多個參數也需要括弧
let div=(a,b)=>{
    if(b!=0){
        return a/b;
    }
    else{
        return Infinity;
    }
};
  • 4、大括弧省略註意事項：

箭頭函數也可以不使用大括弧，但這樣會改變函數的行為。使用大括弧就說明包含函數體，即可以在一個函數中包含多條語句，跟常規函數一樣。如果不使用大括弧，則箭頭後面就只能有一行代碼，如一個表達式、賦值操作等。而且，省略大括弧會隱式返回這行代碼的值。

    示例代碼如下所示：

// 以下兩種寫法都有效
let power1=(x)=>{return x**2;};
let power2=x=>x**2;

console.log("power1 is:"+power1(2)+"\npower2 is:"+power2(2));

// 進行賦值操作
let personInfo={};
let setPersonInfoName=(name)=>personInfo.name=name;
setPersonInfoName("Surpass");
console.log("personInfo is:",personInfo);

// 無效寫法
let sum=(number1,number2)=> return number1+number2;

    箭頭函數雖然語法簡潔，但也有很多場合不適用。箭頭函數不能使用arguments、super 和new.target，也不能用作構造函數。此外，箭頭函數也沒有prototype屬性

6.3 函數名

    因為函數名就是指向函數的指針，所以它們跟其他包含對象指針的變數具有相同的行為。即一個函數可以有多個名稱，如下所示：

function sum(number1,number2){
    return number1+number2;
}

console.log("Sum is: ",sum(10,18)); // 28

let refSum=sum;
console.log("refSum is: ",refSum(10,18)); // 28

sum=null;
console.log("refSum is: ",refSum(10,18)); // 28

    以上代碼定義了sum()的函數，並將sum賦值給refSum，使用不帶括弧的函數名會訪問函數指針，並不會執行函數。此時，refSum和sum都指向同一個函數。調用refSum()也可以返回結果。再將sum賦為null之後，就切斷了它與函數之間的關聯，所以refSum()依然可以照常調用。

6.4 函數參數

    在JavaScript中，函數不關心傳入的參數個數、數據類型。其函數參數，在內部表現一個數組，因此函數調用時都會接收到一個數組，函數並不關心數組中包含什麼。

1.定義函數時，聲明有兩個參數，在調用時並不一定就需要傳入兩個參數，也可以傳一個，兩個，三個或不傳，解釋器也並不會報錯。
2.在使用function關鍵字定義（非箭頭）函數，可以在函數內部訪問arguments對象，從中獲取傳入的每個參數值

// 使用參數一
function hello_1(name,message){
    console.log("call function ",hello_1.name);
    return "Hello"+name+message;
}
// 使用參數二：arguments
function hello_2(){
    console.log("call function ",hello_2.name);
    console.log("input para length is:",arguments.length);
    return "Hello"+arguments[0]+arguments[1];
}

console.log(hello_1(" Surpass"," Welcome to Shanghai"));
console.log(hello_2(" Surpass"," Welcome to Shanghai"));

輸出結果如下所示：

call function  hello_1
Hello Surpass Welcome to Shanghai
call function  hello_2
input para length is: 2
Hello Surpass Welcome to Shanghai

    在函數中，arguments對象可以跟參數一起使用，如下所示：

function add(number1,number2){
   let paraLength=arguments.length;
   if (paraLength == 1){
       return number1;
   } else if (paraLength ==2 ){
      return arguments[0]+number2;
   } else {
       let sum=0;
       for(let item of arguments){
          sum+=item;
       }
       return sum;
   }
}

console.log("result is:",add(1));
console.log("result is:",add(1,2));
console.log("result is:",add(1,2,3));

輸出結果如下所示：

result is: 1
result is: 3
result is: 6

如果函數是箭頭函數，則傳入的參數不能再使用arguments關鍵字訪問，而只能通過定義的參數名稱來訪問。

6.5 沒有重載

    JavaScript不像Java/C#等，存在函數重載功能。因為在JavaScript中函數不一定有函數名稱，參數可以是0個或多個，所以自然就沒有重載功能。如果在JavaScript中定義了兩個同名函數，則後面定義的函數會覆蓋前面定義的函數。示例如下所示：

function sum(){
    return arguments[0]+28;
}

function sum(){
    return arguments[0]+128;
}

let result=sum(100);
console.log("result is:",result) // 228

6.6 參數預設值

    在ECMAScript5.1 及以前，預設參數值為undefined，而在ECMAScript 6 之後，則可以支持顯式定義預設參數了，如下所示：

  • 1.給參數傳undefined 相當於沒有傳值，好處是可以利用多個獨立的預設值
function hello(name="Surpass",message=" Welcome"){
    return `Hello  ${name} ${message}`;
}

console.log(hello()); // Hello Surpass  Welcome
console.log(hello("Kevin","Welcome to Shanghai")); // Hello Kevin Welcome to Shanghai
console.log(hello(undefined,"Welcome to Shanghai")); // Hello Surpass Welcome to Shanghai
  • 2.在使用預設參數時，arguments 對象的值不反映參數的預設值，只反映傳給函數的參數,，修改命名參數也不會影響arguments 對象，它始終以調用函數時傳入的值為準
function hello(name="Surpass",message=" Welcome"){
    name="Kevin";
    return `Hello  ${arguments[0]} ${message}`;
}

console.log(hello()); // Hello  undefined  Welcome
console.log(hello("Kevin","Welcome to Shanghai")); // Hello Kevin Welcome to Shanghai
  • 3.預設參數值並不限於原始值或對象類型，也可以使用調用函數返回的值
let name=["Surpass","Kevin","Tina","Jeniffer"];
let city=["Shanghai","Wuhan","Nanjing","Suzhou"];
let nameIndex=0,cityIndex=0;

function getCity(){
    // 每次調用後遞增
    return city[cityIndex++];
}

function getName(){
  return name[nameIndex++];
}

function hello(name=getName(),message=getCity()){
   return `Hello ${name},Welcome ${message}`;
}

for (let i = 0; i < city.length; i++) {
    console.log(hello());
}

輸出結果如下所示：

Hello Surpass,Welcome Shanghai
Hello Kevin,Welcome Wuhan
Hello Tina,Welcome Nanjing
Hello Jeniffer,Welcome Suzhou

函數的預設參數只有在函數被調用時才會求值，不會在函數定義時求值

  • 4.箭頭函數同樣也可以使用預設參數，但在僅有一個參數時，則不能省略括弧
let hello=(name="Surpass")=>{return `Hello ${name}`;}

console.log(hello()); // Hello Surpass 
console.log(hello("Kevin")); // Hello Kevin

6.7 參數擴展和收集

    ECMAScript 6 新增了擴展操作符，使用它可以非常簡潔地操作和組合集合數據。擴展操作符最有用的場景就是函數定義中的參數列表。既可以用於調用函數時傳參，也可以用於定義函數參數。

6.7.1 擴展參數

    先來看看示例代碼，如下所示：

function sum(){
    let sum=0;
    for (let index = 0; index < arguments.length; index++) {
        sum+=arguments[index];
    }
    return sum;
}
let number=[1,2,3,4,5];
console.log("sum is :",sum(number)); // sum is : 01,2,3,4,5

    以上函數功能是希望將傳入的參數進行累加處理。如果不使用擴展操作符，則需要在傳入函數前，將參數進行拆分處理，可以使用apply()方法

console.log("sum is :",sum.apply(null,number)); // sum is : 15

    在ECMAScript 6 中，可以通過擴展操作符實現這種操作。對可迭代對象應用擴展操作符，並將其作為一個參數傳入，可將可迭代對象拆分，並將迭代返回的每個值單獨傳入。示例如下所示：

function sum(){
    let sum=0;
    for (let index = 0; index < arguments.length; index++) {
        sum+=arguments[index];
    }
    return sum;
}

let number=[1,2,3,4,5];
// 使用擴展操作符
console.log("sum is :",sum(...number));  // sum is : 15

    因為數組的長度已知，所以在使用擴展操作符傳參的時候，並不妨礙在其前面或後面再傳其他的值，包括使用擴展操作符傳其他參數，示例如下所示：

console.log("sum is :",sum(-10,...number)); // sum is : 5
console.log("sum is :",sum(-10,...number,95)); // sum is : 100
console.log("sum is :",sum(-10,...number,...[1,2,3,4],10)); // sum is : 25

擴展參數操作符其主要作用是將傳入的參數進行拆分為單個元素。

6.7.2 收集參數

    先來看看示例代碼，如下所示：

function getArray(...numbers){
    return numbers;
}

console.log(getArray(1,2,3)) // [ 1, 2, 3 ]

在定義函數時，可以使用擴展操作符把不同長度的獨立參數組合為一個數組（類似arguments對象的構造機制，收集參數的結果會得到一個數組實例），

    在使用收集參數操作符，註意事項如下所示：

  • 收集參數只能位於命名參數之後（因為收集參數的結果可變，因此僅能做為最後一個參數）
  • 收集參數前面如果有命令參數，則僅會收集其餘的參數
  • 箭頭函數支持收集參數操作符
// 不可以這樣定義
function getArrayA(...value,lastPara){}

// 必須要這樣聲明
function getArrayB(firstPara,...numbers){
    return numbers;
}
// 箭頭函數支持收集參數
let getArrayC=(...values) =>{return values;};

console.log(getArrayB()) // []
console.log(getArrayB(1,2,3)) // [ 2, 3 ]
console.log(getArrayB(1,2,3,4,5,6)) // [2, 3, 4, 5, 6]
console.log(getArrayC(1,2,3,4,5,6)) // [1, 2, 3, 4, 5, 6]

原文地址：https://www.jianshu.com/p/07328d8a31f7

本文同步在微信訂閱號上發佈，如各位小伙伴們喜歡我的文章，也可以關註我的微信訂閱號：woaitest，或掃描下麵的二維碼添加關註：

作者： Surpassme

來源： http://www.jianshu.com/u/28161b7c9995/

         http://www.cnblogs.com/surpassme/

聲明：本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出 原文鏈接 ，否則保留追究法律責任的權利。如有問題，可發送郵件 聯繫。讓我們尊重原創者版權，共同營造良好的IT朋友圈。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記錄--Three.js的簡單使用，Three.js在vue3.x中導入.pcd三維模型文件
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 本文說明 本文主要簡單介紹了，在Vue3.x項目中如何簡單的使用Three.js，導入PCD三維模型文件。 模型顯示 項目實現 第一步 首先創建一個vue3.x，的項目，然後需要先有一個 .pcd三維模型文件，如果有的話，將三維點雲文件放 ...
  • Docsify使用指南，使用Typora+Docsify打造最強、最輕量級的個人&團隊文檔，及免費和開源且低成本文檔工具
    隨著學習知識的積累，我們需要掌握的知識越來越多，這是就有一個問題出現了，如何把我們學習到的知識整理起來，讓我們更方便的去管理和閱讀，同事還想把我們所學習到的知識分析個小伙伴。這是我們就需要一個很方便的味文檔管理工具了，在這裡就給大家介紹一個款線上免費開源的文檔管工具【Docsify-Plus文檔工具 ...
  • 數組中push和concat的區別
    數組中的push和concat push的定義 向數組的末尾添加一個或更多元素，返回值為數組添加元素後的長度。 concat的定義 連接兩個或更多的數組，並返回結果。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。 // push方法 var a = [1,2,3]; console.l ...
  • 有意思的方向裁切 overflow: clip
    本文將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕鬆的對溢出方向進行控制。 overflow: clip 為何 首先，簡單介紹下 overflow: clip 的用法。 overflow: clip: 與 overf ...
  • vue+node跨域解決方案
    跨域解決方法 後端解決 後端需要在介面位置前加入以下代碼就行拉 親測有效 這個是允許所有的功能變數名稱訪問 // 設置跨域 router.all("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...
  • Vue刷新頁面VueX中數據清空了，怎麼重新獲取？
    Vue刷新頁面VueX數據清空了，怎麼重新獲取？ 點擊打開視頻講解更詳細 在vue中刷新頁面後，vuex中的數據就沒有了，這時我們要想使用就要重新獲取數據了， 怎麼在刷新後重新獲取數據呢？？？ 這時我們就可以寫個公共的方法，在公共頁面（可以是根頁面）判斷store倉庫中數據是否為空，若為空的話，就可 ...
  • js有了var為什麼還要有let和const？
    為什麼javascript中有那麼多聲明變數的方式，明明是弱類型的語言，確有三個關鍵字？ 最早的是var，這是es6之前的聲明方式，既然有了var為什麼還要有let 和 const呢？ 原因很簡單，這是因為var有一些問題不夠方便。 首先是作用域，在一個函數內只要聲明一個var，內部可以任意調用，比 ...
  • JavaScriptBOM與DOM
    BOM（Browser Object Model）瀏覽器對象模型 目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 Javascript 由三部分 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類