JS之路 Day18- What is Biglnt?
其實我不知道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 ** ...
JS之路 Day17 - async/await(Promise語法糖)
前言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在回傳的時候會返回一個promise ...
JS之路 Day16 - Promise methods(承諾方法)
前言前幾天講的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(() => r ...
JS之路 Day15 - Promise Chain(承諾鏈)
前言有時候很常見會有情況是需要很多的非同步操作,每一個非同步的後續操作都建立在前面的非同步操作的成功,所以會繼續上一步的結果,在使用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 (resul ...
JS之路 Day14 - Promise(承諾)
前言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 狀態可以把它想像成一個承諾,答應了某件事情,不管最後有沒有成功,都會有 ...
JS之路 Day13 - Event Loop (事件循環)
前言昨天提到了JavaScript可以利用「並行的方式」去做到非同步這件事情,而關於這到底是怎麼辦到的,就是今天的主題,然後今天主要的內容都是以這個影片為基礎=> 所以說 event loop 到底是什麼玩意兒?| Philip Roberts | JSConf EU,這影片對於JavaScript如何進行非同步的操作講得很清楚,推薦看。
出自影片的圖:
而以下是我看完影片,研究之後的自己見解。
Call Stack每段程式的執行都會有call stack,可以用來紀錄執行的順序,只要函式在呼叫的時候,就會把它丟進去最下面,後面進來的就會再疊上去,而當函式處理完之後,再從最上面去拿走,這是一種後進先出的概念。
可以想像成一個洋芋片罐,最先放進去的洋芋片,會在洋芋片罐的最下方,當洋芋片都放完要拿的時候,先拿的那片洋芋片就會是洋芋片罐最上方的那個洋芋片。
之前有提到說JavaScript只有一個執行緒,所以不能做很多事情,其實是因為只有一個Call Stack,因此一次只能做一件事情。
Web Apis意思是瀏覽器所提供的 api,我覺得最簡單的話,setTimeout其實 ...
JS之路 Day12 - Asynchronous Programming (非同步程式設計)
前言Asynchronous的中文翻譯是非同步、異步,Synchronous的中文翻譯是同步,以下都會直接用同步、非同步來介紹。
非同步程式設計是JavaScript在學習時一個很大的重點,不光是容易誤解,不好理解,也因為實際上要常常使用到。
這一篇不講太多專業術語跟程式範例,會試著用很白話的方式把非同步這件事情給講清楚,那就直接開始進入今天的主題!
JavaScript是單一執行緒這是我覺得在了解同步跟非同步之前要先理解的第一個點,先完全不要管什麼是同步,什麼是非同步,一開始請先知道這個:
Javascript 程式執行,一次只能執行一件事情。
就像是一家餐廳,就只有一個廚師,那他就只能一次煮一道菜,假如有兩個廚師,就是同時煮兩道菜,很多廚師可以同時煮很多菜那就是多執行緒,可以一次同時進行很多事情。
無論如何,要記住這家叫做「Javascript」的餐廳,永遠只有一個廚師(執行緒)。
JavaScript 同步跟非同步剛開始學習時,同步會讓人感覺是,全部的動作同時開始進行,所以容易誤會(誤會同步=同時)。後來去查閱一些資料後發現其實同步是 => 一次做一 ...
JS之路 Day11 - Callback Funtion(回呼函式)
這其實不是難懂的概念,但卻是非同步程式設計中最基礎的螺絲釘,我自己在學習這 JS 非同步領域這系列的順序是這樣排的:
Callback => Promise => Async/Await
確保自己了解之後,再往下一個階段邁進,對於認知非同步反而會顯得更加輕鬆,不然容易變成拆東牆補西牆。
這個概念是我從 huli 的JavaScript 中的同步與非同步(上):先成為 callback 大師吧!學習到的,也是這篇讓我意識到callback的重要性,推薦可以去看。那麼就開始進入今天的主題。
Callback Funtion定義學習一個新的名詞術語,想知道它究竟是什麼,有很多方式,Callback來說的話我覺得可以看 MDN 文檔的定義,寫的蠻好理解:
A callback function is a function passed into another function as an argument
中文來說的話就是,當一個函數,作為參數傳遞給另一個函數,就是callback。
舉例來說:小白、小紅、小黃三個人在工作,可以這樣寫。
123whiteWork();redW ...
JS之路 Day10 - What is Date ?
一種用來處理特定的日期時間會用到的特殊物件,可以用來印出時間,修改時間或是設定時間。
要注意的一點是,JavaScript當中,使用Date就會一次把日期跟跟時間創造出來,不能只單獨創造出今天日期。
最簡單的使用方式就是直接new Date()就能直接創造出當前的時間。
12const time = new Date();console.log(time); // 印出當前時間
隨時放入參數的不同可以印出各種不同狀態的時間。new Date()是一種,另外還有三種創建時可以創建時的方式:
123const time = new Date(milliseconds); //第二種const time = new Date(dateString); //第三種const time = new Date(year, month, day, hours, minutes, seconds, milliseconds); //第四種
獲取時間中某個值有一些Date內建的方法,可以幫助獲取時間的某個值,可以分成以下幾種。
現在時間是 2022 年 9 月 25 日(星期日),使用此時此刻來做舉 ...
JS之路 Day09 - What is Map ?
前言昨天把set講完,今天換Map,首先要注意不要跟array的方法Array.prototype.map()搞混,這是不一樣的東西,那就 let’s go 今天的主題。
Map跟object一樣都是key-value pairs,不同的是Map的key可以是任意類型。
map 的基本方法跟屬性
new Map() => 創造 map。
set() => 為 map 裡面設定 key 跟 value。
get() => 取出 map 裡面的 key 跟 value。
delete() => 刪除 map 裡面的 key。
has() => map 裡存在指定的 key。
clear() => 刪除 map 裡面所有東西。
size => 會回傳 map 裡面元素的數量。
有些其實跟set來使用看看吧:
12345678910111213141516171819202122232425262728293031323334const map = new Map();consol ...