JavaScript

Day20 立即呼叫的函式表示式 IIFE

今天來看看IIFE IIFE全名為Immediately Invoked Functions Expressions 指的是可以立即執行的Functions Expressions函式表示式,中文多譯為立即(執行)函式。 來看看以下程式碼 var hello = function(name){ console.log('Hello ' + name); }; 這是一個Functions Expressions函式表示式,要呼叫它通常會寫成hello() hello(); 目前沒有傳值進去,所以函式印出Hello undefined 若把hello()這句刪掉,把程式碼改成這樣: var hello = function(name){ console.log('Hello ' + name); }(); 電腦在函式表示式後面讀到(),就知道要立刻呼叫這個函式,這種立刻執行的函式寫法就稱為IIFE。 若要傳值進去可以加參數在最後面的() var hello = function(name){ console.
SimonAllen

Day19 陣列、arguments、spread 與分號

今天的筆記內容比較雜一點。 陣列——任何東西的集合 要建立一個JS陣列可以這樣寫 var arr = new Array(); 也可以使用陣列實體語法來建立 var arr = []; 此外,JS的陣列與物件很像,可以放各種資料,例如:布林值、物件和函數..等等。 例如: var arr = [ 24, true, { name: 'Simon', isF2E: true}, function(name){ console.log(name + '挑戰鐵人賽第19天'); }, "hello" ]; 陣列是從0開始數,如果要執行陣列序號3的函式,並帶入陣列序號2的物件屬性值,可以這樣寫: arr[3](arr[2].name); 結果是
SimonAllen

Day18 物件、函式與 this

今天來看看this JavaScript在建立執行環境時,不論是全域、區域執行環境,在創造時會一併建立一個變數 this。而this會指向呼叫函式的執行環境,更進一步的說,this會指向函式目前所在物件。 如果我們直接這麼寫,這段程式碼的this會指向誰? console.log(this); 我們在全域執行環境呼叫this,此時它會指向全域物件,也就是window 那這樣呢? function a(){ console.log(this); } var b = function(){ console.log(this); } a(); b(); 呼叫a、b函式,電腦創造函式a、b的執行環境,此時a、b函式內的this也一併被創造出來,那this會分別指向誰呢? 還蠻合理的,畢竟a()、b()也視同window.a()、window.b(),這代表不管用函式表示式或函式陳述句,只要在全域定義、呼叫創造其執行環境,這時的this會指向全域物件。 但也因為函式a、
SimonAllen

Day17 傳值 by value 與傳址 by reference

今天來看傳值與傳址 call by value傳值與call by reference傳址指的是電腦記憶體中的東西,與程式的參照傳遞互動的模式。 call by value 當我們創造變數並給值時,變數會指向值在電腦記憶體中的位置,若我們以這個值為參照,指定另一個變數指向這個值時,電腦會在記憶體中新增(複製)一個新值,讓後來的這個變數指向新的值。 在JavaScript裡,布林值、字串、數值、null、undefined都是call by value。 來看看以下程式碼 var a = 100; var b; b = a; a = a - 70; console.log('a現在是' + a); console.log('b現在是' + b)
SimonAllen

Day16 函式陳述句與函式表示式

今天來看Function Statement(函式陳述句)與Function Expression(函式表達式、表示式) 等等...Statement與Expression又是什麼東西呢? Statement 程式碼的單位,這段程式碼不會產生一個值 Expression 程式碼的單位,這段程式碼最終會產生(回傳)一個值,而這個值不一定會被開發者賦予變數。 看看以下程式碼 我們先宣告一個變數a,然後直接在瀏覽器console做後續動作 * 輸入a = 3,瀏覽器console回傳3,這代表這段程式碼是Expression * 輸入10 + 5,瀏覽器console回傳15,它也是Expression * 輸入a === 3,回傳true(成立),它也是Expression * 若我們直接用物件實體語法創造物件,將物件指向變數a,瀏覽器console也回傳一個物件,它也是一個Expression 接著看看以下程式碼 if(a === 3){ console.log(a); } if()的(),需要布林值true
SimonAllen

Day15 函式就是物件

今天來看看函式Functions 在JS這個物件導向語言裡,其函式的特性被稱為一級函式。 一級函式First Class Functions 開發者對別的基礎型別做的事,也可以對函式去做,因為函式就是物件,而物件就是名稱/值的組合。 開發者可以指派函式給變數,將函式傳入另一個函式,也可以用實體語法建立函數。 函式可以有屬性和方法,因為他就是物件,所以它可以連結到物件、屬性、其他函式(Methood) 關於一級函式的介紹,可以參考: 維基百科頭等函式 ITome專欄物件導向語言中的一級函式 by林信良 而JS的函式還有隱藏的物件屬性,其中最重要的有兩個: NAME 即名子屬性,然而名子不是必須的,函式也可以沒有名子(匿名函式) CODE 即程式屬性code property,這個屬性的內容,就是開發者在編輯器上開發時,寫在函式內的程式碼。 我們寫的程式碼會成為這個屬性的值,而CODE屬性的特性是,它的內容是可以呼叫執行的。 來看看以下程式碼 function sport(){ console.log('運動'
SimonAllen

Day14 JSON 與物件實體

今天來看看JSON 前端工程師在串接資料,常常是接後端發出的JSON檔案(API),再將其內容渲染到網頁上,那什麼是JSON呢? JSON,全名JavaScript Object Notation 是受到JavaScript物件實體語法啟發的傳輸格式,比起使用XML傳輸資料,JSON格式在檔案大小上更為輕量,也是現在主流的傳輸格式。 一個JavaScript物件可以長這樣 {name: 'Simon',isF2E: true} 而JSON會是這樣 {'name':'Simon','isF2E':'true'} 看起來好像差不多? 物件的屬性名name,在JSON中被引號包起來變成'name',也就是說原本的屬性名到了JSON變成字串,JavaScript利用物件實體語法時,物件屬性名稱也可以是字串(對物件實體語法,屬性的引號'或"可加可不加) var
SimonAllen