搜尋文章分類:JavaScript

箱子符號

了解 ES6 JavaScript 當中的內建資料結構: Map

JavaScript ES6 中有一個用法與物件近似的資料結構我一直不是很清楚用途。 —— Map,這篇文章會主要拿熟知常見的物件與 Map 來做比較以分辨出 Map 的特性與使用時機。總結來說可以把 Map 當作是用來頻繁讀寫的物件,它具備更好的性能、更明確的語法。

進度條錯誤符號

使用 JavaScript try...catch 來控制程式中的錯誤

程式中出現錯誤是必不可少的,有千萬個原因可能造成程式出現錯誤無法運行,這時候在 JavaScript 中就可以使用 try...catch 語法來處理錯誤情境,除了攔截錯誤也可以自行定義與拋出錯誤,讓程式中的錯誤更容易被理解與管理。

方框上有代碼的符號

Null vs Undefined 差在哪?

null 與 undefined 兩者的意涵非常相近,意思都是「沒有東西」,但在根本上它們是截然不同的東西,雖然都代表「沒東西」,但一個是「存在沒東西」一個是「不存在沒東西」,藉由這篇文章我來釐清解釋他們兩者之間的關係。

方框上有代碼的符號

可以怎麼使用 JavaScript 條件運算子?

流程控制是程式語言中基礎不可少的概念之一,除了使用 if、else 之外,JavaScript 還提供一個簡潔的寫法,就是條件(三元)運算子,顧名思義,由三個片段所組成,分別是:「條件、成功流程與失敗流程」。用更精簡的語法來撰寫流程控制,條件運算子是常見且必學的語法之一

雙箭頭符號

為什麼你需要 JavaScript 預設參數?

在 JavaScript 中函式可以使用任意數量的參數與引數,如果參數沒有對應的引數將導致該變數成為未定義,參數(佔位符)代表一個值你期望函式所接收;引數(實際值)則是函式呼叫時所傳遞的值,讓我們用預設參數來解決這個問題吧!

JS 物件語法符號

為什麼你需要 JavaScript 加強版物件實字?

在 JavaScript 中活用 ES6 帶來的加強版物件實字可以精簡程式片段,甚至還可以動態的計算創造物件內的項目!實字(Literal) 指的是代表它自己的數值,舉例來說數字 `25` 或 `你好世界` 而進階物件實字就是在物件中使用的值。

方框內有齒輪符號

從頭了解為什麼你需要 JavaScript 閉包

閉包是一個聽起來非常難懂而且枯燥的題材,實際上概念很簡單,在了解閉包之前你必須熟悉作用域與事件佇列的概念。簡單來說閉包可以讓你在函式內獲得函式外作用域的變數,透過實際案例來觀察閉包的存在並且了解在什麼場合下會需要閉包,以及相關的取捨。

計算符號

了解 JavaScript 運算式與表達式

講解中「表達式」與「運算式」的區別。表達式會產生一個值,而運算式則是執行動作。表達式必須存在於某個運算式中才能被使用。我回過頭來才發現表達式與運算式的重要性,了解 JavaScript 底層的邏輯對我們使用像是 React 這類框架也有幫助。

擴張符號

從動圖與實例學會解構語法糖

藉由解構語法可以快速取出目前陣列或物件的資料,是個常見且必學的語法糖。透過解構可以快速取出目前陣列或物件的資料,並且可以將取出的資料重新命名,讓程式碼更簡潔,是個簡單方便的語法,舉幾個實際例子就會發現它的用處很多且很好懂。

縮放符號

展開與其餘運算子,三個點是什麼魔法?

藉由學習 ES6 推出的展開與其餘運算子,在許多場合可以更直覺易讀的撰寫相同的程式碼,藉由動圖與實際案例來了解它們的用途吧。語法一模一樣都是三個點,但在不同的位置會有不同的效果,這篇文章也會介紹展開運算子 (Spread Operator) 與其餘運算子 (Rest Operator)之間的差異。

方框上有代碼的符號

透過簡單的故事了解 JavaScript 中的 this

