Latest Tips

• @loverajoel in javascript

  循環陣列

  這裡有一些方法在 JavaScript 中可以循環陣列。我們將從典型例子並且補充標準規範。

  Read More →
• @loverajoel in react

  React 冒險者指南（Part I）

  所以你聽說過 React 這件事，實際上或許你通過了一些網頁看過了文件，然後你突然碰到一些莫名其妙的與 Webpack、Browserify、Yarn、Babel、NPM 等等更多相關的東西。

  Read More →
• @pansila in more

  Vuejs 如何在資料綁定時，拷貝、更新並取代原來的資料

  在這篇 Tip，我將介紹一個範例來示範 Vuejs 可能和其他框架產生的衝突。

  Read More →
• @loverajoel in javascript

  選擇或是拋棄物件屬性

  有時候我們需要列出物件中某些屬性，假設我們有一個陣列來表達一個資料表，我們需要有些 function 來 select 欄位。

  Read More →
• @loverajoel in react

  增強你的 React component 的組合

  React 對於你如何組織你的 component 是相當靈活的，但這個模式讓你的 app component 可以更有效的利用。

  Read More →
• @TarekAlQaddy in javascript

  為什麼在做相等比較的時候，你應該使用 Object.is()

  在 JavaScript 中對於較鬆散的相等比較，有更好的解決方式

  Read More →
• @loverajoel in javascript

  在 JavaScript 遞歸、反覆運算並尾呼叫

  如果你已經有一段實務經驗了，你最有可能會遇到遞迴，給定一個數字來定義階乘（factorial），n! = n * n - 1 * ... * 1 就是一個標準的例子…

  Read More →
• @loverajoel in react

  從 State 到 Prop 的映射

  你可能在你建立的 React Apps 使用 Redux Store 有段時間了，當 component 經常更新時，你可能會感到很不便。 你已經徹底建立你的 state，而且架構你的每個 component 所需要的 state。然而在這些更新 state 的背後，總是在做 state 的 map 和計算。

  Read More →
• @loverajoel in javascript

  使用監聽（tap）來快速 debug

  一個相當有用 function 用來快速 debung 一連串的 function 呼叫、匿名函式，實際上你可能只是想要列印而已。

  Read More →
• @hassanhelfi in javascript

  使用 Array 的三個技巧

  在 JavaScript 中隨處都可以看見陣列，ECMAScript 6 介紹了展開運算符（spread operator），你可以透過它來處理陣列。在這篇 tip，我將示範三個有用的技巧，當你在寫程式時可以使用。

  Read More →
• @loverajoel in javascript

  處理 Websocket 超時

  一個控制 timeout 的技巧

  Read More →
• @loverajoel in angular

  在 AngularJs 防止不必要的 scope 建立

  在這個 tip 我會示範如何在 scope 之件傳送資料，防止 ng-repeat 和 ng-if 建立不必要的 scope

  Read More →
• @loverajoel in javascript

  Bind 物件到 function

  了解在 JavaScript 中如何使用 Bind 方法和物件以及 function

  Read More →
• @leandrosimoes in javascript

  三個有用的技巧

  三個非常有用的技巧來加速你的開發速度。

  Read More →
• @richzw in javascript

  ES6 的 var 和 let

  在這個 tip，我將介紹 var 和 let 他們之間不同的作用域。我應該使用 let 替代 var 嗎？讓我們來看一下吧！

  Read More →
• @vamshisuram in javascript

  在 functional programming break 或 continue 迴圈

  迭代一個陣列來尋找值是很平常的事，如果我要搜尋的值是在陣列第一個，也不能直接從迴圈內部回傳，我們需要迭代整個陣列。在這個 tip 我們將看到如何使用 .some 和 .every 快速完成迭代。

  Read More →
• @bhaskarmelkani in javascript

  JavaScript 的逗號操作符

  在一個表達式中，由左到右計算每個表達式並回傳最後的一個。

  Read More →
