最近在學習的時候，常常遇到問題卻不知怎麼問人的窘狀，也發現自己常常把問題「複雜化」，而這個後果就是會讓自己如鬼打牆般轉不出來。程式設計最吸引我的一部份就是程式的結果或許一樣，但這中間的運作卻是多樣的，每次在看到其他人解出題來時，總會對於解題的方式感到讚嘆，自己不知要練多久才有那個程度。而也在透過「試著讀懂」其他人的程式碼的過程中又學習到許多。

在使用 Vue.js 的v-for時，需要使用v-bind:key='uniqueValue'去綁定一個唯一值，這樣可以讓 Vue 知道哪一個元素有變動而單一渲染，但是有時拿到的資料並沒有「唯一」值，如果使用陣列的索引值(index)當 key 的唯一值，會有因陣列的變動而索引值被改動的問題。如果後端給的資料沒有在每一筆資料裡給各唯一值，那麼只好自己生成，但是怎麼在 JSON 格式裡為每一個陣列裡的物間自動加上一對「鍵與唯一值」例如:

new Date() 物件的時間處理

我們常需要在網頁上處理或顯示時間，例如文章是何時編輯的、購物時間或是在觀察程式碼的效能時也會需要時間的處理，JavaScript 是如何處理日期和時間的呢？

JavaScript 包含了一個處理時間的物件：new Date()，透過這個構造式裡的方法或參數，我們可以精準的計算任何形式的時間。在這個物件的時間計算單位為毫秒（1000 毫秒為一秒），所以處理時需要另外除以 1000 才能得到我們熟悉的秒數。

Date()物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間的。要得到當下的時間是很容易的，這個當下時間來自於我們本身使用的電腦當下的時間，而電腦的時間，有可能是透過網路而得到電腦當下所在時區的時間。但如果我們想要「計算時間」就必須透過一些方式與計算，例如想要計算不是在同時需的時間，或是要對某個時間點做倒數。

學習路上跌跌撞撞、過程總是零散，生活中總是被瑣事切割成碎片，如何把碎片時間拾揀與拼湊成可專心學習的塊狀已是一種考驗。

遇到六角舉辦的「JS 學徒特訓班」，給自己一次機會跟上進度，也要求自己要真的理解才寫，這需要時間，而語法的不熟悉仍然花時間，這樣一次、兩次、三次的記憶，希望能夠多留在腦中，很清楚知道自己忘的比記的還快，也在找尋且動自己對語法記憶的一把鑰匙。學習程式是非常全面性的，也因此看到自己在幾十年歲月裡看不到的盲點，雖然開始的非常慢，但總是比沒開始的好，那就透過寫程式當作一種自我的修煉吧。

參加六角舉辦的「JS 學徒特訓班」記錄筆記

第三十關，第三十關 C3.js 圖表整合

內容：以 Axios 讀取 API、使用 D3js 顯示視覺畫圖表。
方式：

引進所需的函式庫

讀取 API 的 Axios
資料視覺畫的 D3js, C3js 以及 C3 所需的 CSS

想解決問題的慾望

大約是一週前，準備在因新冠疫情禁足的一個月之後，重啟一天發一篇文的挑戰。

因為每日練習英文打字，加上五十肩的疼痛，在無法讓肩膀適時休息之下，肩膀痛到不行，也因此學習之旅走鐘的頗嚴重，同時也清楚如果自己不持續下去，勢必有些學過的東西又會遺忘，所以決定每天就打一小小篇文就好。結果計畫又因一個zsh: command not found hexo的出現，又壞壞去了。

實在搞不清楚為什麼平常用得好好的指令突然就不能用了，在找問題出現在哪，且花了許多還是找不出來的狀況下，決定上「親愛的好想」的 slack 發問，在許多夥伴的幫助下，慢慢釐清可能的問題點，但由於自己的基本知識欠缺，而發生一知半解的狀況。

大部分的許多專案的開發，都是偏向 Cli 環境部署的方式開發，也就是常聽到的「腳手架」的方式，但為什麼是「腳手架」？還是這也代表「起手式」？也就是專案在開發，應該就把要開發與運行的環境架設好，到時要打包輸出相容個瀏覽器的語法就會變得簡單多了。

雖然剛開始設定有點繁複，但只要習慣了、工具都齊了，這樣開發起來在測試也會順手許多，所以開發基本功還是要學起來。

實際上以 Cli 的方式部署，也有許多優點，因為他不只會幫你部署，還把整個專案需要用的檔案與資料夾都自動生成，讓你一安裝完就可以寫「Hello World」，當然這些自動生成的檔案我們也需要去了解其作用與規則，不然檔案放錯位置也是會產生錯誤的。