本篇文章將透過簡單易懂的辭彙介紹 JavaScript 中的 this,讓讀者能夠更深入理解 JavaScript 中 this 的使用方式與特性。`this` 會如此讓人混亂是因為它需要基於前後文來判斷,最簡單的原則就是:誰呼叫 `this`,`this` 就代表誰。

雙箭頭符號

為什麼你需要箭頭函式?

JavaScript 箭頭函式是 ES6 版本中新增的語法,能夠簡潔明瞭地定義函式,並且已經被廣泛的使用當中。於本篇文章中我們將會學習如何使用箭頭函式來簡化程式碼,並且了解這個語法的特性以及要注意的地方,以及它可以被使用在那些場合當中。

方框上有代碼的符號

不要再使用 == 了,改使用 === 吧!

絕大多數時候你不會想要使用「鬆散比對」,嘗試使用「嚴謹的比對」將程式撰寫得嚴謹精確一些。在絕大多數的情況下,你不會想要使用鬆散比對,但是在某些情況下,可能會使用它會更為便利,本篇文章將介紹相關取捨,以及你可以在什麼時候使用不同的比較方式。

文字片段與放大鏡符號

JavaScript 五個步驟製作搜尋功能

搜尋列是普遍輸入資料於 HTML 中最常用的方式之一,讓我們學會如何使用它。本篇文章將會練習從無到有包含介面製作一個搜尋框,可以輸入結果並比對現有資料顯示關聯的內容,是一個非常適合 JavaScript 新手的一道實用練習題目。

+1符號

JavaScript 五個步驟製作計數器

計數器是入門各大框架基本會見到的習題,可以說是任何 App 最低限度的功能展示。這次使用原生的 JavaScript 來重現該題目,並且一步一步的思考並改善結果,本篇文章將會練習製作一個具備加、減、重製功能的 JavaScript 計數器。

一條線和一顆球的符號

從動圖輕鬆學會撰寫非同步 JavaScript(第二章)

上一章節從動圖理解了非同步的概念,這一章節將會介紹如何撰寫非同步程式。從簡單的回呼函式到 Promise 再到使用 Async/Await 語法。目前知道非同步的程式實際上是透過執行環境(瀏覽器、Node.js) 所提供的 API 來達成同時間處理多件事情的。

一條線和一顆球的符號

從動圖輕鬆入門非同步 JavaScript(第一章)

了解單線程的 JavaScript 背後如何運作、併發處理事件背後的奧妙、拆解晦澀難懂的專有名詞。瀏覽器執行環境中的 JavaScript 是單線程的,也就是一次只能執行一件事,如此一來其他事情就都會被擱置在後,讓使用者等待。這是非常大的問題,但解決方法也非常的簡單:「不要呆呆站在那裏等!」。

碼表符號

非同步 JavaScript 時間操縱之術: setTimeout 與 setInterval

在介紹到同步與非同步代碼時,常常會以 setTimeout 或 setInterval 來模擬程式被非同步執行的狀況,這兩種「方法」都不算是 JavaScript 的一部分,不過大多主流執行環境都有提供 (瀏覽器、Node.js),是很好練習非同步處理 JavaScript 的起點,本文將會詳細講解其背後的故事與原理。

節點符號

DOM API 一篇就會!

身為前端必學如何操控網頁就需要學習 DOM,用一篇文章快速教你如何程序化的更動網頁,一起來學會如何存取、編輯與監聽 DOM,還有綜合懶人包!如果對 Javascript 物件有一定的了解,代表你已經差不多會操縱 DOM 了,如果還不熟悉,建議可以先了解後再學習 DOM API。

方框上有代碼的符號

使用可選串聯存取不確定是否存在的資料

學習可選串聯語法可以讓我們安全的存取某個嵌套的物件屬性,就算其屬性並不存在也不會導致錯誤。存取物件屬性對開發者來說是一件非常直覺且每天都在做的事,但當資料的來源不穩定,像是使用第三方來源的資料或用戶輸入,應該如何迴避因使用不存在的值而出現的錯誤呢?來試試看可選串聯語法。