• @loverajoel in javascript

  複製到剪貼版

  本週我建立了一個常見的「複製到剪貼版」按鈕，我以前不曾做過這樣的功能，我想分享我如何實作它。

  Read More →
• @jamet-julien in javascript

  使用一個陣列建立一個簡單的迴圈

  有時候我們需要不停的 loop 我們陣列的項目，像是旋轉木馬的圖片或是播放清單。這裡是如何把一個陣列並給他「looping powers」。

  Read More →
• @alphashuro in zh-TW

  如何使用在函式中的可選參數（包含 callback）

  你的 function 參數和 callback 是可選參數。

  Read More →
• @richzw in javascript

  取得檔案的副檔名

  如何更有效的取得檔案的附檔名？

  Read More →
• @Morklympious in javascript

  使用「new」運算符的回傳值

  當使用 new 和不使用 new 時，了解他們所回傳的值。

  Read More →
• @octopitus in javascript

  簡單的監聽 DOM 事件

  一個優雅和簡單的方式來處理 DOM 事件。

  Read More →
• @zackhall in javascript

  實用的 Console Logging 技巧

  使用條件中斷點的 logging 實用技巧。

  Read More →
• @nmrony in javascript

  在 JavaScript 簡單取得 unix timestamp

  在 JavaScript 你可以簡單取得 unix timestamp

  Read More →
• @darul75 in javascript

  如何 reduce 陣列

  有關使用 reduce 函式的一些提醒。

  Read More →
• @adaniloff in javascript

  宣告的基本知識

  了解並處理宣告。

  Read More →
• @loverajoel in javascript

  使用 pure JavaScript 檢查文件是否準備

  可以跨瀏覽器，而且使用 pure JavaScript 來確認文件是否已經載入完成。

  Read More →
• @loverajoel in javascript

  從陣列計算最大和最小值

  在數字陣列使用內建的 Max.max() 和 Max.min() 函式的方式。

  Read More →
• @bmkmanoj in javascript

  了解傳送機制

  JavaScript 技術上只傳送原始和物件類型的值（或參考）。在參考的類型下，參考值本身是 passed by value。

  Read More →
• @dislick in javascript

  在函式參數裡使用解構子

  你知道可以在函式的參數裡使用解構子嗎？

  Read More →
• @emars in javascript

  防止 Unapply 攻擊

  凍結內建的屬性。

  Read More →
• @soyuka in javascript

  陣列平均值和中間值

  計算陣列的平均值和中間值。

  Read More →
• @vamshisuram in javascript

  使用 JSON.Stringify

  從 JSON 物件中，將被選到的屬性建立成字串。

  Read More →
• @mallowigi in javascript

  進階 JavaScript 屬性

  如何加入私有屬性、getters 和 setters 到物件。

  Read More →
• @loverajoel in javascript

  在 JavaScript 中將多維陣列扁平化

  三種不同的解決方法，將多維陣列合併為單一的陣列。

  Read More →
• @danillouz in javascript

  移除陣列重複元素

  如何從陣列中移除不同資料類型重複的元素。

  Read More →
• @beyondns in javascript

  觀察在擴充中 DOM 的變化

  由於現代動態的 JavaScript，當你在現有的網站開發擴充時，操作 DOM 並不容易。

  Read More →
• @hsleonis in javascript

  賦值運算子

  賦值是相當常見的。有時候我們這些「懶惰的開發者」覺得打字是很耗時的。所以我們使用一些技巧來幫助我們讓程式碼更乾淨簡單。

  Read More →
• @madmantalking in javascript

  實作非同步迴圈

  你或許可以實作非同步迴圈，但是執行時可能會遇到問題。

  Read More →
• @SarjuHansaliya in javascript

  使用一行程式碼建立一個 `[0, 1, ..., N - 1]` 的陣列

  使用一行程式碼，來產生有順序性的陣列。

  Read More →
• @SarjuHansaliya in javascript

  使用一行程式碼建立一個 `[0, 1, ..., N - 1]` 的陣列

  使用一行程式碼，來產生有順序性的陣列。

  Read More →
