DEV Community: SGsSY

費曼的十二道難題

SGsSY — Thu, 22 Jun 2023 06:59:57 +0000

這是著名的物理學家 Richard Feynman 對自己所提出的長時間探討的問題，這些問題涵蓋了各種領域。在腦中深深地記住這些問題，每當接收到新的資訊時就可以用來測試這些題目，是否帶來新的想法、觀點甚至解決方式。這也能讓我們在不相干的研究主題中找出關聯。

我們也可以使用這種方式來學習成長，題目的數量不是重點，重要的是問問自己哪些是我們持續有興趣的問題或者想探討的開放性問題，記錄下來，每當有新的刺激、新的資訊時拿來跟這些問題做討論，相信我們在這些問題上也能獲得更進一步的學習。

我自己訂了幾個題目

如何保持學習成長的動能
如何定義、觀測自己有所成長
怎樣不被焦慮壓住，而是作為前進的動力

The Most Familiar Stranger - JavaScript - 非同步

SGsSY — Thu, 11 May 2023 13:18:09 +0000

分享記錄檔 YouTube

什麼是非同步

JavaScript 是一種單執行緒語言，這意味著當程式碼在執行時，只會有一個行為可以進行。由於 JavaScript 是在瀏覽器中運行的語言，它的主要用途是與網頁交互。當用戶與網頁進行交互時，瀏覽器需要執行各種行為，例如載入圖像、發送請求、處理回應等等。如果這些行為是同步的，也就是說，瀏覽器必須等待每個行為完成才能繼續執行後面的代碼，那麼瀏覽器將會凍結，用戶體驗會受到嚴重影響。

⚠️ 單執行緒是不是就代表不能非同步呢 ?

🔥 單、多執行緒以及同步、非同步是不同的概念 !

為了解決這個問題，JavaScript 提供了非同步的方式來處理這些行為。當一個行為需要等待其他行為完成才能繼續執行時，它可以將這個操作送到到一個事件佇列中，這樣瀏覽器就可以繼續執行後面的程式了。當其他行為完成後，瀏覽器將從事件佇列中取出這個行為，並且執行它。這樣可以讓瀏覽器在等待某些行為完成時繼續執行後面的程式，從而提高用戶體驗。

Event Loop

JavaScript 的事件循環（ Event Loop ）是實現非同步行為的一種機制。JavaScript 的事件循環採用的是單執行緒模型，這意味著當程式碼在執行時，只會有一個行為可以進行。當一個行為需要等待其他行為完成才能繼續執行時，它可以將這個行為送到到一個事件佇列中，這樣瀏覽器就可以繼續執行後面的程式了。當其他行為完成後，瀏覽器將從事件佇列中取出這個行為，並且執行它。

事件循環的運作方式如下：

當一個非同步行為需要執行時，它將被送到到一個事件佇列中。
當所有同步行為完成後，事件循環將開始處理事件佇列中的行為。這些行為將按照它們被送到的順序依次執行。
當一個事件處理完畢後，事件循環將從事件佇列中取出下一個事件，並且執行它。
事件循環將不斷地從事件佇列中取出事件，直到事件佇列中沒有其他事件為止。

範例展示網站：https://www.jsv9000.app/

事件循環的運作方式可以幫助開發人員更好地掌握 JavaScript 的非同步行為，從而更好地開發程式。在開發 JavaScript 時，明白事件循環是非常重要的，因為它可以幫助您更好地處理非同步行為，提高程式的可讀性和可維護性。

💡 會排入 Microtask queue 的事件有 Promise、async / await、MutationObserver

Promise

在 JavaScript 中，非同步的行為通常是使用回呼函式（Callback）實現的。當一個行為完成時，會呼叫回呼函式，並且將結果作為參數傳遞給回呼函式。這種方式可能會導致回呼函式的嵌套，稱為 “回呼地獄”（Callback Hell），對程式的可讀性和可維護性造成影響。

function getDataFromServer(url, callback) {
  setTimeout(function() {
    var data = "Some data from " + url;
        // callback
    callback(data);
  }, 1000);
}

getDataFromServer('https://example.com', function(data) {
    // another callback !
  processData(data, function(result) {
        // callback again !!
    renderResult(result, function(html) {
            // endless callback !!! 
      document.getElementById('result').innerHTML = html;
    });
  });
});

為了解決這個問題，ES6 引入了 Promise。Promise 是一個表示非同步行為的物件，當一個行為完成時，Promise 將返回一個結果或一個錯誤。Promise 提供了 then 方法，可以將回呼函式傳入 Promise 物件，當 Promise 物件完成時，then 方法將被呼叫。這樣可以避免回呼函式的嵌套，提高程式的可讀性和可維護性。

