文科少女學程式

12月 29 週一 202523:30
【JavaScript 萌新筆記】JavaScript 模組系統 - CommonJS 和 ES Module

今天想來看個基礎到不行，但之前一直沒有好好認識的 JavaScript 常識，也就是 JavaScript 的模組系統 - CommonJS 和 ES Module。
什麼是 JavaScript 的模組系統？
所謂的「JavaScript 模組系統」是指能將程式碼拆分為獨立、可重複使用之模組（module）的機制。透過模組系統，不同檔案之間可以用標準化的方式進行匯入與匯出，使專案在規模變大時仍然可以保持清晰的結構、良好的維護性與重複使用性。JavaScript 的模組系統也就是大家都有聽過的 CommonJS 和 ES Module。
JavaScript 模組系統的歷史背景
接下來讓我們快速來看一下關於 JavaScript 模組系統的歷史。在 JavaScript 被創造出來的早期，它的用途主要是替網頁加入一些簡單的互動效果，例如按鈕點擊事件或表單驗證。當時的網頁互動仍以整頁重新載入為主，JavaScript 的功能範圍很小，也沒有跨檔案共享邏輯的需求，因此語言本身並沒有內建「模組」的概念。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(0)

個人分類：JavaScript初體驗

▲top

4月 28 週日 202412:30
【JavaScript 萌新筆記】JavaScript 的內部插槽 (internal slots) 和內部方法 (internal methods)

這幾天在看一些之前沒有認真研究過的東西，突然看到了 internal slots 這個詞彙，小女我真的很不才，這是我第一次看到這個詞，就先拋棄自己原本在看的東西，轉向看看什麼是 internal slots 了，這次就來整理一下自己查了一些資料後，對於 internal slots 的理解。這次會先從 object 的 Prototype 開始了解，再進一次回到這次的主題「內部插槽 (internal slots) 和內部方法 (internal methods)」。
原型 (Prototype)
這次的主題雖然不是 Prototype 本人，但和 Prototype 也有一點點關係，就快速從什麼是 Prototype 開始看吧！
對 JavaScript 有一定認識的人，一定都聽過 Prototype，所謂的原型 (Prototype) 是物件一個特殊屬性，它自己本身也是一個物件，每個物件都有自己的原型 (Prototype)，內含一些方法及屬性，而我們平常使用的 toString()，也就是 Prototype 內的其中一個方法。
可以準備一個物件來看看，Prototype 到底是什麼。
【JavaScript 萌新筆記】JavaScript 的內

可以發現實際印出來的結果是 Object.prototype，而且顯示是一個空物件。
【JavaScript 萌新筆記】JavaScript 的內

再透過另一種方式建立物件，並把它的 Prototype 也印出來看看。
【JavaScript 萌新筆記】JavaScript 的內

可以發現一樣是一個空物件，但顯示上有點不太一樣。

這裡印出來的其實是一個繼承 Person.prototype 的空物件。
從這個印出來的內容，我們可以再往下延伸的想個問題
- 什麼是 Object.prototype？
簡單來說就是一個物件最根源的的原型，所有物件都是繼承於這個原型，不管用什麼方式建立的物件都繼承 (inheritance) 於 Object.prototype，也就是說不論是哪個物件，都可以取用到 Object.prototype 內含的方法和屬性。
- 為什麼 Object.prototype 是一個空物件？
前面一直有提到 Object.prototype 內含有一些方法和屬性，但是印出來卻是空物件，這是怎麼一回事呢？
主要是因為 Object.prototype 這個所有物件繼承的 Prototype 的方法和屬性是隱性的，無法直接用 console.log 直接印出來。但還是可以透過其他方式把它印出來，例如可以透過 getOwnPropertyNames 把內部的方法和屬性印出來：
【JavaScript 萌新筆記】JavaScript 的內

- 什麼是 Person.prototype？跟 Object.prototype 的差異是？
了解完什麼是 Object.prototype 後，也進一步看一下前面的第二種創建 object 方法中所提到的 Person.prototype 是什麼。
當我們創建一個名為 Person 的 function 時，這個函式會自動擁有一個名為 Prototype 屬性，這個 Prototype 會指向一個空物件，我們會把這個空物件稱為 Person.prototype，這個空物件是繼承於物件的基底 Prototype，也就是Object.prototype。當我們透過 new Person() 產生一個物件時，這個物件也就會繼承於 Person.prototype。
什麼是 Prototype Chain？
在用文字說明之前，我們先透過程式碼看一個情境。
【JavaScript 萌新筆記】JavaScript 的內