• @loverajoel in javascript

  透過 Map() 在你的物件屬性加入排序

  物件是一個沒有排序的屬性集合…意思說，如果你想嘗試在你的物件儲存已排序的資料，你需要重新檢查，因為屬性在物件不保證是有排序的。

  Read More →
• @berkana in javascript

  避免修改或傳送 arguments 到其他函式 - 它會影響優化

  在 JavaScript 的函式，變數名稱 arguments 讓你可以存取所有傳送到函式的參數。arguments 是一個 類陣列物件；arguments 可以使用陣列表示來存取，而且它有 length 屬性，但不具備陣列的 filter 和 map 以及 forEach 的方法。以下程式碼是轉換 arguments 到陣列相當普遍的做法。

  Read More →
• @hakhag in javascript

  將 truthy 和 falsy 轉換成布林值

  邏輯運算子是 JavaScript 核心之一 ，在這裡你可以發現這個方式，不管你給他什麼值，都會得到 true 或 false 。

  Read More →
• @hingsir in javascript

  使用 memoization 加速遞迴

  大家對費式（Fibonacci）數列都很熟悉。我們可以在 20 秒內寫出以下的函式。它可以執行，但是效率不高。它做了大量的重複計算，我們可以快取先前的計算結果來加快計算速度。

  Read More →
• @bhaskarmelkani in javascript

  柯里化（currying）和部分應用程式

  柯里化（currying）和部分應用程式（partial application）是將函式轉換成一般較小的 arity 和另一個函式的兩種方式。

  Read More →
• @bhaskarmelkani in javascript

  JavaScript 中的捷徑計算

  捷徑計算意思是說，假設第一個參數不足以確定表達式的值，第二個參數才會被執行，當 AND 函數的第一個參數計算結果為 false，則所有結果則為 false；當 OR 函數的第一個參數計算結果為 true，則所有結果為 true。

  Read More →
• @davegomez in javascript

  過濾和排序字串清單

  你可能有一份很大的清單，而你需要過濾重複的內容並移除，再依字母排序。

  Read More →
• @rishantagarwal in javascript

  使用立即函式表達式

  稱作「Iffy」（IIFE - immediately invoked function expression）是一個匿名函式表達式，而且可以立即被調用，在 JavaScript 中有一些相當重要的用途。

  Read More →
• @bhaskarmelkani in javascript

  使用 === 來替代 ==

  ==（或 !=）運算子如果在執行上需要的話，會自動將類型轉換。 ===（或 !==）運算子則不會執行轉換。===（或 !==）用來比較數值和類型，相較於 == 更來的快速。

  Read More →
• @sonnyt in javascript

  轉換為數字更快的方式

  轉換字串為數字是相當常見的。最簡單和快速的方式是使用 + 運算子來實現。

  Read More →
• @microlv in javascript

  將陣列清空的兩種方法

  在 JavaScript 中當你相要清空陣列，有許多方法，但這是最具效能的方法。

  Read More →
• @0xmtn in javascript

  將陣列洗牌

  Fisher-Yates Shuffling 是一個將陣列洗牌的演算法。

  Read More →
• @WakeskaterX in javascript

  回傳物件並使用函式鏈結

  在 JavaScript 物件導向中，我們在物件上建立函式，函式回傳的物件讓你可以將函式鏈結在一起。

  Read More →
• @gogainda in javascript

  安全的使用字串串接

  假設你有一些不確定的變數類型，而你想將它們串接成字串。可以確定的是，算術運算不是應用在串接的地方，使用 concat 來串接。

  Read More →
• @pklinger in javascript

  Truncating 最快的方式（含有風險）

  通常 ~~X 速度比 Math.trunc(X) 快，但是會造成你的程式碼變得很混亂。

  Read More →