這系列是由觀看法國這位求職教練 Yves Gautier 的 QuestionEntretien 這一系列的影片Parlez moi de vous, présentez-vous, exemples de réponses (coaching emploi)的筆記。

在法國找工作必須先進入「找工作」領域，也就是說，要先學習如何找工作。從如何寫履歷、寫動機信、得到面試機會，如何面試，都有種種的眉眉角角的地方要注意，而歐洲文化與東方的不同，也讓面試時所注重的點不同，這是文化上的差距，需要多聽聽法國的求職教練怎麼說，才能較為清楚與正確地在面試中表達自己。

在法國面試，一定會先請你口頭自我介紹，如何在幾分鐘內把自己的動機和特質介紹給對方，且讓對方對你有印象還真不是件容易的事，當對方請你做簡短的自我介紹，以下為建議。

請你談談你自己

1. 為什麼自我介紹是必要的

• 是面試的開端
• 好的內容是給對方對的訊息
• 讓對方聆聽

2. 常犯的錯誤

• 敘述履歷、太攏長、偏離主題

3. 回答範例

• 有主題的敘述自己的專長與特質，從技術面、工作經驗等等條例式的敘述。
• 以目標來敘述自己，例如想成為開發者的，用關鍵字的方式說明自己的特質。
• 如果得到這個職位後的計畫。

重新看了 Chris 的鐵人賽糙扣系列，在這一篇裡糙 code 與他們的產地 - if 的判斷式 看到了 Array 去重的部分，卻看不懂…先記下，看以後有沒有辦法看懂。

Array 去掉重複值

在處理 Array 元素重複問題時，常常會寫 if 並且走訪元素找重複。
好一點的，會使用 Array.prototype.includes

1
2
3
4
5
6
7
8

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var arr2 = [];
arr.forEach(item => {
  if (!arr2.includes(item)) {
    arr2.push(item);
  }
});
arr2; // [1, 2, 3, 4, 5]

但是，這很糙!!! <– Chris 大大說的。
其實，只要換容器，就可以輕鬆做到這件事。

1
2

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var arr2 = [...new Set(arr)]; // [1, 2, 3, 4, 5]

你看！沒有任何的 if 這樣的品味才對。<– 也是 Chris 大大說的。

待續….

常常聽到 JavaScript 的語法作用域和其它語言有些不同，主要是 JavaScript 是屬於使用「靜態作用域」的語言，那什麼又是「靜態作用域」呢？

簡單來說，「靜態作用域」就是變數的作用域在被解析時，就已經確定了作用域，且不會再改變。有靜態就有動態，而「動態作用域」又是什麼？
「動態作用域」是變數的作用域，在調用函式的時候才決定。

靜態作用域，是在 語法解析的時候，就已經確定了。
動態作用域，是在函式被調用呼叫的時候才決定的。

1
2
3
4
5

function callName() {
  let moi = 'Tsuifei';
  console.log(moi);
}
callName(); // Tsuifei

在function裡的變數因為被函式包住，所以是區域變數，而在函式最外層的則是全域變數，所以在上面這段程式中，我們呼叫了callName()這個函式，再進去一行行執行函式內，當我們要它印出moi時，他會先去上面（已經讀到的）找，這時會找到let moi = 'Tsuifei';而把'Tsuifei'印出來。

但是如果函式裡面找不到moi，又要在函式裡面印出moi呢？因為moi這個變數是在callName()這個函式被定義的，所以它的作用域就會在這個函式裡。

1
2
3
4
5

function callName() {
  let moi = 'Tsuifei';
}
callName(); //
console.log(moi);

1
2
3
4
5
6
7
8
9

let moi = 'Philippe';
function callName() {
  let moi = 'Tsuifei';
  console.log('內：' + moi);
}
console.log('外：' + moi);
callName();
// 外：Philippe
// 內：Tsuifei

參考：
Javascript 進階 2-3 語法作用域(Lexical scope) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Ajax 全名為 Asynchronous JavaScript and XML，一種允許瀏覽器與伺服器交換資料，而不需刷新頁面的技術，都可以叫做 Ajax.

Ajax 這個名字是在 2005 年 5 月的時候，Adaptive Path 的 Jasse James Garrett 在他所寫的文章 Ajax : New Approach to Web Application 中提出的。而 Ajax 這項技術，是由 Google 在 Google labs 發佈的 Google Maps 和 Google Suggest 後真正為人所認識。

Ajax 的技術特殊在於，資料在瀏覽器端與伺服器端交換資料時是「獨立傳輸」而不需要返回整個頁面，只需要更新頁面的一部分。

