Vic's blog

抽象的一種資料類型 可以用任何方式來做出 Stack 或是 Queue 可以用 array 或是 linked list 做出來 undo / redo button 會使用到 Stack 的資料結構 想像 Stack → 洋芋片罐 移除的話從最上面移除 想像 Queue → 排隊 Hash Function 密碼做加密 javascript 的 objectsa and arrays 已經被 hashed 過 理解： 把一個值換成另外一個值 Hash Function I ：Division Method m= hashtable size n= # of elements to store into hashtable 公式 Index = Key mod m 衝突叫做 collison(有可能會發生) 優點是速度很快，跟 Multiplication Method 比起來 缺點 m 一定要 >= n 大小不能是 2 的 p 次方 Collision and Load...

跟 Array 非常類似，但有些不一樣 linear collection java 裡面如果寫 java 比較複雜，你要告訴 java 說這個 array 長度是多少 javascript 為什麼不需要設定 array 的長度有多少？ Linkeded List 在記憶體裡面位置是不連續的 實際上只有兩個 property， head 跟 length 會透過連接 value 及 next(一個 node 裡面會包含這兩個) head 指向第一個 value 後，next 會指向下一個 value 最後一個 next 沒有值了就指向 null 多指一個後，length + 1 advantages array 的話在一開始就已經定義了長度 linked list 一開始不會設定長度多少，會從 0 開始 跟 array 相比 linked list 在做 insertion 跟 deletion 非常的快 刪掉某一個值或是新增某一個值的速度會被 array 快很多 對於 linked list 來說刪除跟新增就是指向給替換一下就好 刪除 ...

假如排序好的話，有一種比 linear search 這種從第一個找到最後一個更快速的演算法 只需要一直切分對半，透過這種方式更快拿到目標。 所謂的 binary 是二進制 要注意的點，linear search 可以用在各種 array， 而 Binary Search 只能用在 sorted array More efficient than linear search 8 → 4 → 2 → 1， at most 3 steps to find what we want 時間複雜度 Worst Case Performance：O(log n) 時間複雜度 Best Case Performance： O(1) 時間複雜度 Average performance：O(log n) 其實也不算完全初學，之前就有碰過類似概念，稍微做一下整理。 核心概念Binary Search 是一種 在已排序資料中快速尋找目標值 的演算法。 它的核心就是 每次比較中間值，並把搜尋範圍縮小一半： 從整個資料範圍開始。 找到中間元素，和目標比較： 如果相等 → 找到答...

紀錄過程Linear Search → 號稱最簡單的演算法 Pseudocode (P 不發音) 不是真正的程式碼，只是用來表達情境 parameter 參數 思考一下我還記得 For loop 跟 While loop 差別嗎？ 想像中是表示從第一個開始尋找，找到最後一個，找到就回傳，如果真的沒找到全部跑完，那就回傳 -1。 作用在 Array 的時候。 那所謂最糟糕的情況就是就是要全部跑完都找不到，會在 Array 的最後一項。 如果總共有 n 項(index)，就會從頭 0、1 找到 n-1，每個都找一次就像是 for i → i → … → i 所以最壞狀況 Worst Case Performance： O(n) 最好的情況就是馬上找到，就直接在第一項。 Best Case Performance： O(1) 所以平均下來，你要找到你要的 n 的話 Average performance： O(n/2) 做個整理， 我覺得這個相對單純簡單，所以沒有太大問題， 目前有一些疑惑是： 上面提到的都是時間複雜度的部分，那空間複雜度的部分沒什麼概念 會作用在哪裡？什...

要看一個演算法好不好、運行快不快，就會需要用到 Big O notaion 運行得快不快 → 時間複雜度 消耗多少的電腦記憶體空間 → 空間複雜度 Big O notaion 是一個數學符號，可以拿來表示時間複雜度或是空間複雜度 如果兩種演算法都能做一樣的事情，只是做法不同而已的話，有差異的部分是時間、空間 比如加法到 n 有兩種方式，一種是 For 迴圈，一種是公式解 關於怎麼判斷演算法好壞，無非就是執行速度，或是占用記憶體多寡 一般沒有學過演算法的人很難看出來 大家在意的是時間跟空間 f(n) → f of n 來表示 時間複雜度可能會隨著 n 增加更多 可以理解成運行幾次 我想要透過研究及學習釐清的困惑點： 演算法這個詞是什麼意思？ 為什麼要用 Big O？ 了解 Complexlty 的幫助 演算法這個詞是什麼意思？定義：step-by-step procedure to solve a problem。 意思是說只要一步一步解決某一個問題，都可以稱作是演算法，而在這邊我會當作是作用於電腦的。 （設計給電腦執行的解法） 如果不...