第一個印出來的結果，毫無懸念一定是空物件，因為 function 內是空的，沒有另外透過 this 去增加屬性。但是第二個 console.log 印出來的結果，居然不是 undefined！這是怎麼回事呢？
這就是因為 JavaScript 一個很重要的特性，也就是所謂的「Prototype Chain ( 原型鏈 )」。這是 JavaScript 中實現繼承的主要機制之一，在 JavaScript 中幾乎所有的物件都會透過原型鏈相互關聯。
如同前面有說過的「每個物件都有自己的原型 (prototype)」，當取用一些方法或是屬性時，如果在當前的這個物件中找不到，就會繼續往這個物件繼承的那一層找，所以也就會往Prototype找，剛好 ValueOf 是存在於 Prototype 中的方法，印出來也就不是 undefined。
什麼是內部插槽 (internal slots) 和內部方法 (internal methods)？
前面說了那麼多prototype，終於要來看看今天的主角了。
(internal slote) 和 (internal methods) 是 JavaScript 語言規範中的概念，是用來描述物件的內部結構和行為。但是這些內部插槽和方法通常不會被直接訪問或修改，而是由 JavaScript 引擎用於實現物件的行為和特性。
簡單來說的話，就是一個像是用來當作JavaScript 的屬性和方法的標籤，你不會直接拿這個標籤來使用，但你可以知道裡面含有這些屬性和方法。
通常會使用 [[]]的方法來表示 internal slots 或 internal methods，例如：[[Prototype]]。
內部插槽 (internal slots) 和內部方法 (internal methods) 與 Prototype 的關係是？
前面大致上了解什麼是 internal slots 和 internal methods之後，讓我們再回頭結合前面提到過的 Prototype 來思考一下和 prototype 之間的關係是什麼吧！
就如同前面所提到的一樣，可以把internal slots 和 internal methods 想像成是一個標籤，所以 [[Prototype]] 就代表著標示著 JavaScript 有著這一個屬性，並且指向物件的原型，但是 [[Prototype]] 不等同於 Prototype，[[Prototype]] 是一個內部屬性，而我們一開始提到的 Prototype則是內含共用屬性及方法的物件。
總結
最後快速總結一下這次的幾個重點！
- internal slots 和 internal methods 是內部屬性，會指向一個特定的物件，通常不會被直接使用，它們也像是一個標籤，標示著JavaScript有哪些屬性和方法。
- Prototype 是一個物件，每個物件都有自己所繼承的 Prototype 物件，內含一些共用的方法和屬性。
- [[Prototype]] 這個 internal slots 和 Prototype是不同的東西，[[Prototype]] 是一個 internal slots，Prototype則是一個物件。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(29)

個人分類：JavaScript初體驗

▲top

1月 23 週二 202410:00
【JavaScript萌新筆記】Ｍap的兄弟Set - 認識Set這個物件

很久之前有看了Map這個物件，今天來看看跟Ｍap一樣，也是一個很特別的物件，也就是Set。這種物件也是平常比較少會碰到，但學起來，在某些時刻也會有幫助的物件。今天就來好好認識一下Set的吧！
Set是什麼？
從MDN的說明內容可以理解到Set是一個object，可以儲存任何型別的唯一值，不論是原始型別或是物件。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(1) 人氣(48)

個人分類：JavaScript初體驗

▲top

6月 23 週五 202317:00
【JavaScript萌新筆記】JavaScript的mutable與immutable

mutable和immutable是一個很重要的觀念，而且mutable和immutable其實和JavaScript的基本型別和物件型別的傳值(by value)、傳址(by reference)特型有很大的關聯，我們這就從傳值和傳址的部分開始看吧！
基本型別的傳值特性
所謂傳值(by value)？
「傳值by value」白話一點來說的話，就的是「以值為基準，而不是以址為基準，每個值都是獨立的，就算值看起來是相等的，但所佔的記憶體位置都不同」。
可能單單這樣的一句話，還是很難理解，接下來透過一些實際的情境來理解吧！
實際的程式碼情境
carbon (20)

