Vic's blog

大家好，我是 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 ?...

今天來講昨天沒講完的兩個Logical operators。 Logical AND (&&) Logical NOT (!) Logical AND (&&)會用&&來判斷&&兩邊的值，最基本的判斷是兩邊只有true跟false值的話，全部為true才會是true，只要有一個false就會直接回傳成false。 舉例來說，假如小白他想要合法的騎車，他就必須滿足以下條件: 滿 18 歲 獲得機車駕照 有一台車 有安全帽 其中，假如有一項沒有達成也就是false，那麼最後的結果也會是回傳false，沒有辦法騎車。 123目前狀況 = 已滿18歲 && 已有駕照 && 已有車 && 沒有安全帽;可以騎車嗎? => 不行 同等於 123const condition = true && true && true && false;console.log(condition); // false 而跟||一樣，有...

今天要來介紹的是Logical operators，最主要有這三種常常使用 => || => OR 運算子 && => AND 運算子 ! => NOT 運算子 學習在這邊的時候可能會有疑問，運算子(operators)是什麼? 拿去 google 會發現它似乎會常常被跟運算式(Expressions)一起談論。 Expressions and operators可以用一個簡單的 1+1 來了解這個概念。 1const X = 1 + 1; //2 1+1會等於2應該沒問題，而這個X = 1+1其實就是Expressions，這個Expressions會產生一個2的值，那麼operators在哪裡？ 在這個X = 1+1的Expressions裡面，=是一個operators，+也是一個operators，實際上，Expressions就是透過operators來進行運算的，透過operators的運算獲得最後的「值」。 是的，加、減、乘、除都是operators，除了計算之外，operator...

今天假如要寫一個求 1 + 2 + … + n 的總和，一般人可能很直覺的就想到說，要用迴圈的方式把所有值都加在一起。 123456789function add(n) { let result = 0; for (let i = 1; i <= n; i++) { result += i; } return result;}console.log(add(5)); // 15 但除了迴圈之外，還有另外一種名為遞迴的技巧也能達成相同的效果。 123456789function add(n) { if (n === 1) { return 1; } else { return n + add(n - 1); }}console.log(sum(5)); //15 我們先來看一下遞迴(recursion)在mdn上面的定義： The act of a function calling itself, recursion is used to ...