本地端做好的網頁要讓大家都能看到就需要上傳到雲端，現今社會有很多種方式可以實現，研究之後發現這種服務還真不少，爬文整理吸收過後，大致可以分為以下這幾種： SaaS全名是 Software as a Service，中文叫軟體即服務，我理解成所有的應用程式，每一個 app 都算在裡面，可能會有一個免費版可以使用，也可以付費來享受完整版，由於只需要連網路，其他什麼都不需要準備，所以可以當作是種使用門檻最低的雲端服務形式。 PaaS全名是 Platform as a Service，中文叫做平台即服務，服務提供了開發環境，讓開發者不需要再自己去建立，這樣可以專注於應用程式的開發而不必擔心底層的基礎架構，這種模式包括開發工具、資料庫和其他基礎組件，減輕了應用程式的管理負擔，對新手開發者比較友善，所以網路上爬文對於剛碰部署的朋友們都建議從 PaaS 服務下手。 IaaS全名是 Infrastructure as a Service，中文叫做基礎架構即服務，顧名思義雲服務模式中最基本的一環，提供了所有開發者所需基礎架構，同時也讓開發者不需要準備任何硬體也能開發，高手境界，擁有高度的自由性跟擴...

網頁中常常在進去到真正內容之前，會先跳出一個「我不是機器人」的區塊，像是這樣： 可能是要驗證目前是不是真人在使用，只要勾選完後就可以正常前往，比較進階一點的可能會出現一個九宮格，問裡面哪一些圖裡面有車，答對了就可以進去，亂選就進不去。 專案中會用到，原本以為蠻複雜的但其實文件寫得很清楚。 接下來紀錄我在實作這個需求的脈絡。 確認需求reCAPTCHA 其實是有分版本的，v2 以及 v3，v3 是目前最新的。差別在於說 v3 是採取分數的方式，所以使用者不用點擊按鈕了，不然的話 v2 時，還是要點擊一個「我不是機器人」的按鈕，取而代之的是運行在後台，從後台來判斷是不是機器人。 v3 等於說 google 會自動判斷你這個人進到這個網站會給你多少分，然後後台可以去控制幾分才能進到這個網頁裡面。 v2 是用問題來驗證要求。v3 是用分數來驗證要求。 假如說需求是會希望看到「我不是機器人」的選項可以選擇 v2，想要更方便讓使用者不要有負擔的話可以選擇 v3，這邊我是選擇 reCAPTCHA v2。 註冊 reCAPTCHA確認好需求好在寫程式之前，要先去 reCAPTCHA 的官網去註冊...

IIFE 的全名是 immediately-invoked function expression。 是在 JavaScript 中可以立即執行的函式，我個人比較少在實作上去使用到這個技術，但也是重要的概念。 可以立即執行代表著三件事情。 不需要去命名，既然可以馬上執行了，代表不需要一個名字來在之後呼叫它。 不需要透過呼叫，如第一點提到的。 無法在程式外再次執行。 實際上的寫法就是宣告完函數之後就直接執行，使用的方式就像是現在畫面上的圖片，用一個括號把函數括起來後，再接一個。 也可以使用帶參數的方式。 像是這樣： 123(function () { console.log("hi vic");})(); 回到今天的問題，JavaScript 中的 IIFE 還會用得到嗎？ 我個人覺得大部分情境下不太需要。 因為我覺得當初設計出 IIFE 的主要目的是在於模擬一個局部的作用域，防止污染，污染的意思是作用域裡面的變數不會影響作用域外面。 因為在 ES6 之前只有 function 的作用域(var)，但在 ES6 之後引入’let’跟’...

前言淺拷貝和深拷貝是在處理物件和陣列時非常重要的概念， 了解它們的差異可以幫助我們選擇最適合的複製方式，以滿足特定的需求和性能要求。 用此篇來紀錄，如果是現在的我，會怎麼來理解淺拷貝與深拷貝。 JS 有分成基本型別跟物件型別基本型別(Primitive) ⇒ 如：number、string、boolean、null、undefined。 純值的部分都含括在裡面，包括數字、字串、true、false。 基本型別不會碰到淺拷貝與深拷貝的問題。 原因是因為，複製給變數值，就直接賦值，新複製的不會影響原本的。 用實際程式碼來解釋： 這樣不會有大太問題，但是物件型別就沒辦法有相同效果。 物件型別(Object) ⇒ 包括 陣列、物件、函式。 用陣列的方式做例子： 會發現修改了 array2，array 也會被改變。 其實原因是指向問題，物件型別跟基本型別，在傳遞參數的方式不同，導致變數指向記憶體的位置也會不同形式。 型別的不同，會影響指向基本型別，在賦值傳遞參數時是「 複製值 (value) 」。 物件型別，在賦值傳遞參數時是「 複製地址 (address) 」。 pass by va...

前言今天主要講的會分成兩個部分，分別是 offset 系列 client 系列 然後這兩種都會個別擁有Left、Top、Width和Height。 但今天如果我想獲得元素本身的寬度時，知道是要Width，但是要用 offset 系列還是 client 系列是會讓人感到困惑的。 會遇到的問題像是說：offsetLeft 跟 clientLeft 差在哪裡？offsetTop 跟 clientTop 差在哪裡？ 以下直接列出我整理後的重點。 Width / Height offsetWidth / offsetHeight 是「元素本身」的寬度/高度 (包括 border) clientWidth / clientHeight 是「元素本身」的寬度/高度 (不包括 border) 可以發現其實這兩者只差在有沒有包括border。 Left / Top offsetLeft / offsetTop 是元素本身相對於母元素的水平/垂直距離。 clientLeft / clientTop ...