Latest Tips
-
選擇或是拋棄物件屬性
有時候我們需要列出物件中某些屬性,假設我們有一個陣列來表達一個資料表,我們需要有些 function 來
select
欄位。 -
為什麼在做相等比較的時候,你應該使用 Object.is()
在 JavaScript 中對於較鬆散的相等比較,有更好的解決方式
-
在 JavaScript 遞歸、反覆運算並尾呼叫
如果你已經有一段實務經驗了,你最有可能會遇到遞迴,給定一個數字來定義階乘(factorial),
n! = n * n - 1 * ... * 1
就是一個標準的例子… -
使用監聽(tap)來快速 debug
一個相當有用 function 用來快速 debung 一連串的 function 呼叫、匿名函式,實際上你可能只是想要列印而已。
-
使用 Array 的三個技巧
在 JavaScript 中隨處都可以看見陣列,ECMAScript 6 介紹了展開運算符(spread operator),你可以透過它來處理陣列。在這篇 tip,我將示範三個有用的技巧,當你在寫程式時可以使用。
-
處理 Websocket 超時
一個控制 timeout 的技巧
-
Bind 物件到 function
了解在 JavaScript 中如何使用
Bind
方法和物件以及 function -
三個有用的技巧
三個非常有用的技巧來加速你的開發速度。
-
ES6 的 var 和 let
在這個 tip,我將介紹 var 和 let 他們之間不同的作用域。我應該使用 let 替代 var 嗎?讓我們來看一下吧!
-
在 functional programming break 或 continue 迴圈
迭代一個陣列來尋找值是很平常的事,如果我要搜尋的值是在陣列第一個,也不能直接從迴圈內部回傳,我們需要迭代整個陣列。在這個 tip 我們將看到如何使用
.some
和.every
快速完成迭代。 -
JavaScript 的逗號操作符
在一個表達式中,由左到右計算每個表達式並回傳最後的一個。
-
複製到剪貼版
本週我建立了一個常見的「複製到剪貼版」按鈕,我以前不曾做過這樣的功能,我想分享我如何實作它。
-
使用一個陣列建立一個簡單的迴圈
有時候我們需要不停的 loop 我們陣列的項目,像是旋轉木馬的圖片或是播放清單。這裡是如何把一個陣列並給他「looping powers」。
-
如何使用在函式中的可選參數(包含 callback)
你的 function 參數和 callback 是可選參數。
-
取得檔案的副檔名
如何更有效的取得檔案的附檔名?
-
使用「new」運算符的回傳值
當使用 new 和不使用 new 時,了解他們所回傳的值。
-
簡單的監聽 DOM 事件
一個優雅和簡單的方式來處理 DOM 事件。
-
實用的 Console Logging 技巧
使用條件中斷點的 logging 實用技巧。
-
在 JavaScript 簡單取得 unix timestamp
在 JavaScript 你可以簡單取得 unix timestamp
-
如何 reduce 陣列
有關使用
reduce
函式的一些提醒。 -
宣告的基本知識
了解並處理宣告。
-
使用 pure JavaScript 檢查文件是否準備
可以跨瀏覽器,而且使用 pure JavaScript 來確認文件是否已經載入完成。
-
從陣列計算最大和最小值
在數字陣列使用內建的 Max.max() 和 Max.min() 函式的方式。
-
了解傳送機制
JavaScript 技術上只傳送原始和物件類型的值(或參考)。在參考的類型下,參考值本身是 passed by value。
-
在函式參數裡使用解構子
你知道可以在函式的參數裡使用解構子嗎?
-
防止 Unapply 攻擊
凍結內建的屬性。
-
陣列平均值和中間值
計算陣列的平均值和中間值。
-
使用 JSON.Stringify
從 JSON 物件中,將被選到的屬性建立成字串。
-
進階 JavaScript 屬性
如何加入私有屬性、getters 和 setters 到物件。
-
在 JavaScript 中將多維陣列扁平化
三種不同的解決方法,將多維陣列合併為單一的陣列。
-
移除陣列重複元素
如何從陣列中移除不同資料類型重複的元素。
-
觀察在擴充中 DOM 的變化
由於現代動態的 JavaScript,當你在現有的網站開發擴充時,操作 DOM 並不容易。
-
賦值運算子
賦值是相當常見的。有時候我們這些「懶惰的開發者」覺得打字是很耗時的。所以我們使用一些技巧來幫助我們讓程式碼更乾淨簡單。
-
實作非同步迴圈
你或許可以實作非同步迴圈,但是執行時可能會遇到問題。
-
使用一行程式碼建立一個 `[0, 1, ..., N - 1]` 的陣列
使用一行程式碼,來產生有順序性的陣列。
-
使用一行程式碼建立一個 `[0, 1, ..., N - 1]` 的陣列
使用一行程式碼,來產生有順序性的陣列。
-
透過 Map() 在你的物件屬性加入排序
物件是一個沒有排序的屬性集合…意思說,如果你想嘗試在你的物件儲存已排序的資料,你需要重新檢查,因為屬性在物件不保證是有排序的。
-
避免修改或傳送 arguments 到其他函式 - 它會影響優化
在 JavaScript 的函式,變數名稱
arguments
讓你可以存取所有傳送到函式的參數。arguments
是一個 類陣列物件;arguments
可以使用陣列表示來存取,而且它有 length 屬性,但不具備陣列的filter
和map
以及forEach
的方法。以下程式碼是轉換arguments
到陣列相當普遍的做法。 -
將 truthy 和 falsy 轉換成布林值
邏輯運算子是 JavaScript 核心之一 ,在這裡你可以發現這個方式,不管你給他什麼值,都會得到 true 或 false 。
-
使用 memoization 加速遞迴
大家對費式(Fibonacci)數列都很熟悉。我們可以在 20 秒內寫出以下的函式。它可以執行,但是效率不高。它做了大量的重複計算,我們可以快取先前的計算結果來加快計算速度。
-
柯里化(currying)和部分應用程式
柯里化(currying)和部分應用程式(partial application)是將函式轉換成一般較小的 arity 和另一個函式的兩種方式。
-
JavaScript 中的捷徑計算
捷徑計算意思是說,假設第一個參數不足以確定表達式的值,第二個參數才會被執行,當 AND 函數的第一個參數計算結果為 false,則所有結果則為 false;當 OR 函數的第一個參數計算結果為 true,則所有結果為 true。
-
過濾和排序字串清單
你可能有一份很大的清單,而你需要過濾重複的內容並移除,再依字母排序。
-
使用立即函式表達式
稱作「Iffy」(IIFE - immediately invoked function expression)是一個匿名函式表達式,而且可以立即被調用,在 JavaScript 中有一些相當重要的用途。
-
使用 === 來替代 ==
==(或 !=)運算子如果在執行上需要的話,會自動將類型轉換。
===
(或!==
)運算子則不會執行轉換。===
(或!==
)用來比較數值和類型,相較於==
更來的快速。 -
轉換為數字更快的方式
轉換字串為數字是相當常見的。最簡單和快速的方式是使用 + 運算子來實現。
-
將陣列清空的兩種方法
在 JavaScript 中當你相要清空陣列,有許多方法,但這是最具效能的方法。
-
將陣列洗牌
Fisher-Yates Shuffling 是一個將陣列洗牌的演算法。
-
回傳物件並使用函式鏈結
在 JavaScript 物件導向中,我們在物件上建立函式,函式回傳的物件讓你可以將函式鏈結在一起。
-
安全的使用字串串接
假設你有一些不確定的變數類型,而你想將它們串接成字串。可以確定的是,算術運算不是應用在串接的地方,使用 concat 來串接。
-
Truncating 最快的方式(含有風險)
通常
~~X
速度比Math.trunc(X)
快,但是會造成你的程式碼變得很混亂。 -
Node.js - 執行尚未被 required 的模組
在 nodejs,你可以讓你的程式取決於
require('./something.js')
或node something.js
這兩種不同的方式來執行你的程式碼。如果你想要將你的獨立模組交互使用是非常有用的。 -
將參數傳送到 callback 函式
預設情況下,你不能傳送參數給 callback 函式,但是你可以利用 JavaScrip closure scope 的優點將參數傳給 callback 函式。
-
更簡單的方式將 indexOf 當作 contains 使用
JavaScript 預設沒有 contain 的方法。如果要檢查字串或是陣列內是否有子字串的存在你可以這樣做。
-
箭頭函式
介紹一個 ES6 的新特性 - 箭頭函式是一個方便的語法讓你用更少的程式碼做更多事。
-
測量 JavaScript 程式碼區塊性能的 tip
如果要快速的測量 JavaScript 程式碼區塊性能的話,我們可以使用 console 函式像是
console.time(label)
和console.timeEnd(label)
。 -
在 ES6 函式內的預設參數
在許多程式設計語言函數的參數預設是強制需要的,而開發者也會明確定義一個可選的參數。
-
提升變數
了解 hoisting 可以幫助你組織你的函式 scope。
-
檢查屬性是否存在物件內
這些方法都是檢查屬性是否存在目前的物件內。
-
模板字串
由於 ES6 中有了模板字串,JavaScript 可以使用模板字串來替代原本我們使用的引號字元。
-
將 Node List 轉換成陣列
這是快速,安全,可重複使用的方式,將 Node List 轉換成 DOM 元素的陣列。
-
在 JavaScript 使用嚴格模式
JavaScript 嚴格模式讓開發者可以寫出更「安全」的 JavaScript 程式碼。
-
撰寫一個可以接受單一參數和陣列的方法
你撰寫的函式要可以處理陣列或單一元素參數,而不是透過分開的方法來處理陣列和單一元素參數。這和 jQuery 一些函式工作原理相似(
css
將會修改所有和 selector matched 的)。 -
undefined 和 null 的差別
了解
undefined
和null
的差別。 -
將帶有音節字元的字串進行排序
JavaScript 原生的 sort 方法讓我們可以排序陣列。做一個簡單的
array.sort()
, 將每一個陣列元素視為字串並依字母排序。但是當你嘗試排序一個非 ASCII 字元陣列時,你會得到一個奇怪的結果。 -
改善巢狀化的條件式
我們要如何在 JavaScript 改善巢狀化的
if
條件式? -
在陣列中加入元素
在一個存在的陣列加入新的元素是一件很常見的事情,你可以使用 push 將元素加入到陣列的末端,或是使用 unshift 在陣列起始位置加入元素,也可以使用 splice 在陣列中間的地方加入元素。