JS函數知識點總結

来源:https://www.cnblogs.com/feixianxing/archive/2022/11/08/javascript-js-function-summary.html
-Advertisement-
Play Games

函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...


函數

基本概念

  • 在JS中,函數實際上是對象,是Function類型的實例。

  • 函數名是指向函數對象的指針。
function sum(num1, num2){
    return num1 + num2;
}
// 檢查sum是否是Function類型的實例
console.log(sum instanceof Function); // true

let anotherSum = sum; // 指向同一個函數

console.log(anotherSum(1,2));   // 3
  • 函數將若幹條語句封裝起來,可以提高代碼的可復用性。

創建函數

函數聲明

語法

function funcName(params){
    // do something...
    return something;
}

函數表達式

語法

let funcName = function(params){
    // do something...
    return something;
}

因為函數本質上是對象,所以可以直接賦值給一個變數。這個變數將指向這個函數,調用函數時直接使用變數名即可。

箭頭函數

語法

let funcName = (params)=>{
    // do something...
    return something;
}

:箭頭函數是ES6新加入的語法。

構造函數

語法

let funcName = new Function("param1","param2",...,"body");

構造函數接收任意多個字元串參數,最後一個是函數體,前面的是函數參數。

:這種寫法不推薦,因為作為JS語句,它首先會被當做常規代碼解析,然後再通過Function構造函數解析形成函數對象,性能較差。


箭頭函數

箭頭函數是ES6新增的語法。任何可以使用函數表達式的地方,都可以使用箭頭函數。

語法格式

  1. 如果沒有參數,要寫括弧:
let getRandom = () => {return Math.random();};
  1. 如果參數只有一個,可以不寫括弧:
let double = x => {return x*2; };
  1. 如果有多個參數,要寫括弧:
let sum = (x, y) => {return x + y; };
  1. 如果函數體有多條語句,則需要大括弧:
let division = (a, b)=>{
    if(b === 0){
        console.error("除數不能為零");
    }else{
        return a/b;
    }
}
  1. 如果函數體只有一條語句,可以不寫大括弧,此時會隱式返回這行代碼的值:
let double = x => x*2;

特點

  • 箭頭函數語法簡潔。

  • 箭頭函數不能使用argumentssuper,也不能用作構造函數,且箭頭函數沒有prototype屬性。


參數列表

JS的函數參數和大多數其他語言不同,JS中的函數參數定義是無關緊要的。

假如定義函數時預設有兩個參數,而調用時傳入了0個、1個或者3個參數,解釋器都不會報錯。

原因是使用function關鍵字定義的函數,可以在函數內部訪問arguments對象,從中獲取傳入的參數。

function testArgs(){
    console.log(arguments);
}

testArgs(1,2,3,4,5,6);

testArgs(1,"Hello",true);

arguments是一個類數組對象,它並不是Array的實例對象,並不是真正的數組,但是它具有類似數組的一些操作,比如可以像數組一樣通過[]訪問元素的值,可以通過length獲取元素個數。

可以通過arguments[0]訪問到傳入的第一個參數,通過arguments.length獲取傳入多少個參數。

箭頭函數的參數

:箭頭函數不能使用arguments,所以箭頭函數需要多少參數需要在定義函數時就寫明。

不存在函數重載

在其他語言比如C++Java中,存在函數重載,即可以存在多個函數名相同的函數,只要它們的參數個數、參數類型不一樣。在調用函數的時候,會根據傳入的參數數據類型,匹配上對應的函數。

顯然,在JS中,函數的參數列表是隨意的(參數個數與參數數據類型都是隨意的),也就不存在函數重載了。

:在JS中,如果有多個函數名相同的函數定義,只有最後一個是有效的,前面的定義都將被覆蓋。

預設參數值

// 返回一個由隨機數組成的數組,預設長度為5
function getRandomArray(length = 5){
    const arr = new Array();
    for(let i=0;i<length;i++){
        arr.push(Math.floor(Math.random()*100));
    }
    return arr;
}

const arr1 = getRandomArray();
console.log(arr1);
//[76, 86, 60, 21, 37]

const arr2 = getRandomArray(10);
console.log(arr2);
//[18, 98, 76, 43, 77, 24, 44, 74, 58, 3]
  • 在函數參數後面使用=就可以為其設置預設值。

