Vic's blog

今天來講昨天沒講完的兩個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 ...

前言今天要來講的主題是this，在JavaScript中的this可以在呼叫函式時，透過不同方式決定它要指向哪一個物件，而關於什麼時候會指向什麼地方，這就是this的困難之處。 理解this來由一開始自己的猜測理解是，有些很冗長的名字，假如有一個代名詞，去代替它會很好很多。 比如說，我要描述在一家便利商店打工的小白擁有的東西： 在便利商店打工的小白擁有著一台機車，在便利商店打工的小白還有隨身攜帶一個水壺，而且在便利商店打工的小白手中現在還拿著一個過期的超商飯糰。 假如把「便利商店打工的小白」用「他」來替換掉的話： 在便利商店打工的小白擁有著一台機車，「他」還有隨身攜帶一個水壺，而且「他」手中現在還拿著一個過期的超商飯糰。 程式碼寫起來概念會像這樣： 這邊變數名稱就不要太長單純是white就好，但可以想像成叫做SuperWhiteWorkingInAConvenienceStore比較符合概念。 1234567891011const white = { transportation: "motorcycle", thing: "kettl...

前言ES6 才加入的primitive type，我個人覺得是primitive type當中最難理解的。 object的key在 ES6 之前都只能是字串，就算寫成數字也會被轉成字串，所以之前我會說，object的key只能是字串，但這個說法被symbol打破了，它也可以拿來當作object的key，而它為什麼可以，以及symbol是處理什麼領域的問題，讓我們看下去吧。 特性：獨一無二symbol可以直接跟獨一無二的值劃上等號，只會有一個保證是唯一的，這其實就是可以拿來當作object的key的原因，不會重複很適合拿來幫物件取名。 這樣記：只要透過symbol建立的值，都會獲得特性：獨一無二。 建立：symbol建立symbol的方式很簡單，只要使用Symbol()即可，不需要用new。 1234// 語法const fruit = Symbol();console.log(typeof symbol); // symbol 可以給Symbol裡面加名字，在Symbol()的()裡面，可以當作它是這個變數fruit的描述，而它的類別是Symbol。 由於特性：獨一無二，所以當...

其實我不知道Biglnt的中文可以叫什麼比較好，直接翻成「大整數」似乎不太精確。 今天會從以下這些角度來介紹： Biglnt為何而來 定義及如何使用 可能會踩的雷區 數字類型 => Biglnt跟Number在JavaScript中，Biglnt也是其中的一種primitive，也就是基本型別。 複習一些有哪些基本型別，基本上可以由字串、數字、布林值含括： String Number Boolean Null Undefined Symbol 除了這些，其實還有一種基本型別叫做Biglnt，也是用來處裡數字的部分，就跟Number一樣的領域。 主要是因為光是Number處理數字會有一些無法顧及到的部分，所以才有了需要Biglnt的誕生。 舉例來說，只要數字太大，Number就沒辦法顯示精準，而這個範圍大致是2**53-1，從Number.MAX_SAFE_INTEGER裡面描述的最大安全整數範圍來判斷，也就是說超過了這個數字，Number就沒辦法維持準確性。 不精確的意思是代表說明明兩個不一樣，但判斷不出來，舉一個例子是在JavaScript當中的2 ...

前言async/await的方式提供了promise一種新的寫法，至於有沒有更方便及更高的可讀性，我覺得使用了async/await是更容易進行編寫的，至少可以不用一直.then下去，使用了async/await之後，就跟.then說再見。 今天會介紹的順序： 這兩個好用的關鍵字分別代表的意思。 async/await 所達成的「同步」效果。 錯誤處理的應對措施。 async這是一個加在function前面的關鍵字，沒有加就是普通的function，加了之後就會變成async function就會代表著現在這個function是一個非同步的function。 123456789// 普通的functionfunction add(num) { return 10 + num;}// async functionasync function add(num) { return 10 + num;} 而會說加上async後function會變成非同步的原因主要是因為async會讓function在回傳的時候會返回一個prom...

前言前幾天講的Promise的 then()、catch()、finally()也是Promise的 methods，從 MDN 的定義上會把這三種 methods 稱之為Instance methods，而今天要講的是Static methods，中文叫做靜態方法，大致上可以分成六種，這些的方法都是為了更好的使用Promise而被發明出來，可能用不到但懂了沒壞處。 哪六種： Promise.all() Promise.allSettled() Promise.any() Promise.race() Promise.resolve() Promise.reject() 會嘗試用好理解的方式介紹，let’s go。 Promise.all()執行很多的Promise會用到，簡單來說，全部都達成才會成功，不然就會失敗。舉一個例子，小白願意去找工作，但他有著前提條件，只要他擁有了一台車，然後有了房子，還擁有 100 萬的存款，他就會去找工作。 12345678Promise.all([ new Promise((resolve) => setTimeout(() =>...

前言有時候很常見會有情況是需要很多的非同步操作，每一個非同步的後續操作都建立在前面的非同步操作的成功，所以會繼續上一步的結果，在使用callback處理這種狀況的時候，就會產生可怕的callback hell，而Promise Chain可以很好的改善這個問題，就讓我們看下去。 promise chain 的使用方式​從看一個例子來了解使用方式。​ 12345678910111213141516171819202122const promise = new Promise(function (resolve) { resolve(1);});​promise .then(function (result) { console.log(result); // 1 return result + 1; }) .then(function (result) { console.log(result); // 2 return result + 1; }) .then(function (re...

前言Promise在程式中非常好用，是因為很多操作都需要使用到非同步的概念，而要處理非同步，除了使用callback function之外，就是會使用Promise。 這篇講述我是如何理解這個概念。 今天主要講Promise的狀態跟呼叫。 Promise是一個constructor function，假如需要自己寫一個Promise時，語法如下： 1234const promise = new Promise((resolve, reject) => { resolve(value); reject(error);}); 它的參數resolve以及reject是它自己所提供的callback，不用自己額外寫，而這兩個的名稱可以自己定義像是： 1234const promise = new Promise((a, b) => { a(); b();}); 效果也一樣，但是不建議這麼做。 而會設定這兩個參數，是有它的意義存在，從承諾來談吧。 Promise 狀態可以把它想像成一個承諾，答應了某件事情，不管最後有沒有成功，...