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

我們都知道 JavaScript 是一個較鬆散的型別，在某些情況它特別是在 == 的情況，當你透過 == 來做比較時，常常會得到意外的結果，基於這個原因我們會強制轉換或建立新的變數來「將兩個操作變數中的其中一個轉換為其他類型，然後進行比較」。 0 == ' ' //true null == undefined //true [1] == true //true 所以他們提供我們三等號 === 的相等操作符，它更嚴格而且不強制去轉換變數，然而 === 比較不是一個比較好的解決方式，你可以得到這樣的結果： ... more

为什么你应该在相等比较中使用 Object.is()

我们都知道 JavasSript 是弱类型的，并且当我们使用 ‘==’ 作比较时，在一些情况下由于类型转换或者说“把两个操作数中的一个转换成另一个，然后在比较”，会出现意想不到的结果。 0 == ' ' //true null == undefined //true [1] == true //true 因此 JavaScript 中给我们提供了全等操作符 ‘===’, 它比不全等操作符更加严格并且不会发生类型转换。但是用 ‘===’ 来进行比较并不是最好的解决方案。你可能会得到： NaN === ... more

Recursion, iteration and tail calls in JS

If you’ve been on the business for some time, you have, most likely, come across the definition of recursion, for which the factorial of a given number n! = n * n - 1 * ... * 1 is a standard example. function factorial(n) { if (n === 0) { return 1; } ... more

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

如果你已經有一段實務經驗了，你最有可能會遇到遞迴，給定一個數字來定義階乘（factorial）， n! = n * n - 1 * ... * 1 就是一個標準的例子… function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); } 上面的範例是最常見的階乘 function。 為了更完整理解，讓我們來看 n = 6 是如何執行的： factorial(6) 6 * factorial(5) 5 ... more

從 State 到 Prop 的映射

你可能在你建立的 React Apps 使用 Redux Store 有段時間了，當 component 經常更新時，你可能會感到很不便。 你已經徹底建立你的 state，而且架構你的每個 component 所需要的 state。然而在這些更新 state 的背後，總是在做 state 的 map 和計算。 使用 Reselector 來拯救 如何只計算我們所需要的 state？如果這個 state tree 的部分改變了，沒錯！請更新 state。 讓我看一下簡單的 TODOs List，特別是在我們的 ... more

State to Props maps with memory

You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from ... more

使用監聽（tap）來快速 debug

