October 3, 2022

你可能不知道cookie可以寄城市還可以分路段

預設收件區

Set-Cookie就像寫信，除了內容當然還有收件區號。如果並沒有給Domain，就是當前的Domain。比如當瀏覽 http://localhost:8000/index1.html ，其記錄的Domain就是localhost。

這個Domain就像是在寫信時填寫的區號，比如「桃園市楊梅區」的區號就是326。

填寫收件區號

現在可以複製你可能不知道cookie是怎麼被製造出來的裡的DEMO程式碼內容，在此基礎上繼續修改，填寫收件區碼。

October 2, 2022

你可能不知道cookie是怎麼被製造出來的

前言

你是タコたち嗎？你喜歡吃cookies嗎？那麼你知道cookies是怎麼被製造出來的嗎？

cookie是怎麼被製造出來的

cookies是在瀏覽器儲存的小小資料片段，通常來說當瀏覽器發出request時，有可能同時將cookie發送出去。利用這個特性，可以將通常來說無狀態的HTTP保有記憶，做到登入功能、追蹤行爲等等。

雖然我們可以透過瀏覽器開發工具新增cookie。

October 1, 2022

你可能不知道的Function.prototype.bind()

前言

Function有三種用法，除了一般呼叫方式外，還可以使用Function.prototype.call()或Function.prototype.apply()方法。此外，Function還有一個很常見，偶爾會與後兩個用法混淆的方法–Function.prototype.bind()。沒錯，這節就是要來說說Function.prototype.bind()和另外兩者的差異，以及常見用法和你可能不知道的Function.prototype.bind()。

`<Fn>.call()`/`<Fn>.apply()` 和 `<Fn>.bind()`的差異

由於過去其實我是寫過bind()的相關內容的。所以我個人並不曾將三者搞混，蠻能區分用法上的不同的。不過在偶然幾次討論程式碼應該如何寫的過程中，發現偶爾會有人弄不清楚何時應該使用bind()？何時使用其他兩者？

回頭看我過去所寫的，也蜻蜓點水的點到過call()和apply()。它們三者的參數形式確實有些像，特別是bind()和call()都接受一個thisArg參數和多個參數展開。

所以Function.prototype.bind()有甚麼不同之處嗎？

Function.prototype.call()和Function.prototype.apply()與一般函式呼叫寫在同一節裡，他們三著共同點是「會真的執行函示內容」。與他們不同的是Function.prototype.bind()並不會真的執行函式，它會返回一個新的函式。

function helloWorld() {
    console.log(`Hello World`)
}

helloWorld();       // 會印出 Hello World
helloWorld.call();  // 會印出 Hello World
helloWorld.apply(); // 會印出 Hello World

helloWorld.bind();  // 不會印出 Hello World。返回一個函式物件

新的函式物件與原本的可能沒有什麼差異：

var newFn1 = helloWorld.bind();
newFn1();  // 會印出 Hello World

雖然上面程式碼很像是直接賦值給變數，但還是有些差異。

var newFn2 = helloWorld;
newFn2 === helloWorld;   // true。直接賦值的話是同一個函式物件
newFn1 === helloWorld;   // false。使用bind()會產生一個新的函式物件，儘管它們用起來可能很像，但依然不同

直接賦值的話是同一個函式物件；相對來說，使用bind()會產生一個新的函式物件。儘管它們用起來可能很像，但依然不同。

常見用法

在JavaScript裡面this是一個特別的存在。它經常會有隱含綁定和隱含遺失的狀況。

September 30, 2022

為什麼你需要知道Function的三種用法

前言

在設計函式與呼叫函式前，或許得認識到一些限制，這些限制有可能造成需要使用不同的設計方式或呼叫方式。就來談一下一些在JavaScript語言裡的一些限制吧！

安全整數範圍

JavaScript裡關於「整數」是有範圍限制在的，按照規範這個值的範圍是(±2**53)內，也就是-9007199254740991~9007199254740992。這個值你可以透過Number.MIN_SAFE_INTEGER和Number.MAX_SAFE_INTEGER取得。

BigInt

在ES11後多加了一個基本類別BigInt，儘管這個類型的使用方式和Number並不相容¹。但是在過去寫過的7天搞懂js進階議題中曾經使用過。如果你有需要超過-9007199254740991~9007199254740992範圍的整數，可以考慮使用BigInt。

陣列長度

Array會需要留意：屬性.length的最大值爲2**32-1也就是4294967295。

這意味著以下一些操作是會出問題的

var arr = Array(4294967296); // 超出最大範圍

{
    let arr = Array(4294967295);
    arr.push(0); // 超出最大範圍
}

此外，-1的索引值並不是像Python會得到最後一個元素²。實際上經過以下操作：

var arr = [1,2,3,4];
arr[-1] = 5;
console.log(arr);

最後arr的結果應該會像是：

[-1: 5, 1, 2, 3, 4]

另外.length也不會算上-1的索引值。

September 29, 2022

你可能不知道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()的事情。

September 28, 2022

你可能不知道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);

結果：

name	result
World	Yes
Bob	Yes
Alice	No

關於性能

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