Vic's blog

前端工程師在使用 vscode 這個編譯器進行切板剛開始時，通常開完一個叫做 index.html 的檔案後，就會開始在最初的頁面裡下一個驚嘆號。 這是預設的，所以完全不用做任何的設定，而當把這個驚嘆號給按下去之後，就會出現一套模板，包含了 html、head、body，這個模板節省了最初的撰寫時間，相信很多人沒有這個驚探號生成的模板可能剛開頭就不知道如何下手了。 而這個其實也能夠自己手動去做設定的，它是 vscode 其中的一個好用功能，叫做 User Snippets，也稱之為使用者自訂程式碼片段。 接下來就會教如何從零設定自己想要的使用者片段。 步驟一首先 vscode 頁面從最上面那一排找到一個叫做喜好設定的選項當中，會看到裡面有一個叫做==使用者程式碼片段==的區塊，點下去。 步驟二會出現一個視窗的選項在中央供選擇，這此請按新增==全域程式碼片段檔案==。 這個選項的意思是此檔案設定的使用者片段會讓你的所有檔案都可以使用，所以假如只由讓特定檔案使用而已的話，就不適合全域的方式，可以選擇只...

這三個常常會搞混，用一個簡單的範例超快速搞懂這三個概念！ 12345function add(a, b) { console.log(a + b);}add(1, 2); // 3 這時候 add 這個函式裡面的 a 跟 b 就是參數。而下方呼叫函式裡面的 1 跟 2 就是引數。 那現在如何把變數的概念也加進去 => 1234567const c = 2;function add(a, b) { console.log(a + b);}add(1, c); 剛剛的那個例子中就會多了一個叫做 c 的變數，這個 c 的變數就會在呼叫 add 這個函式的時候把變數帶入這個引數，這個時候變數就成為了引數，然後這個引數會在帶回這個參數，最後把結果給算出來。

創建完.html 的檔案後，在開始把版面切出來之前，通常會使用!的方式把內建的範本給建立出來，使用內建範本會把一些基本的東西都先呈現出來，像是 html、head、body 的 tag。 雖然十分的理所當然，但也因為方便所以有時會忽略掉那些內建的東西是什麼，在內建範本之中，我覺得最容易被忽略掉，跟最容易經過時間遺忘的是其中的三個 meta tag，所以在此做個筆記讓之後遺忘可以複習。 <meta charset="UTF-8">這一段是跟編碼有所關聯，可以用來指定說這個網頁內容需要用什麼編碼。 一般來說會使用”UTF-8”來做編碼，HTML5 的規範也推薦所有開發人員都使用 UTF-8 字符集，因為它幾乎涵蓋了世界上所有的字符跟符號。 詳細可以參考這一篇文章，我覺得還不錯：[HTML][新手] 04. 中文編碼表示 meta charset <meta http-equiv="X-UA-Compatible" content="IE=edge">這一段主要是用到控制 IE 相容模式，可...

大家好，我是 Vic，目前已經寫到鐵人賽的最後一天，過程中受到很多好人的幫助指點，讓我獲得了不放棄的勇氣，今年的鐵人賽無論結果如何，我覺得至少我自己已經做到了堅持，而這不是單單靠我一個人就辦得到，是遇到了一堆好人後最終產生的結果，所以在開頭想感謝所有幫助過我的人事物。 感謝好想工作室的這個環境，感謝給我建議跟指點的每個朋友，也感謝團體賽中每個夥伴的互相包容，因為雖然當了團長，但我其實連自己都顧不太來，所以很多時候沒時間去關心其他人的進度，能夠順利平安結束真的是太好了。 這次的鐵人賽文章會同步發佈於: 我的部落格 接著就進入最後一次的序言時間。 預想與實際我是一個不囤稿派的。 我的想法是鐵人的精神就是要藉由每天迫使自己的產出，排除萬難來達成挑戰，藉此來磨練自身意志力，培養出持之以恆的習慣，若是通通都先寫好了，不過就只是一個無情的發文機器人，每天時間到就發，發完就去做其他事情，磨練在哪裡，鐵人精神又在哪裡，所以我都沒有準備文章。 只有一個念頭是，我應該從困難的開始寫，我有注意到之前鐵人賽其他參加者的狀況，很多半途而廢的人，蠻多有一個共同點，都是從簡單的開始寫，寫到後面開始越寫越難，最...

解構賦值是 es6 之後出來的一個新語法，我的理解它是一種語法糖，語法糖意思也就是說它可以用更簡單的方式達到相同的效果。 至於它究竟解構了什麼？其實就是陣列或是物件裡面的值，原本我們假如要取出陣列跟物件裡面的值，可能會這樣來寫： 123456789101112// 陣列的情況const goodNum = [10, 20, 30, 40];// 我想要取出裡面的數字，各個分別取出來const one = goodNum[0];const two = goodNum[1];const three = goodNum[2];const four = goodNum[3];console.log(one, two, three, four); // 10 20 30 40 123456789101112// 物件的情況const goodFruit = { name: "西瓜", color: "green",};// 我希望把個別key內中的value給取出來const name = goodFruit.name;co...

