了解了 JavaScript Map,但 WeakMap 又是什麼東西?
前面寫了一篇文章關於 ES6 JavaScript 當中的內建資料結構: Map,這次來談談 WeakMap,它又與 Map 有什麼不同呢?會發現 WeakMap 相較 `Map` 少了非常多可用的方法,這是因為它們的根本處理資料的方式不同,Map 是強引用,而 WeakMap 是弱引用。
前面寫了一篇文章關於 ES6 JavaScript 當中的內建資料結構: Map,這次來談談 WeakMap,它又與 Map 有什麼不同呢?會發現 WeakMap 相較 `Map` 少了非常多可用的方法,這是因為它們的根本處理資料的方式不同,Map 是強引用,而 WeakMap 是弱引用。
JavaScript ES6 中有一個用法與物件近似的資料結構我一直不是很清楚用途。 —— Map,這篇文章會主要拿熟知常見的物件與 Map 來做比較以分辨出 Map 的特性與使用時機。總結來說可以把 Map 當作是用來頻繁讀寫的物件,它具備更好的性能、更明確的語法。
程式中出現錯誤是必不可少的,有千萬個原因可能造成程式出現錯誤無法運行,這時候在 JavaScript 中就可以使用 try...catch 語法來處理錯誤情境,除了攔截錯誤也可以自行定義與拋出錯誤,讓程式中的錯誤更容易被理解與管理。
null 與 undefined 兩者的意涵非常相近,意思都是「沒有東西」,但在根本上它們是截然不同的東西,雖然都代表「沒東西」,但一個是「存在沒東西」一個是「不存在沒東西」,藉由這篇文章我來釐清解釋他們兩者之間的關係。
流程控制是程式語言中基礎不可少的概念之一,除了使用 if、else 之外,JavaScript 還提供一個簡潔的寫法,就是條件(三元)運算子,顧名思義,由三個片段所組成,分別是:「條件、成功流程與失敗流程」。用更精簡的語法來撰寫流程控制,條件運算子是常見且必學的語法之一
在 JavaScript 中函式可以使用任意數量的參數與引數,如果參數沒有對應的引數將導致該變數成為未定義,參數(佔位符)代表一個值你期望函式所接收;引數(實際值)則是函式呼叫時所傳遞的值,讓我們用預設參數來解決這個問題吧!
在 JavaScript 中活用 ES6 帶來的加強版物件實字可以精簡程式片段,甚至還可以動態的計算創造物件內的項目!實字(Literal) 指的是代表它自己的數值,舉例來說數字 `25` 或 `你好世界` 而進階物件實字就是在物件中使用的值。
閉包是一個聽起來非常難懂而且枯燥的題材,實際上概念很簡單,在了解閉包之前你必須熟悉作用域與事件佇列的概念。簡單來說閉包可以讓你在函式內獲得函式外作用域的變數,透過實際案例來觀察閉包的存在並且了解在什麼場合下會需要閉包,以及相關的取捨。
講解中「表達式」與「運算式」的區別。表達式會產生一個值,而運算式則是執行動作。表達式必須存在於某個運算式中才能被使用。我回過頭來才發現表達式與運算式的重要性,了解 JavaScript 底層的邏輯對我們使用像是 React 這類框架也有幫助。
藉由解構語法可以快速取出目前陣列或物件的資料,是個常見且必學的語法糖。透過解構可以快速取出目前陣列或物件的資料,並且可以將取出的資料重新命名,讓程式碼更簡潔,是個簡單方便的語法,舉幾個實際例子就會發現它的用處很多且很好懂。
藉由學習 ES6 推出的展開與其餘運算子,在許多場合可以更直覺易讀的撰寫相同的程式碼,藉由動圖與實際案例來了解它們的用途吧。語法一模一樣都是三個點,但在不同的位置會有不同的效果,這篇文章也會介紹展開運算子 (Spread Operator) 與其餘運算子 (Rest Operator)之間的差異。
本篇文章將透過簡單易懂的辭彙介紹 JavaScript 中的 this,讓讀者能夠更深入理解 JavaScript 中 this 的使用方式與特性。`this` 會如此讓人混亂是因為它需要基於前後文來判斷,最簡單的原則就是:誰呼叫 `this`,`this` 就代表誰。
JavaScript 箭頭函式是 ES6 版本中新增的語法,能夠簡潔明瞭地定義函式,並且已經被廣泛的使用當中。於本篇文章中我們將會學習如何使用箭頭函式來簡化程式碼,並且了解這個語法的特性以及要注意的地方,以及它可以被使用在那些場合當中。
絕大多數時候你不會想要使用「鬆散比對」,嘗試使用「嚴謹的比對」將程式撰寫得嚴謹精確一些。在絕大多數的情況下,你不會想要使用鬆散比對,但是在某些情況下,可能會使用它會更為便利,本篇文章將介紹相關取捨,以及你可以在什麼時候使用不同的比較方式。
搜尋列是普遍輸入資料於 HTML 中最常用的方式之一,讓我們學會如何使用它。本篇文章將會練習從無到有包含介面製作一個搜尋框,可以輸入結果並比對現有資料顯示關聯的內容,是一個非常適合 JavaScript 新手的一道實用練習題目。
計數器是入門各大框架基本會見到的習題,可以說是任何 App 最低限度的功能展示。這次使用原生的 JavaScript 來重現該題目,並且一步一步的思考並改善結果,本篇文章將會練習製作一個具備加、減、重製功能的 JavaScript 計數器。
上一章節從動圖理解了非同步的概念,這一章節將會介紹如何撰寫非同步程式。從簡單的回呼函式到 Promise 再到使用 Async/Await 語法。目前知道非同步的程式實際上是透過執行環境(瀏覽器、Node.js) 所提供的 API 來達成同時間處理多件事情的。
了解單線程的 JavaScript 背後如何運作、併發處理事件背後的奧妙、拆解晦澀難懂的專有名詞。瀏覽器執行環境中的 JavaScript 是單線程的,也就是一次只能執行一件事,如此一來其他事情就都會被擱置在後,讓使用者等待。這是非常大的問題,但解決方法也非常的簡單:「不要呆呆站在那裏等!」。
在介紹到同步與非同步代碼時,常常會以 setTimeout 或 setInterval 來模擬程式被非同步執行的狀況,這兩種「方法」都不算是 JavaScript 的一部分,不過大多主流執行環境都有提供 (瀏覽器、Node.js),是很好練習非同步處理 JavaScript 的起點,本文將會詳細講解其背後的故事與原理。
身為前端必學如何操控網頁就需要學習 DOM,用一篇文章快速教你如何程序化的更動網頁,一起來學會如何存取、編輯與監聽 DOM,還有綜合懶人包!如果對 Javascript 物件有一定的了解,代表你已經差不多會操縱 DOM 了,如果還不熟悉,建議可以先了解後再學習 DOM API。
學習可選串聯語法可以讓我們安全的存取某個嵌套的物件屬性,就算其屬性並不存在也不會導致錯誤。存取物件屬性對開發者來說是一件非常直覺且每天都在做的事,但當資料的來源不穩定,像是使用第三方來源的資料或用戶輸入,應該如何迴避因使用不存在的值而出現的錯誤呢?來試試看可選串聯語法。