JavaScript 函數語法詳解
一、普通函數
js的函數創建比較特殊,有很多種方式,最簡單的一種和c語言類似。
特點:
函數名字可以除瞭字母、數字、下劃線外,還可以存在 “$” 字符。
在js中,函數名就是一個儲存函數對象的變量。使用 typeof 關鍵字可以查看函數類型。(這個理念和python類似,可以用其他變量接手這個函數)
函數形參定義時不需要寫關鍵字:var、let、const。應該默認就是局部可修改變量。
JS 語法中 不檢查輸入參數。這意味著,輸入參數可少可多。少瞭輸入undefined代替,多瞭自動忽略。
同上理,JS 也不拘束是否有返回值,統一都有返回值。如果沒有寫明返回值,則統一返回無效值。
// 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還支持匿名函數,就是不寫函數名。python中也有類似,在python學習筆記中也有記錄:lambda匿名函數。
// 6. 函數還可以沒名字,直接這樣創建。 let him = function(){ console.log("him"); } him() // 側面反映瞭,名字其實就是一個變量名。 // 8. 函數名字本身不支持傳遞賦值,但是變量可以。 // him = printHello_1(); // 報錯(有點類似數組定義後就不能再賦值?) let add = him; add(); // 7. 該變量還是可以賦值其他內容。 him = 6; console.log(him) // 輸出數字 6
二、箭頭函數
js中箭頭函數就是“名副其實”的匿名函數瞭,可快速創建嵌套函數功能體(自創用詞)……也更加貼合python的lambda匿名函數用法。
在看實戰案例時全是這種匿名函數的創建和傳參,第一次接觸懵逼得不要不要的。下面的代碼為瞭方便看效果,我會把用不到的部分改成假,屏蔽運行。你問為什麼不直接註釋?因為想鍛煉用法。
使用方法看似簡單,前面括號就是用到的參數,箭頭後面緊跟代碼。如果是單行的簡易代碼可不用寫括號,單行還自帶隱式返回計算值。
if (false) { const add = (a, b) => a + b; // 類似直接創建函數,並且將該函數丟給一個變量調用。 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; // 可以看出本質還是變量,如果定義是使用可變類型,則可以改變 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)); // 有返回值,表示如果用瞭大括號可以表示換行但是不會有隱式返回。而單行總是會有隱式返回的。 }
三·、數據包 JSON
JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。它基於 ECMAScript (歐洲計算機協會制定的js規范)的一個子集,采用完全獨立於編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易於人閱讀和編寫,同時也易於機器解析和生成,並有效地提升網絡傳輸效率。【截至百科】
- 在之前學習神經網絡和ros時也有接觸這類數據包,一個小小的後綴.json文件,裝著一堆參數或數據集。從格式上看,很像字典,有鍵和值成對。如果展開圖形化,其實是一個列表,有表頭和數據。
- js提供Object類來創建json對象。(其實就是創建對象,下一節再細說)
// 例子1 if (false) { const book = new Object({title : "1984", author : "George Orwell"}) // 創建 JSON 對象 console.log("\n ---------") console.log(typeof book) // 查看類型,確實是對象 console.log(book) // 能正常打印 } // 例子2(下一節細說,對象的知識點) if (false) { const book = ({title : "1984", author : "George Orwell"}) // 就算不加關鍵詞 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,但是實際上一個算是數組 console.log(book) }
- js提供將json對象數據轉換為字符串的方法:
JSON.stringify()。
if (false) { const book = ({title : "1984", author : "George Orwell"}) // 就算不加關鍵詞 Object 也能有相同效果。 console.log("\n ---------") let bookJSON = JSON.stringify(book); // 將對象保留原本格式,轉換為瞭字符串,其中鍵名變成瞭字符串(就是加瞭雙引號)?方便用於保存在文本內? console.log(typeof bookJSON) // 想起來,JSON不也是之前我寫ros工程時用到的參數文件嗎,還有百度飛漿的文本文件都是這種格式。 console.log(bookJSON) } /* 輸出內容如下: --------- string {"title":"1984","author":"George Orwell"} */ // 可以發現鍵值還是原本的字符串,但是鍵名已經變換為字符串
我做瞭一個類比實驗,看如下註釋。
if (false) { const book = ([1,23,3,"156"]) console.log("\n ---------") console.log(typeof book) // 類型依舊屬於 object let bookJSON = JSON.stringify(book); // 依舊可以調用,不會出現報錯。 console.log(typeof bookJSON) // 得到的結果 和原結果一模一樣的字符串。 console.log(bookJSON) } /* 輸出內容如下: --------- object string [1,23,3,"156"] */ // 可以發現函數好像沒有起到作用。判斷格式不符合json要求時不會起作用,也不會報錯。
js提供將字符串數據轉換為json對象的方法:JSON.parse()。
就是JSON.stringify()
的逆操作瞭。
if (false) { let data_0 = "[1,2,3]"; let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 註意,JSON的字符串形式下,鍵和值都是要加雙引號的,弄成類似字符串的形式。有一點不對都會轉換失敗。 let parsed = JSON.parse(data); // 逆向操作,將字符串再變回成對象類型。會解析是否符合格式。 console.log("\n -----") console.log(parsed); // console.log(typeof parsed) console.log(typeof data) } /* 輸出內容如下: ----- { title: '1984', author: 'George Orwell' } object string */ // 需要註意的就是字符串中的斜桿表示比較麻煩
- 學習JSON格式數據的使用非常重要,json變量其實並非普通的數據,而是包含眾多數據處理函數的對象。比如上述2個字符串和數據之間相互轉換的函數,檢查在實戰中用到。分別是讀取數據和存儲數據的2個操作。
四、對象Object
js中的對象創建不同於python的類,而是直接創建對象。我直接看例子,結合例子展開。
if (false) { let data_0 = "[1,2,3]"; let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 註意,JSON的字符串形式下,鍵和值都是要加雙引號的,弄成類似字符串的形式。有一點不對都會轉換失敗。 let parsed = JSON.parse(data); // 逆向操作,將字符串再變回成對象類型。會解析是否符合格式。 console.log("\n -----") console.log(parsed); // console.log(typeof parsed) console.log(typeof data) } /* 輸出內容如下: ----- { title: '1984', author: 'George Orwell' } object string */ // 需要註意的就是字符串中的斜桿表示比較麻煩
從格式可以看出,感覺是一堆屬性,有字符串,有匿名函數。而且不是用等於號而是用冒號賦值,就像字典的鍵對一樣。
所以現在看來,其實json數據包,在js中相當於對象的存在。如果是直接打印函數方法,會輸出類似字符:[Function (anonymous)]。
除瞭一開始直接賦值,也可以采用先創建空對象,再逐步添加值。如果已經存在的屬性會覆蓋,否則就當作是添加。(很簡單粗暴)
// 2. 另一種創建對象的方法,使用構造函數創建 if (false) { const book = new Object(); console.log(book); // 一開始創建是空的 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. 訪問對象內元素的方法: console.log(book.title); // 類似結構體的訪問 console.log(book["title"]); // 類似字典的訪問,輸出結果是一樣的,註意,這樣訪問的話,鍵名一定要加雙引號,看作字符串形式 console.log(book.checkIn); // 如果是訪問函數,如果不加括號,會返回對象。打印類似字符:[Function (anonymous)] console.log(book.checkIn()); // 如果加括號就相當於調用執行.(返回值空,因為函數內沒用寫返回值) console.log(book["checkIn"]); // 也可以使用字典的形式訪問,結果一樣 console.log(book["checkIn"]()); // 就是這個括號是在方括號外面的。 }
- 上下文機制: this ,並不完全是在對象內值指對象的名字,而是指代上下文使用的變量?(具體看視頻講解,我理解還不太透徹)
- 類似於我使用的主體,我使用的主體是對象,返回的就是對象,我使用的函數,返回的就是函數。所以this還可以在函數中使用,雖然函數本身也是一個對象(?)。
if (false) { const bookObj = { // 創建一個對象 checkIn : function(){ // 添加一個屬性 return this; // 這個屬性是一個方法,且有返回值,返回對象本身 } } function anotherCheckIn(){ // 創建一個函數 return this; // 返回一個函數本身 } console.log(bookObj.checkIn() == bookObj); // 返回值是不是對象本身,對的 console.log(bookObj.checkIn() == globalThis); // 返回值是不是函數,錯的 console.log(anotherCheckIn() == globalThis); // 返回值是不是函數,對的 }
五、Promise
懵逼的一節,講js中的異步運行機制?不多解釋,怕越說越錯。
// Promise 對象用於表示一個異步操作的最終完成 (或失敗)及其結果值。 if (true) { function promiseTimeout(ms){ // 創建一個函數 return new Promise((resolve, reject) => { // 返回一個 Promise 對象, 輸入參數是一個匿名函數,其中匿名函數又有2個參數,一個是成功時會執行的內容,一個是失敗時會執行的內容 setTimeout(resolve, ms); // js內部函數,延時第二個參數ms後執行 第一個參數的內容。 }); } promiseTimeout(2000) // 調用函數,傳入參數2000ms; .then(() => { // 返回的 Promise 對象的內置方法;如果成功則會調用。該內置方法也有一個參數,該參數是匿名函數 console.log('Done!!'); // 該匿名函數無參入參數,內部功能隻有打印 return promiseTimeout(1000); // 再調用一次函數,又返回一個變量 }).then(() => { // 因為上面又返回瞭一個變量,所以可以鏈式調用, console.log('Also done!!'); // 延時1000ms,運行成功後會接著調用 return Promise.resolve(42); // 又返回一個對象,無限套娃 }).then((result_0) => { // 傳入參數,這個參數名字是隨意的,我修改後還是能實現效果。ide自動標紅,應該能知道是變量,而非語法關鍵字 console.log(result_0); // 打印參數 }) .catch(() => { // 同上,不過是失敗時調用 console.log('Error!'); }) // 因為 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是 promise, 所以它們可以被鏈式調用。 } /* 運行結果為: 先稍等一會打印一行: 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關鍵字,結果類似去同步運行。本來使用Promise會使先打印,後延時,如果加上A/A後就會按順序先延時再打印。 const response = await longRunningOperation(); console.log(response); // 按道理應該直接返回42並打印,實際上,如果不加await關鍵字,會立刻返回一個Promise對象,而不是42. console.log('Stop!!'); } run(); /* 運行結果為: 先打印一行: Start! 稍等片刻後再同時先後打印兩行: 42 Stop! */
七、包
使用node.js中附帶的nvm工具,可以很好的管理js軟件包。而且工程可以配備瞭相關軟件包目錄。隻需要在其中添加對應軟件包,再輸入更新工程指令就可以在工程中添加軟件包。
類似於編譯一樣,不過這個是下載。過去python提倡將軟件包直接安裝在電腦工作環境空間內。而c語言的相關庫是建議在工程內。js也是提倡在工程內。不過如果要轉移程序時,會講軟件包文件夾刪除。隻轉移工程代碼部分。轉移完畢後在別的電腦上再使用更新下載功能即可。這個操作有點像之前學過的ros工程。不過ros工程就算不設置正確也能正常運行,js如果設置不準確,在編譯時就不通過瞭。
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- await-to-js源碼深入理解處理異步任務用法示例
- 前端常見面試題之async/await和promise的區別
- JavaScript詳解使用Promise處理回調地獄與async await修飾符
- 一文秒懂nodejs中的異步編程
- es7中的async、await使用方法示例詳解