JavaScript 函數(shù)語法詳解

更新時間：2021年09月29日 16:22:27 作者：L建豪忄YH

本文結(jié)合前面發(fā)布的文章，詳細介紹了javascript的函數(shù)語法，非常的詳盡，非常的實用，這里推薦給大家，是篇不可多得的文章

一、普通函數(shù)

js的函數(shù)創(chuàng)建比較特殊，有很多種方式，最簡單的一種和c語言類似。

特點：

函數(shù)名字可以除了字母、數(shù)字、下劃線外，還可以存在 “$” 字符。

在js中，函數(shù)名就是一個儲存函數(shù)對象的變量。使用 typeof 關(guān)鍵字可以查看函數(shù)類型。（這個理念和python類似，可以用其他變量接手這個函數(shù)）

函數(shù)形參定義時不需要寫關(guān)鍵字：var、let、const。應(yīng)該默認就是局部可修改變量。

JS 語法中不檢查輸入?yún)?shù)。這意味著，輸入?yún)?shù)可少可多。少了輸入undefined代替，多了自動忽略。

同上理，JS 也不拘束是否有返回值，統(tǒng)一都有返回值。如果沒有寫明返回值，則統(tǒng)一返回無效值。

// 1. Function Definition
function printHello_1$_(name_0) 
{
    // execution
    console.log("Hello World!" + name_0);
}
console.log(typeof printHello_1$_);
// 2. Function Invocation
printHello_1$_(); 
// 3. Function Naming
// 4. Function Parameters
// 5. Function Return

js還支持匿名函數(shù)，就是不寫函數(shù)名。python中也有類似，在python學(xué)習(xí)筆記中也有記錄：lambda匿名函數(shù)。

// 6. 函數(shù)還可以沒名字，直接這樣創(chuàng)建。
let him = function(){
    console.log("him");
}
him() // 側(cè)面反映了，名字其實就是一個變量名。
// 8. 函數(shù)名字本身不支持傳遞賦值，但是變量可以。
// him = printHello_1(); // 報錯（有點類似數(shù)組定義后就不能再賦值？）
let add = him;
add();
// 7. 該變量還是可以賦值其他內(nèi)容。
him = 6;
console.log(him) // 輸出數(shù)字 6

二、箭頭函數(shù)

js中箭頭函數(shù)就是“名副其實”的匿名函數(shù)了，可快速創(chuàng)建嵌套函數(shù)功能體（自創(chuàng)用詞）……也更加貼合python的lambda匿名函數(shù)用法。

~~在看實戰(zhàn)案例時全是這種匿名函數(shù)的創(chuàng)建和傳參，第一次接觸懵逼得不要不要的~~。下面的代碼為了方便看效果，我會把用不到的部分改成假，屏蔽運行。你問為什么不直接注釋？因為想鍛煉用法。

使用方法看似簡單，前面括號就是用到的參數(shù)，箭頭后面緊跟代碼。如果是單行的簡易代碼可不用寫括號，單行還自帶隱式返回計算值。

if (false)
{
    const add = (a, b) => a + b; // 類似直接創(chuàng)建函數(shù)，并且將該函數(shù)丟給一個變量調(diào)用。
    console.log(add(1,3)); // 沒有寫返回值，還隱式返回了計算值    
}
if (false)
{
    let add = (a, b) => a + b;
    console.log(add(1,3)); // 打印 4
    const add_0 = add; // 可以正常的變量賦值替換
    add = 5; // 可以看出本質(zhì)還是變量，如果定義是使用可變類型，則可以改變
    console.log(add); // 打印 5
    console.log(add_0(2, 4)); // 打印 6
}
if (false)
{
    console.log(add_0(10, 4)); // const 變量類型不可以跨作用域
}

如果是需要換行，就需要用大括弧。常用。

if (false)
{
    const add = (a, b) => 
    {
        return a + b;
    }
    console.log(add(1,3));  // 有返回值，表示如果用了大括號可以表示換行但是不會有隱式返回。而單行總是會有隱式返回的。
}