// 以下是使用 Promise 的方式重寫該程式

function getDataFromServer(url) {
    return new Promise(function(resolve, reject) {
        // call api ...
        // then resolve data
        resolve(data);
    });
}

getDataFromServer('https://example.com')
    .then(function(data) {
        return processData(data);
    })
    .then(function(result) {
        return renderResult(result);
    })
    .then(function(html) {
        document.getElementById('result').innerHTML = html;
    })
    .catch(function(error) {
        console.error(error);
    });

Async / Await

除了 Promise 外，ES7 引入了 Async / Await。Async / Await 是基於 Promise 的一種語法糖，它能夠更簡單地實現非同步行為。Async 函式是一個返回 Promise 物件的函式，而 Await 運算符用於等待 Promise 物件的結果。Async/Await 可以讓非同步程式碼看起來像同步程式碼，提高了程式的可讀性和可維護性。

function getDataFromServer(url) {
  return new Promise(function(resolve, reject) {
    // call api ...
        // then resolve data
        resolve(data);
  });
}

async function processData() {
  var data = await getDataFromServer('https://example.com');
  var result = await processData(data);
  var html = await renderResult(result);
  document.getElementById('result').innerHTML = html;
}

processData();

The Most Familiar Stranger - JavaScript - 原型

SGsSY — Thu, 11 May 2023 13:16:26 +0000

分享記錄檔 YouTube

原型（ Prototype ）

每個 JavaScript 物件都有一個原型物件，它作為該物件繼承屬性和方法的基礎。物件的原型可以通過 __proto__ 屬性取用 ( ES6 開始使用 Object.getPrototypeof()、Object.setPrototypeof() 這兩個 accessors 取用 )，原型物件也是一個物件，有自己的原型。當一個物件呼叫一個方法或取用一個屬性時，它會先查找自身是否有該屬性或方法，如果沒有，則會透過原型鏈查找。透過原型，物件可以繼承來自其原型的屬性和方法。

原型鏈（Prototype Chain）

原型鏈是由原型物件組成的一個鏈，用於查找物件的屬性和方法。當一個物件取用一個屬性或方法時，它會先查找自身是否有該屬性或方法，如果沒有，則會查找其原型物件是否有該屬性或方法，如果還沒找到，則會繼續查找其原型的原型，直到找到為止。

以下是一個簡單的例子，說明嘗試存取屬性時會發生的事：

// 利用含有 a 與 b 屬性的 f 函式，建立一個 o 物件：
let f = function () {
   this.a = 1;
   this.b = 2;
}
let o = new f(); // {a: 1, b: 2}

// 接著針對 f 函式的原型添加屬性
f.prototype.b = 3;
f.prototype.c = 4;

// 不要寫 f.prototype = {b:3,c:4}; 因為它會破壞原型鏈
// o.[[Prototype]] 有 b 與 c 的屬性：{b: 3, c: 4}
// o.[[Prototype]].[[Prototype]] 是 Object.prototype
// 最後 o.[[Prototype]].[[Prototype]].[[Prototype]] 成了 null
// 這是原型鏈的結末，因為 null 按照定義並沒有 [[Prototype]]。
// 因此，整個原型鏈看起來就像：
// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null

console.log(o.a); // 1
// o 有屬性「a」嗎？有，該數值為 1。

console.log(o.b); // 2
// o 有屬性「b」嗎？有，該數值為 2。
// o 還有個原型屬性「b」，但這裡沒有被訪問到。
// 這稱作「property shadowing」。

console.log(o.c); // 4
// o 有屬性「c」嗎？沒有，那就找 o 的原型看看。
// o 在「o.[[Prototype]]」有屬性「c」嗎？有，該數值為 4。

console.log(o.d); // undefined
// o 有屬性「d」嗎？沒有，那就找 o 的原型看看。
// o 在「o.[[Prototype]]」有屬性「d」嗎？沒有，那就找 o.[[Prototype]] 的原型看看。
// o.[[Prototype]].[[Prototype]] 是 Object.prototype，預設並沒有屬性「d」，那再找他的原型看看。
// o 在「o.[[Prototype]].[[Prototype]].[[Prototype]]」是 null，停止搜尋。
// 找不到任何屬性，回傳 undefined。

函式建構子（ Constructor ）

函式建構子是一種用來創建物件的函式，它使用 new 關鍵字創建一個新物件，並將該物件的原型設置為函式的 prototype 屬性。函式建構子也可以添加屬性和方法，透過原型，這些屬性和方法可以被所有由該函式建構的物件所共享。

因此當我們這樣寫時：

let o = new Foo();

JavaScript 其實會做：

let o = new Object();
o.[[Prototype]] = Foo.prototype;
Foo.call(o);