• @odsdq in javascript

  Node.js - 執行尚未被 required 的模組

  在 nodejs，你可以讓你的程式取決於 require('./something.js') 或 node something.js 這兩種不同的方式來執行你的程式碼。如果你想要將你的獨立模組交互使用是非常有用的。

  Read More →
• @minhazav in javascript

  將參數傳送到 callback 函式

  預設情況下，你不能傳送參數給 callback 函式，但是你可以利用 JavaScrip closure scope 的優點將參數傳給 callback 函式。

  Read More →
• @jhogoforbroke in javascript

  更簡單的方式將 indexOf 當作 contains 使用

  JavaScript 預設沒有 contain 的方法。如果要檢查字串或是陣列內是否有子字串的存在你可以這樣做。

  Read More →
• @pklinger in javascript

  箭頭函式

  介紹一個 ES6 的新特性 - 箭頭函式是一個方便的語法讓你用更少的程式碼做更多事。

  Read More →
• @manmadareddy in javascript

  測量 JavaScript 程式碼區塊性能的 tip

  如果要快速的測量 JavaScript 程式碼區塊性能的話，我們可以使用 console 函式像是 console.time(label) 和 console.timeEnd(label)。

  Read More →
• @Avraam Mavridis in javascript

  在 ES6 函式內的預設參數

  在許多程式設計語言函數的參數預設是強制需要的，而開發者也會明確定義一個可選的參數。

  Read More →
• @squizzleflip in javascript

  提升變數

  了解 hoisting 可以幫助你組織你的函式 scope。

  Read More →
• @loverajoel in javascript

  檢查屬性是否存在物件內

  這些方法都是檢查屬性是否存在目前的物件內。

  Read More →
• @JakeRawr in javascript

  模板字串

  由於 ES6 中有了模板字串，JavaScript 可以使用模板字串來替代原本我們使用的引號字元。

  Read More →
• @Tevko in javascript

  將 Node List 轉換成陣列

  這是快速，安全，可重複使用的方式，將 Node List 轉換成 DOM 元素的陣列。

  Read More →
• @nainslie in javascript

  在 JavaScript 使用嚴格模式

  JavaScript 嚴格模式讓開發者可以寫出更「安全」的 JavaScript 程式碼。

  Read More →
• @mattfxyz in javascript

  撰寫一個可以接受單一參數和陣列的方法

  你撰寫的函式要可以處理陣列或單一元素參數，而不是透過分開的方法來處理陣列和單一元素參數。這和 jQuery 一些函式工作原理相似（css 將會修改所有和 selector matched 的）。

  Read More →
• @loverajoel in javascript

  undefined 和 null 的差別

  了解 undefined 和 null 的差別。

  Read More →
• @loverajoel in javascript

  將帶有音節字元的字串進行排序

  JavaScript 原生的 sort 方法讓我們可以排序陣列。做一個簡單的 array.sort()， 將每一個陣列元素視為字串並依字母排序。但是當你嘗試排序一個非 ASCII 字元陣列時，你會得到一個奇怪的結果。

  Read More →
• @AlbertoFuente in javascript

  改善巢狀化的條件式

  我們要如何在 JavaScript 改善巢狀化的 if 條件式？

  Read More →
• @loverajoel in react

  在子元件 Keys 是很重要的

  你可以從陣列動態建立 key 屬性並傳送到所有的元件（component）。它是一個唯一以及固定的 id，React 用來識別 DOM 裡面的每個元件，並區別它是否為同一個元件。使用 keys 可以確保子元件被保護而不會被重覆建立，也可以防止奇怪的事件發生。

  Read More →
• @loverajoel in angular

  AngularJs - $digest vs $apply

  JavaScript 模組以及建構步驟變得更多更複雜，但對於新的框架樣板呢？

  Read More →
• @loverajoel in javascript

  在陣列中加入元素

  在一個存在的陣列加入新的元素是一件很常見的事情，你可以使用 push 將元素加入到陣列的末端，或是使用 unshift 在陣列起始位置加入元素，也可以使用 splice 在陣列中間的地方加入元素。

  Read More →