三·、數(shù)據(jù)包 JSON

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript (歐洲計算機協(xié)會制定的js規(guī)范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率?！窘刂涟倏啤?/p>

在之前學(xué)習(xí)神經(jīng)網(wǎng)絡(luò)和ros時也有接觸這類數(shù)據(jù)包，一個小小的后綴.json文件，裝著一堆參數(shù)或數(shù)據(jù)集。從格式上看，很像字典，有鍵和值成對。如果展開圖形化，其實是一個列表，有表頭和數(shù)據(jù)。
js提供Object類來創(chuàng)建json對象。（其實就是創(chuàng)建對象，下一節(jié)再細說）

// 例子1
if (false)
{
    const book = new Object({title : "1984", author : "George Orwell"}) // 創(chuàng)建 JSON 對象
    console.log("\n ---------")
    console.log(typeof book) // 查看類型，確實是對象
    console.log(book) // 能正常打印
}
// 例子2（下一節(jié)細說，對象的知識點）
if (false)
{
    const book = ({title : "1984", author : "George Orwell"}) // 就算不加關(guān)鍵詞 Object 也能有相同效果。
    console.log("\n ---------")
    console.log(typeof book)
    console.log(book)
}
// 例子3
if (false)
{
    const book = [
        {title : "1984", author : "George Orwella"},
        {title : "1985", author : "George Orwellb"},
        {title : "1986", author : "George Orwellc"},
        {title : "1987", author : "George Orwelld"}
    ]
    console.log("\n ---------")
    console.log(typeof book) // 打印類型還是對象 object，但是實際上一個算是數(shù)組
    console.log(book)
}

js提供將json對象數(shù)據(jù)轉(zhuǎn)換為字符串的方法：JSON.stringify()。

if (false)
{
    const book = ({title : "1984", author : "George Orwell"}) // 就算不加關(guān)鍵詞 Object 也能有相同效果。
    console.log("\n ---------")
    let bookJSON = JSON.stringify(book); // 將對象保留原本格式，轉(zhuǎn)換為了字符串，其中鍵名變成了字符串（就是加了雙引號）？方便用于保存在文本內(nèi)？
    console.log(typeof bookJSON) // 想起來，JSON不也是之前我寫ros工程時用到的參數(shù)文件嗎，還有百度飛漿的文本文件都是這種格式。
    console.log(bookJSON)
}
/* 輸出內(nèi)容如下：
 ---------
string
{"title":"1984","author":"George Orwell"}
*/
// 可以發(fā)現(xiàn)鍵值還是原本的字符串，但是鍵名已經(jīng)變換為字符串

我做了一個類比實驗，看如下注釋。

if (false)
{
    const book = ([1,23,3,"156"]) 
    console.log("\n ---------")
    console.log(typeof book) // 類型依舊屬于 object
    let bookJSON = JSON.stringify(book); // 依舊可以調(diào)用，不會出現(xiàn)報錯。
    console.log(typeof bookJSON) // 得到的結(jié)果 和原結(jié)果一模一樣的字符串。
    console.log(bookJSON)
}
/* 輸出內(nèi)容如下：
 ---------
object
string
[1,23,3,"156"]
*/
// 可以發(fā)現(xiàn)函數(shù)好像沒有起到作用。判斷格式不符合json要求時不會起作用，也不會報錯。

js提供將字符串數(shù)據(jù)轉(zhuǎn)換為json對象的方法：JSON.parse()。就是JSON.stringify()的逆操作了。

if (false)
{
    let data_0 = "[1,2,3]";
    let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 注意，JSON的字符串形式下，鍵和值都是要加雙引號的，弄成類似字符串的形式。有一點不對都會轉(zhuǎn)換失敗。
    let parsed = JSON.parse(data); // 逆向操作，將字符串再變回成對象類型。會解析是否符合格式。
    console.log("\n -----")
    console.log(parsed); // 
    console.log(typeof parsed) 
    console.log(typeof data) 
}
/* 輸出內(nèi)容如下：
 -----
{ title: '1984', author: 'George Orwell' }
object
string
*/
// 需要注意的就是字符串中的斜桿表示比較麻煩

學(xué)習(xí)JSON格式數(shù)據(jù)的使用非常重要，json變量其實并非普通的數(shù)據(jù)，而是包含眾多數(shù)據(jù)處理函數(shù)的對象。比如上述2個字符串和數(shù)據(jù)之間相互轉(zhuǎn)換的函數(shù)，檢查在實戰(zhàn)中用到。分別是讀取數(shù)據(jù)和存儲數(shù)據(jù)的2個操作。

四、對象Object

js中的對象創(chuàng)建不同于python的類，而是直接創(chuàng)建對象。我直接看例子，結(jié)合例子展開。

if (false)
{
    let data_0 = "[1,2,3]";
    let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 注意，JSON的字符串形式下，鍵和值都是要加雙引號的，弄成類似字符串的形式。有一點不對都會轉(zhuǎn)換失敗。
    let parsed = JSON.parse(data); // 逆向操作，將字符串再變回成對象類型。會解析是否符合格式。
    console.log("\n -----")
    console.log(parsed); // 
    console.log(typeof parsed) 
    console.log(typeof data) 
}
/* 輸出內(nèi)容如下：
 -----
{ title: '1984', author: 'George Orwell' }
object
string
*/
// 需要注意的就是字符串中的斜桿表示比較麻煩

從格式可以看出，感覺是一堆屬性，有字符串，有匿名函數(shù)。而且不是用等于號而是用冒號賦值，就像字典的鍵對一樣。

所以現(xiàn)在看來，其實json數(shù)據(jù)包，在js中相當于對象的存在。如果是直接打印函數(shù)方法，會輸出類似字符：[Function (anonymous)]。

除了一開始直接賦值，也可以采用先創(chuàng)建空對象，再逐步添加值。如果已經(jīng)存在的屬性會覆蓋，否則就當作是添加。（很簡單粗暴）

// 2. 另一種創(chuàng)建對象的方法，使用構(gòu)造函數(shù)創(chuàng)建
if (false)
{
    const book = new Object();
    console.log(book); // 一開始創(chuàng)建是空的
    console.log(typeof book); //類型是 object
    book.title = "1984";
    book.author = "George Orwell";
    book.isAvailable = false; // 添加屬性
    book.checkIn = function(){
        this.isAvailable = true;  // 添加方法
    };
    book.checkOut = function(){
        this.isAvailable = false; 
    };
     console.log(book); // 打印正常
     console.log(typeof book);
    // 3. 訪問對象內(nèi)元素的方法：
    console.log(book.title); // 類似結(jié)構(gòu)體的訪問
    console.log(book["title"]); // 類似字典的訪問，輸出結(jié)果是一樣的，注意，這樣訪問的話，鍵名一定要加雙引號，看作字符串形式
    console.log(book.checkIn); // 如果是訪問函數(shù)，如果不加括號，會返回對象。打印類似字符：[Function (anonymous)]
    console.log(book.checkIn()); // 如果加括號就相當于調(diào)用執(zhí)行.（返回值空，因為函數(shù)內(nèi)沒用寫返回值）
    console.log(book["checkIn"]); // 也可以使用字典的形式訪問，結(jié)果一樣
    console.log(book["checkIn"]());  // 就是這個括號是在方括號外面的。
}

上下文機制： this ,并不完全是在對象內(nèi)值指對象的名字，而是指代上下文使用的變量？（具體看視頻講解，我理解還不太透徹）
類似于我使用的主體，我使用的主體是對象，返回的就是對象，我使用的函數(shù)，返回的就是函數(shù)。所以this還可以在函數(shù)中使用，雖然函數(shù)本身也是一個對象（？）。

if (false)
{
    const bookObj = {    			// 創(chuàng)建一個對象
        checkIn : function(){		// 添加一個屬性
            return this;			// 這個屬性是一個方法，且有返回值，返回對象本身
        }
    }
    function anotherCheckIn(){		// 創(chuàng)建一個函數(shù)
        return this;				// 返回一個函數(shù)本身
    }
    console.log(bookObj.checkIn() == bookObj); // 返回值是不是對象本身，對的
    console.log(bookObj.checkIn() == globalThis); // 返回值是不是函數(shù)，錯的
    console.log(anotherCheckIn() == globalThis); // 返回值是不是函數(shù)，對的
}

五、Promise

懵逼的一節(jié)，講js中的異步運行機制？不多解釋，怕越說越錯。

// Promise 對象用于表示一個異步操作的最終完成 (或失敗)及其結(jié)果值。
if (true)
{
    function promiseTimeout(ms){ // 創(chuàng)建一個函數(shù)
        return new Promise((resolve, reject) => { // 返回一個 Promise 對象， 輸入?yún)?shù)是一個匿名函數(shù)，其中匿名函數(shù)又有2個參數(shù)，一個是成功時會執(zhí)行的內(nèi)容，一個是失敗時會執(zhí)行的內(nèi)容
            setTimeout(resolve, ms); // js內(nèi)部函數(shù)，延時第二個參數(shù)ms后執(zhí)行 第一個參數(shù)的內(nèi)容。
        });
    }
    promiseTimeout(2000) // 調(diào)用函數(shù)，傳入?yún)?shù)2000ms；
        .then(() => { // 返回的 Promise 對象的內(nèi)置方法；如果成功則會調(diào)用。該內(nèi)置方法也有一個參數(shù)，該參數(shù)是匿名函數(shù)
            console.log('Done!!'); // 該匿名函數(shù)無參入?yún)?shù)，內(nèi)部功能只有打印
            return promiseTimeout(1000); // 再調(diào)用一次函數(shù)，又返回一個變量
        }).then(() => { // 因為上面又返回了一個變量，所以可以鏈式調(diào)用，
            console.log('Also done!!'); // 延時1000ms，運行成功后會接著調(diào)用
            return Promise.resolve(42); // 又返回一個對象，無限套娃
        }).then((result_0) => { // 傳入?yún)?shù),這個參數(shù)名字是隨意的，我修改后還是能實現(xiàn)效果。ide自動標紅，應(yīng)該能知道是變量，而非語法關(guān)鍵字
            console.log(result_0); // 打印參數(shù)
        })
        .catch(() => { // 同上，不過是失敗時調(diào)用
            console.log('Error!');
        })
    // 因為 Promise.prototype.then 和  Promise.prototype.catch 方法返回的是 promise， 所以它們可以被鏈式調(diào)用。
}
/*
運行結(jié)果為：
先稍等一會打印一行：
Done！
稍等片刻后再同時先后打印兩行：
Also done！
42
*/

六、Async : Await

和Promise機制相反。

// Async:Await
function promiseTimeout(ms){
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}
async function longRunningOperation(){
    return 42;
}
async function run(){
    console.log('Start!');
    await promiseTimeout(2000); // 添加await關(guān)鍵字，結(jié)果類似去同步運行。本來使用Promise會使先打印，后延時，如果加上A/A后就會按順序先延時再打印。
    const response = await longRunningOperation();
    console.log(response); // 按道理應(yīng)該直接返回42并打印，實際上，如果不加await關(guān)鍵字，會立刻返回一個Promise對象，而不是42.
    console.log('Stop!!');
}
run();
/*
運行結(jié)果為：
先打印一行：
Start！
稍等片刻后再同時先后打印兩行：
42
Stop！
*/

七、包

使用node.js中附帶的nvm工具，可以很好的管理js軟件包。而且工程可以配備了相關(guān)軟件包目錄。只需要在其中添加對應(yīng)軟件包，再輸入更新工程指令就可以在工程中添加軟件包。

類似于編譯一樣，不過這個是下載。過去python提倡將軟件包直接安裝在電腦工作環(huán)境空間內(nèi)。而c語言的相關(guān)庫是建議在工程內(nèi)。js也是提倡在工程內(nèi)。不過如果要轉(zhuǎn)移程序時，會講軟件包文件夾刪除。只轉(zhuǎn)移工程代碼部分。轉(zhuǎn)移完畢后在別的電腦上再使用更新下載功能即可。這個操作有點像之前學(xué)過的ros工程。不過ros工程就算不設(shè)置正確也能正常運行，js如果設(shè)置不準確，在編譯時就不通過了。