一個相當有用 function 用來快速 debung 一連串的 function 呼叫、匿名函式，實際上你可能只是想要列印而已。 function tap(x) { console.log(x); return x; } 為什麼你不使用 console.log 的老方式呢？讓我示範一個範例： bank_totals_by_client(bank_info(1, banks), table) .filter(c => c.balance > 25000) .sort((c1, c2) ... more

Tapping for quick debugging

This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print. function tap(x) { console.log(x); return x; } Why would you use instead of good ... more

Array 的三个技巧

在 JavaScript 中 数组（Array）随处可见，使用ECMAScript 6 中的新特性 扩展运算符 你可以做很多很棒事情。在这边文章中，我将为你介绍在编码中有用的3个技巧。 1. 迭代一个空数组 JavaScript 中直接创建的数组是松散的，以至于会有很多坑。试着用数组的构造方法创建一个数组，你就会明白我的意思。 > const arr = new Array(4); [undefined, undefined, undefined, undefined] 你会发现，通过一个讼案的数组去循环调用一些转换是非常难得。 ... more

使用 Array 的三個技巧

在 JavaScript 中隨處都可以看見陣列，ECMAScript 6 中介紹到了展開運算符，你可以透過它來處理陣列。在這篇 tip，我將示範三個有用的技巧，當你在寫程式時可以使用。 1. 迭代一個空的陣列 JavaScript 陣列特性是鬆散的，所以在這裡有許多坑。嘗試使用陣列的建構子建立一個陣列，你會明白我的意思。 > const arr = new Array(4); [undefined, undefined, undefined, undefined] 你可能發現到，迭代一個鬆散的陣列並應用在某些轉換是相當困難的。 ... more

3 Array Hacks

Arrays are everywhere in JavaScript and with the new spread operators introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming. 1. Iterating through an empty array JavaScript ... more

Working With Websocket Timeout

In case of established websocket connection, server or firewall could timeout and terminate the connection after a period of inactivity. To deal with this situation, we send periodic message to the server. To control the timeout we will add two functions ... more

處理 Websocket 超時

在 websocket 連接被建立的情況下，如果一段時間處於非活動狀態，伺服器或防火牆可能超時或終止連接。為了要處理這個情況，我們向伺服器週期性的傳送訊息。為了控制超時，我們將新增兩個 function 再我們的程式碼：一是確認連接持久連線（keep alive)，另一個則是取消持久連線。我們也還需要一個共同的 timerID 變數。 讓我們來實作看看： var timerID = 0; function keepAlive() { var timeout = 20000; if (webSocket.readyState ... more

在 AngularJs 防止不必要的 scope 建立

AngularJs 最受歡迎的特性之一是理解和防止 ng-model 資料的 scope，這會是你經常遇到的主要挑戰之一。 在處理 ng-model 資料時，新的不必要的 scope 透過 ng-repeat 或 ng-if 程序被建立。 看看下面的例子： <div ng-app> <input type="text" ng-model="data"> <div ng-repeat="i in [1]"> ... more

Bind 物件到 function

很多時候，我們需要 bind 一個物件到一個 function 的 this 物件。當 this 明確的被指定在 JS 的 bind 方法且我們需要調用所需的方法。 Bind 語法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 參數 thisArg this 參數值可以被傳送到目標的 function 同時呼叫 被 bind 的 function。 arg1, arg2, … 前置參數被傳送到被 bind 的 function 同時調用目標 function。 ... more

给函数 Bind 对象

我们常常需要将一个对象绑定到一个方法的 this 上。在 JS 中，如果你想要调用一个函数并指定它的 this 时可以使用 bind 方法。 Bind 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。 arg1, arg2, … 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。 返回值 返回由指定的this值和初始化参数改造的原函数拷贝 JS 中的实例 const ... more

Breaking or continuing loop in functional programming

A common requirement of iteration is cancelation. Using for loops we can break to end iteration early. const a = [0, 1, 2, 3, 4]; for (var i = 0; i < a.length; i++) { if (a[i] === 2) { break; // stop the loop } console.log(a[i]); } //> 0, 1 Another ... more

Comma operator in JS

Apart from being just a delimiter, the comma operator allows you to put multiple statements in a place where one statement is expected. Eg:- for(var i=0, j=0; i<5; i++, j++, j++){ console.log("i:"+i+", j:"+j); } Output:- i:0, j:0 ... more

Copy to Clipboard

This is a simple tip, this week I had to create a common “Copy to Clipboard” button, I’ve never created one before and I want to share how I made it. It’s easy, the bad thing is that we must add an <input/> with the text to be copied to the DOM. ... more

Create an easy loop using an array

Sometimes, we need to loop endlessly over an array of items, like a carousel of images or an audio playlist. Here’s how to take an array and give it “looping powers”: var aList = ['A','B','C','D','E']; function make_looper( arr ){ arr.loop_idx = 0; // ... more

How to use optional arguments in functions (with optional callback)

Example function where arguments 2 and 3 are optional function example( err, optionalA, optionalB, callback ) { // retrieve arguments as array var args = new Array(arguments.length); for(var i = 0; i < args.length; ++i) { args[i] = arguments[i]; }; ... more

How to use optional arguments in functions (with optional callback)

Example function where arguments 2 and 3 are optional function example( err, optionalA, optionalB, callback ) { // retrieve arguments as array var args = new Array(arguments.length); for(var i = 0; i < args.length; ++i) { args[i] = arguments[i]; }; ... more

Get File Extension

Question: How to get the file extension? var file1 = "50.xsl"; var file2 = "30.doc"; getFileExtension(file1); //returs xsl getFileExtension(file2); //returs doc function getFileExtension(filename) { /*TODO*/ } Solution 1: Regular ... more

Get File Extension

Question: How to get the file extension? var file1 = "50.xsl"; var file2 = "30.doc"; getFileExtension(file1); //returs xsl getFileExtension(file2); //returs doc function getFileExtension(filename) { /*TODO*/ } Solution 1: Regular ... more

Return Values with the ‘new’ Operator

You’re going to run into some instances where you’ll be using new to allocate new objects in JavaScript. It’s going to blow your mind unless you read this tip to understand what’s happening behind the scenes. The new operator in JavaScript is an operator ... more

Return Values with the ‘new’ Operator

You’re going to run into some instances where you’ll be using new to allocate new objects in JavaScript. It’s going to blow your mind unless you read this tip to understand what’s happening behind the scenes. The new operator in JavaScript is an operator ... more

DOM event listening made easy

Many of us are still doing these things: element.addEventListener('type', obj.method.bind(obj)) element.addEventListener('type', function (event) {}) element.addEventListener('type', (event) => {}) The above examples all create new anonymous event ... more

簡單的監聽 DOM 事件

很多人仍然透過以下方法來處理 DOM 事件︰ element.addEventListener('type', obj.method.bind(obj)) element.addEventListener('type', function (event) {}) element.addEventListener('type', (event) => {}) 當你不需要這些處理函式時，使用者可能因為交互事件或冒泡事件而不小心觸發意外。 安全的事件處理模式包含以下這些： 使用一個參考： const ... more

Escuchar eventos DOM mas simple

Muchos de nosotros todavía están haciendo estas cosas: element.addEventListener('type', obj.method.bind(obj)) element.addEventListener('type', function (event) {}) element.addEventListener('type', (event) => {}) Los ejemplos anteriores, crean nuevos ... more

简单监听DOM事件

很多人还在这样做： element.addEventListener('type', obj.method.bind(obj)) element.addEventListener('type', function (event) {}) element.addEventListener('type', (event) => {}) 上面所有的例子都创建了一个匿名事件监控句柄，且在不需要时无法删除它。这在你不需要某句柄，而它却被用户或事件冒泡偶然触发时，可能会导致性能问题或不必要的逻辑问题。 ... more