物件屬性特徵（Object Property Descriptor）

JavaScript 中的每個屬性都有一個物件，稱為屬性描述符（Property Descriptor），它描述了該屬性的特徵。物件屬性特徵描述了一個屬性的值 (value)、可枚舉性 (enumerable)、可寫性 (writable)、可配置性 (configurable) 等屬性。

value：該屬性的值。預設值為 undefined。
writable：如果為 true，則該屬性的值可以被修改。如果為 false，則該屬性的值無法被修改。預設值為 true。
enumerable：如果為 true，則該屬性可以被 for...in 迴圈枚舉。如果為 false，則該屬性無法被枚舉。預設值為 true。
configurable：如果為 true，則該屬性的特徵可以被修改，並且該屬性可以被刪除。如果為 false，則該屬性的特徵無法被修改，且該屬性無法被刪除。預設值為 true。

以下是一個修改屬性特徵的範例：

let obj = {name: 'John'};

let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');

console.log(descriptor); 
// {value: "John", writable: true, enumerable: true, configurable: true}

// 修改屬性特徵
descriptor.writable = false;
descriptor.configurable = false;

Object.defineProperty(obj, 'name', descriptor);

// 現在 name 屬性已變為不可寫和不可配置
obj.name = 'Bob';
delete obj.name;

console.log(obj); // {name: "John"}，不可修改和刪除

Class

Class 是 ES6 中引入的一個新特性，它提供了一種更簡潔的方式來定義物件的屬性和方法。Class 本質上是一種特殊的函式建構子，它使用 class 關鍵字定義，並使用 constructor 方法定義屬性和方法。與傳統的函式建構子不同，class 定義的方法預設是不可枚舉的。

以下是一個範例說明 class 定義的方法預設是不可枚舉的：

class MyClass {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
  sum() {
    return this.a + this.b; 
  }
}

const myObj = new MyClass(2, 3);

for (let key in myObj) {
  console.log(key); // Output: a, b
}

console.log(Object.keys(myObj)); // Output: [ 'a', 'b' ]

The Most Familiar Stranger - JavaScript - 函式

SGsSY — Sun, 07 May 2023 07:37:56 +0000

分享記錄檔 YouTube

函式

JavaScript 中的函式是一種可重複使用的程式碼，它可以接受參數並執行特定的任務。函式可以在程式中多次呼叫，這樣可以使程式更為彈性，更容易維護。

如何宣告函式

在 JavaScript 中，可以使用function 關鍵字來宣告一個函式。

以下是一個簡單的函式宣告範例：

function add(a, b) {
  return a + b;
}

在此範例中，add 函式接受兩個參數，並將它們相加後返回結果。函式可以被呼叫多次，並且每次呼叫時可以傳入不同的參數值。

記憶體的變化

當函式被呼叫時，JavaScript 引擎會為該函式創建一個新的執行上下文 ( Execution Context )。該執行上下文包含函式中聲明的所有變數、參數和函式本身。當函式執行完畢並返回結果時，該執行上下文將被釋放，所有在該函式中聲明的變數和參數也將被清除。

執行上下文 ( Execution Context )

在 JavaScript 中，每當執行一個函式時，JavaScript 引擎都會創建一個新的執行上下文。

JavaScript 中的執行上下文是一種無名物件，它包含了以下三個屬性：

Variable Object ( 變數物件 ): 儲存該執行上下文中所宣告的變數、函式和參數等。
Scope Chain ( 作用域鏈 ): 它是用來尋找變數和函式定義的一個層層包含的列表。作用域鏈在函式被定義時就已經確定了。
this : 它指向當前執行上下文所屬的物件。

當 JavaScript 引擎執行一段程式碼時，它會創建一個全域執行上下文 ( Global Execution Context )。在瀏覽器中，全域執行上下文通常關聯到 Window 物件。接下來，每當 JavaScript 引擎執行一個函式時，它會創建一個新的執行上下文。

以下是一個簡單的範例，說明了執行上下文如何運作：

var x = 1;

function add(y) {
  var result = x + y;
  return result;
}

console.log(add(2)); // 3

在此範例中，當 add 函式被呼叫時，JavaScript 引擎會創建一個新的執行上下文，其中包含了變數 y 和 result。此外，由於 add 函式是在全域範圍內被定義的，因此它的作用域鏈會包含全域作用域鏈。

當 add 函式執行完畢並返回結果時，JavaScript 引擎會釋放該執行上下文，並將該函式的結果返回到 Call stack 中。

Call stack

JavaScript 中的呼叫堆疊（call stack）是一種用於追蹤函式執行的機制。當函式被呼叫時，它會被添加到呼叫堆疊的頂部。當函式執行完畢並返回結果時，它將從堆疊中彈出，讓下一個函式繼續執行。JavaScript 引擎使用呼叫堆疊來確保函式執行的順序和一致性。