這一段程式碼，做了幾個動作，以行為單位分別是「宣告變數」、「用既有變數來宣告新的變數(將既有變數值賦予新變數)」、「對變數重新賦值」。
宣告變數
var a = 1;
在宣告變數時，一開始會先將變數指向undefined，再進行賦值的動作。JavaScript會留一個記憶體空間給這個值，在這個情境中，以圖呈現的話，會是以下這個樣子。
(1) 一開始會先指向undefined(如果是用let或const宣告的話，這一步的狀況會有點不同，這部分可以參考之前在學習hoisting特性的筆記文)。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(19)

個人分類：JavaScript初體驗

▲top

1月 08 週日 202322:00
【JavaScript萌新筆記】var、let、const和function的hoisting

JavaScript的hoisting這個特性在初學時期可能會偶爾不小心碰到，但不太會有什麼深刻的感受，或是不知道原來這就是hoisting。但是近期參與重構主題的讀書會，有討論到一些寫法和hoisting這個特性有關，才發現其實這個特性其實真的很需要好好認識，加上前陣子因為一些面談的過程，發現自己其實對這個概念有些錯誤的理解，所以就想說來好好地再幫自己釐清和整理一些這部分的必懂常識囉！
什麼是hoisting
首先，不免俗地要來說文解字一下！直接看字面的話，沒有什麼花俏的說明，hoisting的字面意思就是「提升」。再深入一點理解，就會是「提升」某些東西，某些東西被「提升」了。看起來好像很廢話，總之就是「提升」。
進到MDN看一下更詳細的說明吧！

從上述這段說明可以看到關於「提升」的關鍵句子，也就是"move the declaration of functions, variables or classes to the top of their scope"，大致上的意思就是是「函式、變數的宣告會被提升到作用域頂部」。
如何產生hoisting
雖然前面的那句話已經解釋了何謂hoisting，但是老實說如果還沒有深刻透過實作來理解的話，可能還是很難單單透過這句的說明就掌握到什麼是hoisting。在進一步看宣告會被hoisting的對象之前，先來從另一個角度了解hoisting是如何產生的吧！
這部分要回到最根本去理解JavaScript建立執行環境的過程，JavaScript在建立執行環境(Execution context)時，主要會分為兩個階段：創建階段(Creation Phase)、執行階段(Execute Phase)
第一個階段、創造階段
在這個階段主要會做以下幾件事情：
- 在記憶體中幫變數、函式建立一個空間，這就是和這次提到的hoisting有關的部分。
- 將全域物件(Global Object)、this設定到記憶體中
- 建立外部環境(Outer Environment)
第二階段、執行階段
在這個階段會逐行執行程式碼，並編譯成電腦懂的內容，如果在執行程式碼的時候，找不到當下程式碼中要使用的變數，就會往一層一層往外找。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(46)

個人分類：JavaScript初體驗

▲top

11月 12 週六 202208:54
【JavaScript萌新筆記】Map不是map - 認識Map這個物件

map這個陣列的操作方式，只要從超級新手升級到初階新手，基本上都知道。但是說到Map這個東東，可能就有些人本來沒看過了。沒錯！！就是我！！！這邊說的就是我！！！！學藝不精的我本來沒看QQ
不過本來沒看過沒關係，現在看過了，那就花點時間把他是什麼給搞懂吧！
Map是什麼？
【JavaScript萌新筆記】Map不是map - 認識M

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(32)

個人分類：JavaScript初體驗

▲top

4月 09 週六 202223:00
【JavaScript萌新筆記】Rx.js - 從觀察者模式(Observer Pattern)簡單理解Rx.js概念

之前偶爾會在公司的專案碰到前人用Rx.js寫的內容，但是天資愚鈍的我幾次自己嘗試去理解Rx.js的概念，都好像通了，又好像沒通。直到前陣子讀書會上，Ken大大分享觀察者模式(Observer Pattern)，這個Rx.js主要運用到的設計模式，才感覺自己應該有比較通了，所以想說這次就試著從上次讀書會中學習到的內容，延伸做一個Rx.js基本概念的學習筆記。
觀察者模式(Observer Pattern)是什麼？
如果去查相關資料的話，可能會查到類似的說明「observer訂閱observable後，當事件發生，observable就會去通知訂閱這個observable的observer。」
(這不是在繞口令，但看起來很像在繞口令)
雖然這句話，看起來不太難懂，但是對於當初第一次碰到這個pattern的我來說，observer(觀察者)和obervable(可觀察者)這兩個詞其實很抽象。等比較理解了之後，才發現其實沒那麼難。

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(93)

個人分類：JavaScript初體驗

▲top

12月 30 週四 202122:59
【JavaScript萌新筆記】for & forEach！是一樣的迴圈，也是不一樣的迴圈