柯里化是一個函數的運用技術，不只是JavaScript裡面，它可以運用在很多的地方，簡單來說就是幫忙做了轉換。 原本的函式可能是長這樣的： 1fnc(A, B, C); 柯里化後會變成這樣： 1fnc(A)(B)(C); 這兩種方式最後出來的結果都是會一樣的，而怎麼實現的等等就會提到，今天會從幾個角度介紹這個主題 => 介紹與原理 目的與好處 介紹與原理柯里化主要的用途是用來簡化呼叫函式的過程，像是說把呼叫 f(a,b)變成呼叫 f(a)以及 f(b)，就可以達成說，把一個很多參數的函式，切分成很多只有一個參數的函式。 舉例來說：這是一個簡單的相加，它是一個有很多參數的函式。 12345function plus(a, b, c) { return a + b + c;}console.log(plus(1, 2, 3)); //印出6 使用柯里化的方式改寫，讓它變成很多只有一個參數的函式。 12345678910function plus(a) { return function (b) { retur...

今天要來介紹JSON的兩個靜態方法： JSON.parse() JSON.stringify() 會從什麼是JSON開始介紹起，直接開始吧。 JSONJSON的全名是JavaScript Object Notation，它是一種輕量型的數據交換格式，就是可以用來儲存跟方便傳遞的一種格式，跟物件的樣子很像，但其實不太一樣，會有著JSON的出現，主要還是單純物件的話，還不夠簡單跟容易閱讀。 跟使用物件的格式有一些差別。 第一JSON它只能用雙引號，不能用單引號，不論是key還是value，物件沒有這種限制，可以用單引號，甚至key不要加引號也沒有關係。 第二JSON 支持 object、array、string、number、boolean 和 null，基本上除了undefined之外其他全包了。 不過雖然支持，但是大部分的JavaScript都不是JSON，主要原因還是上面第一點，不論是key還是value都需要雙引號。 簡單說，JSON 是用來表示在JavaScript物件的一種格式，比單純的物件格式更好閱讀，有更高的相容性。 JSON的範例： 1234567{&...

前言JavaScript的嚴格模式，如其名會讓程式碼的檢視變的嚴格，嚴格意味著不讓你錯，寫起來會更加安全嚴謹。 今天會照以下幾個角度來講解： 嚴格模式由來 使用方式 禁止事項 使用情境 嚴格模式由來JavaScript寫法規則相對來說不嚴謹，像是弱型別的轉換特性，就算沒有寫清楚，JavaScript也會自動幫忙補完，不會報錯，好處是很容易上手，不會被一大堆語法的限制給綁手綁腳，不過同時壞處也是十分明顯的，有時候寫錯也不會報錯，那麼將會很難避免一堆潛在錯誤，在寫的時候也完全發現不了。 為了應付這種狀況，JavaScript在 2009 年 ECMAScript5 有新推出了這個叫做Strict Mode的語法，創造出一個模式，是很嚴格嚴謹的，提供一個給開發者改善上述提到不嚴謹導致出錯的問題，讓開發者可以自由選擇。 舉例來說，在嚴格模式下，沒有辦法使用一個沒有宣告的變數。 沒有嚴格模式: 12apple = 10;console.log(apple); //10 使用了嚴格模式： 123"use strict";apple = 10;console.log(...

前言今天要來介紹什麼是Arrow Function，這個是一個看起來非常簡單的語法，因為=>就像是箭頭一樣所以叫做Arrow Function，它可以直接把函式的建立變成簡化版，看起來像是這樣： 1let arrow = (a, b) => a + b; 會叫做Arrow Function也是因為=>就像是一個箭頭的關係，雖然看起來很簡單，但其實我自己在寫時常常忘記怎麼寫,利用這次寫文章的機會來複習一下。 過去與現在Arrow Function是 es6 之後才出來的新語法，意味著在此之前都是只能用以下這些方式。 一般做法： 12345function past() { return "過去做法";}console.log(past()); // 過去做法 匿名做法： 12345let past = function () { return "過去做法";};console.log(past()); // 過去做法 es6 之前只能用上面那兩種方式，之後多了一種箭頭函式可用...

前言之前講的是常用的邏輯運算子，而有一個比較特別的，寫法是兩個問號。之前看不太懂，趁著今天研究出來順便寫自己的理解，接下來就直接開始。 ??根據 MDN 的解釋，當左邊的值是null或是undefined時，會回傳右邊的值，假如不是null或是undefined就會回傳左邊的值。 還記得前天講的||嗎？ ||是碰到第一個真值就回傳。 而當一個值，如果它不是null也不是undefined，那它就會是defined，意思是一個已經定義的值。 所以||跟??來做比較的話： ??會回傳第一個已經定義的值 ||會回傳第一個遇到的真值(true) 來試試看 => 左邊是null時，會回傳右邊的值，左邊不是null或是undefined，就會直接回傳左邊的值。 12console.log(null ?? 100); // 100console.log(50 ?? null); // 50 MDN 只有說左右兩側，測試看看假如兩組值以上的狀況。 12console.log(null ?? null ?? 100 ?? 50); // 100console.log(50 ?...