以下是一個簡單的例子，說明了呼叫堆疊如何運作：

function fn1() {
  console.log("a");
}

function fn2() {
  fn1();
}

function fn3() {
  fn2();
}

fn3();

在此範例中，當 fn3 函式被呼叫時，它會被添加到呼叫堆疊的頂部。當 fn3 函式調用 fn2 函式時， fn2 函式被添加到堆疊的頂部。當 fn2 函式調用 fn1 函式時， fn1 函式被添加到堆疊的頂部。當 fn1 函式執行完畢時，它從堆疊中彈出，讓 fn2 函式繼續執行。當 fn2 函式執行完畢時，它從堆疊中彈出，讓 fn3 函式繼續執行。最後，當 fn3 函式執行完畢時，它從堆疊中彈出，函式呼叫堆疊就空了。

以下是一個動畫，說明了呼叫堆疊如何運作：

圖片來源：https://vaibhavgupta.me/2018/01/20/understanding-event-loop/

this 是什麼

在 JavaScript 中，this 關鍵字用於引用當前執行上下文中的物件。this 關鍵字的值取決於函式的調用方式，它可以是全域物件、函式本身或由該函式創建的新物件。

當在全域範圍內使用 this *時，它會指向全域物件 (在瀏覽器中是 Window *)。

以下是一個範例：

console.log(this); // Window

以下是一個簡單的範例，其中 this 關鍵字用於引用當前執行上下文中的物件：

const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

console.log(person.fullName()); // "John Doe"

在此範例中，this 關鍵字用於引用 person 物件，因為函式是在 person 物件上調用的。

🔑 一般的函式呼叫 JS 會預設將 this 綁定到全域物件，當從某個物件的參考屬性呼叫 this 會綁定到該物件

let obj = {
    function1: function() {
        console.log(this); // obj

        let function2 = function() {
            console.log(this); // Window
        }
        function2();
    }
};
obj.function1();

當使用 call()、apply() ****或 bind() 方法時，可以手動指定 this 的值。

以下是一個範例：

const person1 = {
  firstName: 'John',
  lastName: 'Doe'
}

const person2 = {
  firstName: 'Jane',
  lastName: 'Don'
}

function fullName() {
  return `${this.firstName} ${this.lastName}`;
}

console.log(fullName.call(person1)); // "John Doe"
console.log(fullName.call(person2)); // "Jane Don"

💡 call()、apply()、bind() 的不同

call()、apply() 會立即執行函式，bind() 會回傳一個新的函式
call(thisArg[, arg1[, ...]]) ****是列出所有參數，apply(thisArg, [argsArray]) 是傳入陣列

在使用 new *關鍵字創建一個物件時，this *會指向這個新物件。

以下是一個範例：

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const john = new Person('John', 'Doe');
console.log(john.fullName()); // "John Doe"

箭頭函式 ( Arrow Function )

在 ES6 中，引入了箭頭函式的概念。箭頭函式是一種更簡潔的函式語法，它使用 => 符號來定義函式。箭頭函式有一些特別的行為：

箭頭函式沒有自己的 this 關鍵字，它繼承了外部執行上下文的 this 值。
箭頭函式總是匿名的，因此不能使用 function 關鍵字來命名箭頭函式。
箭頭函式的 return 關鍵字是隱式的，因此不需要顯式地返回值。

以下是一個使用箭頭函式的簡單範例：

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

在此範例中，箭頭函式被用於將 numbers 數組中的每個數字乘以 2。這個函式使用了箭頭函式簡潔的語法，並返回一個新的數組。

The Most Familiar Stranger - JavaScript - 陣列

SGsSY — Sun, 07 May 2023 07:36:40 +0000

分享記錄檔 YouTube

JS 的陣列是一種有序的數據集合，其內部存儲的元素可以是任意類型的數據。

它有以下的特點：

有序性：陣列中的每個元素都有一個索引，可以通過索引來訪問和修改其中的元素。
長度可變：陣列的長度是可變的，可以動態添加或刪除元素。
可存儲不同數據類型：JS 的陣列可以存儲任何數據類型，包括字串、數字、物件等。

創建陣列

直接創建：使用方括號[]，在其中添加元素，每個元素之間用逗號隔開

const arr = [1, 2, 3, 'four', {name: 'John'}];

使用Array()構造函數創建：

const arr = new Array(1, 2, 3, 'four', {name: 'John'});

操作陣列

push()：在陣列的末尾添加一個或多個元素

const arr = [1, 2, 3];
arr.push(4);

console.log(arr);   // [1, 2, 3, 4]

