俄羅斯方塊

大二暑假時，練習js的物件導向。從零開始設計、開發。除了磨練自己js物件導向的用法，也從中找出並解決問題。

7天搞懂JS進階議題

寫了這麼久的JS，你還在物件之前的時代嗎？只有資料、函式可以用，破破的抽象化，不會難以維護？儘管JS起初並不以物件導向設計，但透過原形鏈設計，其仍然可以具有好維護的物件導向特色。本系列從最基礎的this，深入ES6之後的class。

30天成爲laravel萌新

11屆 iT鐵人賽 參賽系列文章。紀錄一段時間開發、學習Laravel的經驗筆記。

記憶遊戲

Mozilla下一個網頁小遊戲。參與一小部份功能開發。

最近 隨手扎

image from 你可能不知道Function的三種用法

你可能不知道Function的三種用法

前言

原預計標題「你可能不知道的Math.max()三種用法」。因為這是在調整Math.max()時引發的話題。在這之後過了幾周，有另外一個同事詢問Function.prototype.call()、Function.prototype.apply()的差異。

因此，接下來將來看看「你可能不知道Function的三種用法」。除了一般的呼叫外，還有<Fn>.call()和<Fn>.apply()。試想已經有參數陣列args:

var args = Array(15).fill(0);
args.forEach((arg, i, arr) => arr[i] = Math.floor(Math.random()*50));

如果要將args傳遞給函式Math.max()執行，通常可以這麼做:

Math.max(...args);

這相當於:

Math.max.call(null, ...args);

此外你還可以這麼做:

Math.max.apply(null, args);

這三種作法都可以得到相同結果:

Math.max(...args) === Math.max.call(null, ...args); //true
Math.max(...args) === Math.max.apply(null, args); // true

除此之外，因為Math.max()的處理特性，恰好可以使用函式型開發方式中reduce的概念，也確實可以使用args.reduce()去得到與上面相同的結果:

Math.max(...args) === args.reduce((m, c) => Math.max(m, c))

接下來也會談到一些Array.prototype.reduce()的事情。

繼續閱讀
image from 你可能不知道Array.prototype.forEach()沒跟你說的事情

你可能不知道Array.prototype.forEach()沒跟你說的事情

Array.prototype.forEach()的用法

自知道Array有forEach的方法後，我自己是還蠻愛用的。

var names = ["World", "Bob", "Alice"]
names.forEach(name => console.log(`Hello, ${name}`))

並且與其他多數Array支援的callback方法一樣，有多個很有效的參數：

var names = ["World", "Bob", "Alice"]
names.forEach((name, idx, arr) => {
    console.log(`Hello, ${name}`)
    arr[idx] += "."
})
console.log(names); // ["World.", "Bob.", "Alice."]

我們甚至可以用而外的thisArg來處理某些事情：

var obj = {
    "World": undefined,
    "Bob": undefined
};

function checkHello(name) {
    if (name in this)
        return void (this[name] = "Yes");
    return void (this[name] = "No");
}

var names = ["World", "Bob", "Alice"];
names.forEach(checkHello, obj);
console.table(obj);

結果：

nameresult
WorldYes
BobYes
AliceNo

關於性能

在通常情況下，不會由瀏覽器處理大量的資料。通常而言forEach()的需要時間基本沒有什麼差別：

繼續閱讀

更多

所有 隨手扎