不需要更新整個頁面資料的技術有好幾種：

• Flash
• Java applet
• 框架
• 隱藏的 iframe
• XMLHttpRequest : 此物件是 JavaScript 的一個模組，可使網頁與伺服器進行溝通，是創建 Ajax 應用的最佳選擇，實際上通常我們會把 Ajax 當成 XMLHttpRequest 物件的代名詞。

Ajax 的工作原理

Ajax 相關工具

Ajax 並不是新技術，它實際上是集合好幾種技術，每種技術各盡其職，整合起來而成的技術。

• 伺服器端語言：伺服器端需具備像瀏覽器發送特定訊息的能力，Ajax 與伺服器端語言無關。
• XML(eXtensible Markup Language, 可擴展標記語言)，是一種描述資料的格式。Ajax 需要某種格式化的格式來在客戶端和伺服器端之間傳遞資料，XML 是其中一種。
• XHTML 和 CSS 標準化呈現
• DOM 可以與之實現動態顯示與互動。DOM 簡介
• 使用 XMLHTTP 組件 XHLHttpRequest 物件進行非同步資料讀取。
• 使用 JavaScript 綁定和處理所有的資料。

Ajax 缺點

• 由 JavaScript 和 AJAX 引擎導致的瀏覽器兼容問題。
• 頁面局部更新，導致後退功能失效。
• 對串接媒體的支持沒有 Flash, JavaScript 好。
• 部分 Mobile 設備如手機、平板支援度差。

XMLHttpRequest 概述

XMLHttpRequest 最早是在 IE 5 中以 ActiveX 組件的型態實現的，它並不是 W3C 的標準。

• Internet Explorer 把 XMLHttpRequest 當成是一個 ActiveX 物件。
• 其他瀏覽器如 FireFox, Safari, Opera 把 XMLHttpRequest 當成一個本地端的 JavaSCript 的物件。
• XMLHttpRequest 在不同瀏覽器上是可以互相兼容的，所以可以用同樣的方法去走訪 XMLHttpRequest 實例的屬性和方法，不論這個實例是用哪種方式創建。

創建 XMLHttpRequest 物件

為了每次寫 Ajax 的時候可快速開發，可以把 XMLHttpRequest 物件測試寫成一個可重複用的函式：

1
2
3
4
5
6
7
8

function getHTTPObject() {
  let xhr = false;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
}

HTTP 請求(request)與回應(response)

一個 HTTP 請求(request)由四個部分組成

• HTTP 請求方法(method)或「動詞」(verb)
• 所請求的 url
• 一組選擇性的請求標頭(headers)，其中包含認證(authentication)資訊
• 一組選擇性的請求主體(body)

伺服器所送出的的 HTTP 回應(response)有三個部分

• 由數值與文字所組成的狀態碼(status code)，指定請求或失敗。
• 一組回應標頭(headers)
• 回應主體(body)

使用 Axios

Axios 在 Github 上說明，可透過 npm 安裝在開發專案上，或者也可以使用 CDN 將 Axios 引進來，就可以開始用了。

先以 GET 的方式向 Server 請求資料，因為 Axios 是非同步，所以response會在程式一行行都跑完後，最後才會跑.then的部分。

線上模擬 api www.mocky.io

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>;

// 使用 GER 方法

// Make a request for a user with a given ID
axios
  .get('/user?ID=12345')
  .then(function (response) {
    // handle success 接收伺服器的回應
    console.log(response);
  })
  .catch(function (error) {
    // handle error 如有錯誤會到這裡
    console.error(error);
  })
  .then(function () {
    // always executed 無論如何都會執行
  });

// 使用 POST 方法

HTTP Methods

運作方式為 Server -> JSON -> Client -> AJAX -> Server

1. GET 讀取 readoncy

只有 GET 才應使用 Query String (重要)
如果 fd 結尾 -> 讀取單一物
如果沒有 fd 結尾 -> 讀取該物的 collection

2. DELELE 刪除特定資料

3. POST 建立新資源

會把資源的 ID 傳回給用戶
如果 POST 兩次怎麼辦？

4. PATCH 更動資源的部分內容

• URL = /v1/users/1001
• Method = PATCH
• Request Body = { “age” : 31}

5. PUT 新上傳的內容、覆蓋原來的

或是 Partial Update 部分更動

6. Method OPTIONS

• 用來查詢某ㄧ資源，並能使用的 method
• 在 cors domain request 時 Client 端會先發出 OPTIONS 查詢

相關連結：
axios/axios: Promise based HTTP client for the browser and node.js