pop()：從陣列的末尾刪除一個元素

const arr = [1, 2, 3];
arr.pop();

console.log(arr);   // [1, 2]

shift()：從陣列的開始刪除一個元素

const arr = [1, 2, 3];
arr.shift();

console.log(arr);   // [2, 3]

unshift()：在陣列的開始添加一個或多個元素

const arr = [1, 2, 3];
arr.unshift(0);

console.log(arr);   // [0, 1, 2, 3]

splice()：在陣列的任意位置添加或刪除元素

const arr = [1, 2, 3];
arr.splice(1, 1, 4);

console.log(arr);   // [1, 4, 3]

reverse()：將陣列元素順序反轉

const arr = [1, 2, 3, 4, 5];
arr.reverse();

console.log(arr);   // output: [5, 4, 3, 2, 1]

⚠️ 以上的操作都會直接異動原始陣列

💡 在 forEach() 執行中異動 array 會怎樣呢?

減少陣列元素：部分元素將不會被遍歷到
增加陣列元素：在執行 forEach 前要執行的長度就已經被設定了，所以在陣列後面加入的元素將不會被遍歷到

slice()：回傳一個新陣列，其中包含原陣列的指定部分，可傳入兩個參數，第一個為起始索引 ( 包含 )，第二個為結束索引 ( 不包含 )

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);

console.log(newArr);   // [2, 3, 4]

concat()：回傳一個新陣列，其中包含原陣列和傳入的陣列或元素

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2, 5);

console.log(newArr);   // [1, 2, 3, 4, 5]

map()：回傳一個新陣列，其中包含將原陣列每個元素經過回調函式處理後的結果

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2);

console.log(newArr);   // [2, 4, 6, 8, 10]

⚠️ 以上的操作都會回傳一個新陣列

The Most Familiar Stranger - JavaScript - 物件

SGsSY — Sun, 07 May 2023 05:36:25 +0000

分享記錄檔 YouTube

定義物件

除了原始型別以外，都是物件 ! 例如：array、function 等

一般我們常用到的物件是用 {} 包裹，內含 key 與對應的 value 組成

key 可使用能轉換為 string 的值、Symbol 型別，value 可以是任意的

const symbol = Symbol('symbolKey');

const obj = {
    0: 'zero',
    'zero': 0,
    [symbol]: 'symbolValue',
}

取值

const user = {
    name: 'John',
    age: 30
}

console.log(user.name);   // John

const prop = 'age';

console.log(user[prop]);   // 30

傳值

當我們將物件賦值給變數時，實際上是指向該物件的記憶體位置，而不是創建一個新的物件 ( call by reference )。也就是說，如果更改物件的的屬性，被賦值的變數也會進行更改。

const obj1 = {
    name: 'John',
    age: 30
}

const obj2 = obj1;
obj2.age = 18;

console.log(obj1);   // { name: 'John', age: 18 }
console.log(obj2);   // { name: 'John', age: 18 }

淺拷貝 ( shallow clone )

怎樣避免上述的狀況呢，我們可以創建一個新的物件。

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
const obj3 = { ...obj1 };

為什麼叫淺拷貝呢? 因為使用這種方式我們雖然創建了新的物件，但新物件內 value 的物件參考還是會跟原始物件共享，所以改變 value 內的物件時，還是會同樣受影響。

// 承接上一個範例
obj2.b.c = 5

console.log(obj1);   // { a: 1, b: { c: 5 } }
console.log(obj2);   // { a: 1, b: { c: 5 } }

深拷貝 ( deep clone )

如果創建一個新的物件且新物件跟原始物件不共享 value，做到完全的不受影響，這就是深拷貝。

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));

但這個方法因為 JSON 本身的限制在某些情況會有問題

undefined ⇒ 忽略
function ⇒ 忽略
循環引用 ⇒ 報錯

const obj1 = { 
    a: 1, 
    b: { 
        c: 3, 
        d: undefined, 
        e: () => {} 
    } 
};

const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2);   // { a: 1, b: { c: 3 } };

const obj1 = {
    a: 3,
    b: {}
}

obj1.b = obj1;

const obj2 = JSON.parse(JSON.stringify(obj1));   
// Uncaught TypeError: Converting circular structure to JSON

為了避免這個問題我們可以使用第三方的 library