函數聲明和函數表達式

  • 函數聲明指通過function functionName(){}來得到一個函數.

  • 函數表達式是指通過function(){}創建一個匿名函數,再講這個匿名函數賦值給一個變數functionName.

區別

函數聲明提升

所有函數聲明在JS引擎執行代碼之前會被提升到代碼頂部,即以下兩段代碼是等價的。

console.log(sum(1,2));    // 不會報錯,因為sum會被提升到頂部
function sum(x,y){
    return x+y;
}
function sum(x,y){
    return x+y;
}
console.log(sum(1,2));

而函數表達式不會被提升:

console.log(sum(1,2));    // 報錯
let sum = function(x,y){
    return x+y;
}

sum作為一個變數:

  • 如果使用var聲明會被提升,但是定義不會被提升,undefined無法被調用;

  • 如果使用let則聲明和定義都不會被提升,一個未聲明的變數顯然無法被調用。


函數作為值

函數名是一個變數,因此函數可以作為函數參數傳遞給另一個函數,並且函數也可以作為一個函數的返回值

回調函數

如果當前無法決定調用哪個函數,可以先把函數作為參數傳遞,等到可以做出明確的選擇時,再回過頭來調用這個函數。這種情況下作為參數傳遞的函數就被叫做回調函數(callback).

典型應用

向後端介面發送網路請求時,一般會附帶上兩個回調函數,一個success函數,一個error函數。在發送網路請求時,是無法確定請求是否發送成功的。只有拿到了返回結果,才能確定執行success函數或error函數。


閉包

閉包是指引用了另一個函數作用域中變數的函數。通常在嵌套函數中實現。

// 獲取累加器
function getAccumulator(){
    let num = 0;    // 內部屬性
    return function(){    // 返回一個函數
        return num++;
    }
}

// 調用函數獲取累加器
let add = getAccumulator();
console.log(add());    // 0
console.log(add());    // 1
console.log(add());    // 2    
console.log(add());    // 3
console.log(add());    // 4

在函數getAccumulator的作用域中,有一個num屬性,而返回的函數中,引用了這個num. 即返回的這個函數引用了另一個函數作用域中的變數.

num這個變數和add函數綁定在了一起,當getAccumulator執行結束後也不會被回收,並且無法被直接訪問。


立即調用的函數

立即調用的函數表達式(IIFE, Immediately Invoked Function Expression)

ES5沒有塊級作用域,可以使用立即調用的函數表達式來模擬塊級作用域。

var funcName = function(){...};
funcName();

使用立即調用的函數表達式可以省略一個不必要的函數名。

(function(){
...
})();

ES6之後,IIFE就沒有那麼必要了,因為可以很方便地使用塊級作用域。


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

-Advertisement-
Play Games
更多相關文章
  • 蘋果電腦哪款系統活動監控器好用呢?iStat Menus for mac是一款Mac OS電腦硬體信息監控軟體,提供的信息包括 CPU 使用情形、記憶體用量、硬碟使用情形、網路傳輸、機器溫度、風扇轉速等等。在新版本中,您還可以自由的對iStat Menus顯示的信息進行設置,將您關註的系統信息放在頂部 ...
  • redis集群搭建 一、安裝redis 源碼安裝: 1.下載源碼包: wget http://download.redis.io/releases/redis-6.0.7.tar.gz 2.解壓到指定目錄下: tar xf redis-6.0.7.tar.gz -C /usr/local/ 二、編譯 ...
  • 背景 建議至少提交兩份測試報告(從一、二選擇兩個測試case) 一、任選一(建議結合業務選擇,簡單線上業務選tpcb,複雜線上業務選tpcc,偏分析業務選tpch) tpcc tpcb tpch 二、任選一(建議結合業務場景選擇) 並行計算,選擇 RDS PG 12 進行測試 GIS,選擇 RDS ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:YeJinrong/葉金榮 意外發現USER()和CURRENT_USER()的一點不同。 某次在用 ALTER USER 想要修改賬戶密碼時,發 ...
  • 2022年11月7日,Taier1.3版本正式發佈! Taier 是一個大數據分散式可視化的DAG任務調度系統,旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦 ...
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...