今天來看看平常實務中，會常常被使用到的陣列迴圈寫法！
其實自從認識了forEach和map那些方法後，就比較少使用for迴圈了，原因只是單純覺得寫forEach和map感覺比較簡潔，不過用習慣了這些方法後，卻在前陣子在寫一個些需要依照不同情況跳訊息的function時，才發現到原來一樣是迴圈寫法，卻也不是真的一樣的迴圈，雖然大概念的確一樣是迴圈(咦)！
下面就簡單記錄一下從我這次的實務中，所認識到的迴圈的不同。
for迴圈和forEach迴圈
想用透過迴圈來處理一些狀況，且不需要在跑迴圈後，回傳一個新的陣列的話，就可以使用for迴圈和forEach迴圈。不過這for迴圈和forEach迴圈的寫法有些許的差異。
for迴圈
for迴圈主要有以下這兩種寫法，分別是以下兩種：
(其實嚴格來說，還有for in迴圈，但自己最常用的是這兩種，所以這邊就只會提到這兩種)
第一種
carbon (51)

第二種

forEach迴圈

兩種迴圈的差異點
1. for迴圈可以中斷，forEach迴圈不可以中斷
=> forEach會一直執行到整個迴圈跑完
以下這個情境，即使item等於3的情形下，有寫return，仍然還是會繼續遍歷完整個陣列。
carbon (56)

但是在下面這兩個用法中，就可以透過break，提前在遍歷到3的時候，就結束迴圈的進行，所以只會跑到陣列裡的數字3。
carbon (57)

2. arguments無法使用forEach
=> 雖然說arguments很像陣列，但他其實並不是真正的陣列，所以無法使用只有陣列才有的forEach這個方法。
在下面這個情境中，會跳出錯誤訊息，因為arguments無法使用forEach。

以上就是前陣子實作時碰到，才真正了解到的迴圈操作差異，那小小筆記就記錄到這裡啦。
打完收工！

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(0) 人氣(299)

個人分類：JavaScript初體驗

▲top

10月 23 週六 202120:00
【JavaScript萌新筆記】JavaScript陣列＆物件的深拷貝(deep copy)及淺拷貝(shallow copy)

又來補強自己的基本觀念了！！沒錯～小女不才，已經入行10個月，這個基本觀念還是沒有確實地建立起來。最近踩了一個大雷，不來好好學習不行了，所以就以這個主題來寫學習筆記了！
好啦！廢話不多說，直接進入正題啦！
物件型別的特性－傳址(by reference)
物件型別是傳址不是傳值，所以跟其他字串、數字不太一樣，在進行複製動作時，並沒有那麼單純。
物件型別因為是傳址，所以其實可以把物件型別用另一種方式去看，就是當宣告一個陣列變數或物件變數時，除了變數的內容，還隱藏著一個東西就是變數內容儲存的位址，也就是物件型別儲存的位址。這部分尤其在進行複製動作的時候，會有更明顯的感受，因為在進行複製時，由於傳址特性，雖然表面上把值複製出來賦值成另一個變數了，但實際上物件型別儲存的位址還是指向同一個，所以這個物件或陣列其實是一樣的東西，直接看一下小小的範例！
carbon (44)

(繼續閱讀...)

文科少女寫程式發表在痞客邦留言(1) 人氣(170)

個人分類：JavaScript初體驗

▲top

2月 10 週三 202113:24
【JavaScript萌新筆記】常用的陣列處理方法-回傳新陣列的方法、回傳布林值的方法

在這段期間，不管學習上的一些作業，或是做自己想做的一些作品，
少女我發現很常會需要運用陣列的處理方式讓自己拿到自己需要的資料。
但是少女我其實自己並不算太擅長用陣列的方法，除了常用的幾個方法外。
不過在經歷幾週的上班後，我發現針對這部分，自己還有一些雖然自己知道怎麼用，
但實際上卻沒有真正了解到該在什麼時機用這些陣列方法，
這次的學習筆記的重點就會以這部分為主。
使用陣列方法的各種情境
想要回傳新陣列時
filter()
我覺得這個方法看名字就可以馬上知道它的用途，簡單來說就是篩選(廢話)。
功能就跟在逛網拍時，篩選特定項目一樣，最後只會顯示符合篩選條件的商品項目(回傳新陣列)，
但是不符合條件的項目依舊還在(不影響原陣列)。
直接看範例！
範例一：篩選出大於100的數字