例如：lodash ( https://lodash.com/docs/4.17.15#cloneDeep )

Map

是 key-value 的集合，key 在 Map 中是唯一的

Map vs Object

	Map	Object
意外的 Key 值	Map 沒有額外的 key，只有實際放入的 key	物件有從原型鏈帶來的 key，有可能發生衝突
安全性	使用 user 輸入的內容當 key-value 是安全的	使用 user 輸入的內容當 key-value 有可能覆寫物件原型鏈，造成 object injection attacks
Key 的型別	Map 的 key 可以是任意值 ( 函式、物件、原始型別等 )	物件的 key 要是 String or Symbol
Key 的順序	Map 是有序的，依照加入的順序	物件的 key 目前是有序的，按照固定的順序
有多少 key-value pair	直接取用 size	透過 Object.keys(obj).length 取得
迭代	Map 是可以直接迭代的	Object 是不可以直接迭代的，通常透過 for … of 處理
效能	有針對頻繁的加入、移除 key-value pairs 做最佳化	沒有針對頻繁的加入、移除 key-value pairs 做最佳化
序列化和解析	沒有原生支援	JSON.stringify()、JSON.parse()

Set

儲存不重複的值，值可以是原始型別或物件

https://leetcode.com/problems/contains-duplicate/

The Most Familiar Stranger - JavaScripts - 型別

SGsSY — Sun, 07 May 2023 05:34:35 +0000

分享記錄檔 YouTube

原始型別

在 JavaScript 中，原始型別 (primitive type) 是指不可變 (immutable) 且沒有任何方法 (method) 的資料型別，共有 7 種原始型別，包括：

number：代表數字，包括整數和浮點數。
string：代表字串，用引號 (single quotes 或 double quotes) 包括起來。
boolean：代表布林值，只有兩個值 true 和 false。
null：代表空值，只有一個值 null。
undefined：代表未定義的值，只有一個值 undefined。
symbol：代表唯一的識別符號，是 ES6 引入的新型別。
BigInt：代表數字，可以精確地表示大於 number 最大值 ( 2 的 53 次方 ) 的數字。

💡 JS 的原始型別是沒有方法的，因為原始型別的值不可變，調用方法需要在物件上執行操作，而不是值，所以不能直接在原始型別上調用方法。當我們在一些原始型別上調用方法時，JS 會暫時轉為包裹器物件 (Wrapper Object)，完成操作後再轉回原始型別。

以下是一些使用原始型別的範例：

let num = 123; // number
let str = 'Hello, world!'; // string
let bool = true; // boolean
let n = null; // null
let u = undefined; // undefined
let sym = Symbol('foo'); // symbol

原始型別在 JavaScript 中非常常用，因為它們是非常基本的資料型別，且在程式執行時具有很高的效能。

型別轉換

有時我們會依需求主動進行變數的型別轉換，例如：

let numStr = '123';
let num = parseInt(numStr); // 將字串轉換為整數
console.log(num); // 123

let bool = true;
let num2 = +bool; // 將布林值轉換為數字
console.log(num2); // 1

let str = 'Hello, world!';
let bool2 = Boolean(str); // 將字串轉換為布林值
console.log(bool2); // true

但在執行一些運算式時，JavaScript 會自動進行型別轉換，這種轉換被稱為隱式轉換 ( implicit coercion ) 或強制轉換 ( type coercion )。

10 + ' Hi';      // '10 Hi'
'7' * '4';       // 28
let n = 1 - 'x'  // n = NaN

值	轉為字串	轉為數字	轉為 Boolean
undefined	‘undefined’	NaN	false
null	‘null’	0	false
true	‘true’	1
false	‘false’	0
‘’		0	false
‘1.2’		1.2	true
‘one’		NaN	true
0	‘0’		false
-0	‘0’		false
1	‘1’		true
Infinity	‘Infinity’		true
-Infinity	‘Infinity’		true
NaN	‘NaN’		false
{}	toString()	valueOf()	true
[]	‘’	0	true
[9]	‘9’	9	true
[’a’]	join()	NaN	true
function(){}	toString()	NaN	true

型別比較

JS 會將型別轉為數字 ( valueOf() ) 或字串 ( toString() ) 然後進行比較，假如轉數字不行會嘗試轉字串，反之轉字串不行會嘗試轉數字。

💡 Date 型別會優先轉字串，其餘會優先轉數字

Number([9]);
// => Number('9')，因為 Array 類別的 valueOf() 不會回傳原始值，所以改為嘗試 toString()
// => 9

The Most Familiar Stranger - JavaScript - 文法

SGsSY — Sun, 07 May 2023 05:31:28 +0000

分享記錄檔 YouTube

陳述式與表達式

在 JS 的文件或技術文章常常看到陳述式、表達式等字眼，但他們是什麼 ? 有什麼差異呢 ? 了解後才能正確理解這些文件、文章在表達的內容，也能幫助我們更靈活運用 JS 的語法。

陳述式 Statement

陳述式分為以下幾類：

宣告 ( var、function … )
流程控制 ( block、if else … )
迴圈 ( for、while … )
其他 ( import、export … )
各類詳細有哪些可參考 MDN - 陳述式與宣告

陳述式的例子：變數宣告

var a;

陳述式的例子：block

{
    // do something here    
}

表達式 Expression

表達式的特點就是會回傳結果，所以任何有回傳結果的都可以稱為表達式。

常見的有：

變數、常數
運算子
函式呼叫
取用物件屬性
…
各類詳細有哪些可參考 MDN - 運算式與運算子

表達式的例子：常數

1   // 1

表達式的例子：運算子

1 === 1   // true

💡 兩者的主要差異在於：

陳述式：是執行某些操作的句子，但不會回傳結果
表達式：會回傳結果

補充

通常在實務上表達式會跟陳述式混用，例如：

if (true) {
    doSomethingIfIsTrue();
}

true、doSomethingIfIsTrue() 都是表達式，if 則是陳述式

ASI自動插入分號

ASI ( Automatic Semicolon Insertion )

以下情況不會自動插入分號：

新的一行以 ( 、 [ 、 / 開始
新的一行以 + 、 - 、 * 、 % 開始
新的一行以 , 、 . 開始

如果遇到問題，可以在出問題的那行最開頭加上 ;

運算子

JavaScript 有以下幾種運算子

賦值運算子
比較運算子
算術運算子
邏輯運算子
條件 (三元) 運算子
…
詳細可參考 MDN - 運算式與運算子

賦值運算子

x = 1;

x += 1;   // x = x + 1;

const props = {
    name: 'John',
    device: 'iPhone',
}

function f() {
    const { name, device } = props;   // 解構賦值
    ...
}

比較運算子

會比較運算元並基於比較的結果回傳邏輯值。運算元可以是數字，字串，邏輯，或物件的值。

1 == 1;       // true
'a' != 'a';   // false

字串的比較是基於字典序的，使用 Unicode 的值。

'A' > 'a';   // false

在多數情況下，假如兩個運算元不具有相同型態， JavaScript 會嘗試將它們轉換成相同型態。

轉型會轉為數字或字串後進行比較

'1' == 1;    // true
false == 0;  // true

使用嚴格比較則會比較值跟型別。

'1' === 1;   // false

算術運算子

let a = 8;
let b = 2;

a + b;    // 10
a - b;    // 6
a * b;    // 16
a / b;    // 4
a % b;    // 0
a ** b;   // 64
a++;      // 9
b--;      // 1

-a;       // -9
+'3';     // 3
+true;    // 1

⚠️ ++a 跟 a++ 的行為是有所不同的

let a = 1;
console.log(++a);   // 2，++a 會先把 a 設定為 2 再傳回 2
console.log(a++);   // 2，a++ 會先把 2 回傳再把 a 設定為 3
console.log(a);     // 3

邏輯運算子

// &&， expression1 && expression2 
// 假如 表達式1 可以被轉成 false 回傳 表達式1，否則回傳 表達式2

true && true;   // true
false && true;  // false
0 && 1;         // 0
'a' && 'b';     // b

// ||， expression1 || expression2
// 假如 表達式1 可以被轉成 true 回傳 表達式1，否則回傳 表達式2

true || false;   // true
false || false;  // false
0 || 1;          // 1
'a' || 'b';      // 'a'

// !， !expression
!true;           // false
!false;          // true
!0               // true
!'a'             // false

優先性與相依性

優先性

JavaScript 的運算子有預設的先後順序，從高到低如下：

運算子類型	屬於該類別的運算子
成員	. []
呼叫/建立實例	() new
反向/增加	! ~ - + ++ -- typeof void delete
乘法/除法	* / %
加法/減法	+ -
位元移動	<< >> >>>
關係運算子	< <= > >= in instanceof
相等性	== != === !==
位元 and	&
位元 xor	^
位元 or
邏輯 and	&&
邏輯 or
條件運算子	expression ? a : b
指定運算子	= += -= *= /= %= <<= >>= >>>= &= ^=
逗點運算子	,

相依性

在運行表達式時所需要的其他資源，如：變數、函式、物件等。這就是相依性

let x = 10;
let y = 20;

let result = x + y;   // 表達式 x + y 依賴變數 x, y

function square(num) {
    return num * num;
}

let squaredResult = square(result); 
// 表達式 square(result) 依賴函式 square 和變數 result

The Most Familiar Stranger - JavaScript - Garbage Collection

SGsSY — Sun, 07 May 2023 05:27:50 +0000

分享記錄檔 YouTube

JavaScript 會自動分配物件的記憶體位置並在它們不再被使用時清除，清除的這個行為就是 Garbage Collection。

Memory life cycle

分配記憶體位置
存取記憶體位置
當不再使用時釋放記憶體位置

Mark-and-Sweep

遍歷記憶體中所有變數，標記那些仍被使用的變數，沒被標記的就是可以回收的垃圾。

garbage collector 會從 root ( in JS is global object ) 出發，找到所有引用根的物件，再找到引用這些物件的物件，以此類推，將找到所有可到達的物件，並找出那些不可到達的物件。

The Most Familiar Stranger - JavaScript - 閉包

SGsSY — Sun, 07 May 2023 05:25:52 +0000

分享記錄檔 YouTube

根據 MDN 的說法閉包是函式以及該函式被宣告時所在的作用域環境 ( lexical environment ) 的組合

語法作用域 ( lexical scoping )

function init() {
    let name = 'John';
    function getName() {
        return name;
    }
    getName();
}

init();   // John

getName() 並無定義 name 這個變數，但它可以參考語法作用域的變數，因此能取用到父函式宣告的變數 name，如果父函式沒找到，它可以繼續往上找，一路找到全域變數。global 的 lexical scope 就是 null。

閉包 ( Closure )

function init() {
    let name = 'John';
    function getName() {
        return name;
    }

    return getName;
}

let doInit = init();
doInit();   // John

function init() {
    let name = 'John';
    function getName() {
        console.log(name); // 不能在 name 被宣告前使用
        let name = 'Jay';
    }

    return getName;
}

在函數內部捕獲和保存當前語境中的變數和狀態，並將其留存在函數外部，以便在後續的呼叫中繼續使用，即使當前作用域已經被銷毀了。

應用場景

狀態保存

function useState(initialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function setState(updatedState) {
    state = updatedState;
  }
  return [getState, setState];
}

const [count, setCount] = useState(0);

count();   // 0
setCount(1);
count();   // 1
setCount(500);
count();   // 500

模擬私有變數

function createCounter() {
  let count = 0;
  function counter() {
    count++;
    console.log(count);
  }
  return counter;
}

const counter1 = createCounter();
counter1(); // 1
counter1(); // 2
counter1(); // 3

const counter2 = createCounter();
counter2(); // 1
counter2(); // 2
counter2(); // 3

⚠️ 閉包是很強大的功能，但過度使用容易造成記憶體流失 (memory leak)

以下程式碼會依序輸出什麼呢？

function closure() { 
    let counter = 0; 
    return () => { 
        counter++;
        console.log(counter);
    }; 
}

const counter1 = closure();
const counter2 = closure();

counter1();
counter1();
counter2();
counter1();

答案：1, 2, 1, 3

The Most Familiar Stranger - JavaScript - 變數

SGsSY — Sun, 07 May 2023 05:21:30 +0000

分享記錄檔 YouTube

在 JavaScript 內要宣告一個變數我們可以使用 var、let、const

那他們之間有什麼差異呢? 為什麼我們在實務應用上總是使用 let、const 呢?

作用域 ( Scope )

const、let 是區塊作用域 ( block scope )，var 是函式作用域 ( function scope )

function test() {
    {
        const x = 10;
    }
    console.log(x); // Uncaught ReferenceError: x is not defined
    {
        let y = 20;
    }
    console.log(y); // Uncaught ReferenceError: y is not defined
    {
        var z = 30;
    }
    console.log(z); // 30
}
console.log(z); // Uncaught ReferenceError: z is not defined

提升 ( Hoisting )

是一種將變數、函式宣告提升到作用域頂部的行為。不同的是，如果我們沒有宣告就直接使用該變數，var 會回傳 undefined，let、const 會報錯。

function test() {
  console.log(a); // undefined
    var a = 10;
}
test();

// 實際上 JS Runtime 會像這樣
// function test() {
//   var a;
//   console.log(a);
//   a = 10;
// }
// test();

function test() {
  console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 10;
}
test();

function test() {
  console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
  const a = 1;
}
test();

💡 變數從區塊的一開始到他被初始化之前就是 temporal dead zone

var 有什麼問題?

實務上我們都不去使用 var，因為 var 的函式作用域、可重複宣告的特性很容易造成開發上的混亂

function test() {
    var name = 'John';
    // 200 行複雜程式判斷
    if (true) {
        var name = 'James'; // 重複宣告不會報錯，會意外覆蓋掉原有變數的值
    }
    console.log(`I am ${name}`); 
}
test(); // I am James

let、const 則不能重複宣告

let name = 'John';
let name = 'James'; // Uncaught SyntaxError: Identifier 'name' has already been declared

何時該使用 const ? 何時該使用 let ?

如果該變數不變則使用 const，會變則使用 let。

💡 變不變指的是記憶體位置的改變。

const b = {};
console.log(b) // {}

b.name = 'John';
console.log(b) // {name: 'John'}