week3(2021/4/26~2021/5/2)

日期：110年4月26日(星期一)20:30~22:00 今日進度：[ALG101] 先別急著寫 leetcode(unit1-unit4)

Ｏ：今天先把上週進度的Unit1~4看完(題目之後再解)，因為其他課程也有提到相關概念，所以看得滿快的，雖然還是沒法一看到題目就想到解法。Ｒ：Ｉ：Ｄ：明天要專攻Unit5。

日期：110年4月27日(星期二)20:00~22:30 今日進度：[ALG101] 先別急著寫 leetcode(unit5)

Ｏ：今天試寫本週作業的hw1和hw3，不知道為什麼在LIOJ執行都跑出錯誤，但是在Git-bash執行是OK的...。Ｒ：Ｉ：Ｄ：明天繼續試寫題目。

日期：110年4月28日(星期三)20:00~23:10 今日進度：hw2(水仙花數) + [JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest

課程筆記：一、寫程式三寶：迴圈、函式、判斷式二、LIOJ起手式:

var readline = require('readline');

var lines = [] var rl = readline.createInterface({ input: process.stdin });

rl.on('line', function (line) { lines.push(line) });

rl.on('close', function() { solve(lines) })

//程式碼在這 function solve(lines) { var tmp = lines[0].split(' ') console.log(Number(tmp[0]) + Number(tmp[1])) } (一)水仙花數：　1.如何判斷幾位數 2.如何取出各個數字 (1)如何判斷幾位數解法1: function digitsNumber(n) { if (n<10){ return 1 } else if (n<100) { //100也可用1e2表示 return 2 } else if (n<1000) { //1000也可用1e3表示 return 3 } } (2)如何判斷幾位數解法2: function digitsNumber(n) { if (n===0) return 1 //輸入0也是1位數 var result = 0 while(n != 0 ) { n = Math.floor(n / 10) result++ } return result }

(1)如何取出各個數字解法: function isNarcissistic(n) { var m = n // m是n的次方，兩個數字要相同 var digits = digitsNumber(m) //先回傳n是幾位數 var sum = 0 while (m != 0) { var num = m % 10 sum += num**digits m = Math.floor(m / 10) }

if (sum === n) { return true } else { return false } }

(2)用字串法: function isNarcissistic(n) { var str = n + ‘’ var digits = str.length var sum = 0 for(var i = 0; i<str.length; i++) { sum += Number(str[i])**digits } return sum === n } (1)將結果回傳至solve(lines) function solve(lines) { var temp = lines[0].split(' ') //回傳結果用空格隔開 var n = Number(temp[0]) var m = Number(temp[1]) for (i=n;i<=m;i++) { if(isNarcissistic(i)) { console.log(i) } } }

solve([‘5 200’])

二、模組化與 Library (一)模組module

node.js提供模組可使用，使用方法如下:

var os = require(‘os’) >>要引入的module名稱 //ex.回傳所在之作業系統 console.log(os.platform()) (二)把東西借給別人exports 1.建立檔案>> touch myModule.js 2.建立函式後輸出>> function double(n) { return n * 2 } module.exports = double (這種方式比較常見)//將檔案輸出或是exports.double = double (引入的會是物件 )

如果要引入檔案>> var Mymodule = require(‘./myModule’)

三、NPM (node package manager) (一)NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。可以輸入npm -v來確認是否有安裝成功。 (二)npm install(以left-pad為例) npm install left-pad 會建立一個資料夾，裡頭存放left-pad的js 【分享給其他人我們的專案時，module 的給予方式】 (1)假如今天我們使用的 modules 有成千上萬個，那容量肯定非常大，如果還要 repository 到 github 上，不切實際。因此我們可以採用以下方式： (2)先 npm init ，其類似git init ，建立一些 npm 的基本設定和檔案，其中我們要的檔案是 package.json。package.json 這個檔案格式是 JSON，類似 JavaScript 的物件表示形式，只差在 key 絕對要用雙引號（" "）包覆著，其它部分大同小異。 (3)接著我們只要 npm install 任何 module ，皆會被記錄在 package.json 檔案裡的「dependencies」這個 key 中。 (4)今天我們要 repository 時，node_modules 這個資料夾可以設定到 .gitignore這個資料夾裡，避免上傳上去。 (5)別人下載好我們的專案後，裡面就包括 package.json 這個檔案。 (6)只要輸入 npm install，在 package.json 檔案中，「 dependencies」這個 key 的所有 modules 都會被自動安裝。 (7)也就是說，他人可以根據你 package.json 的檔案，查看你用了哪些 modules ，這可以省下傳輸檔案大小所耗費的時間，同時彈性也較大，他人可以選擇性安裝他所需要的 modules，在「 dependencies」刪刪減減。 (三)npm scripts 1.在寫好指令後，用npm執行scripts 例: “scripts” : { “start” : “node index.js”, …. } 2.輸入 npm run start 3.可以在scripts下面做指令的修改，例如改為”start” : “node index2.js” ，但用npm執行時，都是輸入start(“start”的名稱也可以修改) (四)yarn：npm 以外的另一種選擇相關語法對照下載 npm install → yarn

初始化 npm init → yarn init

下載套件 npm install left-pad --saved → yarn add left-pad

快速執行命令 npm run start → yarn run start

Ｏ：今天試寫本週作業的hw2水仙花數，身為數學成績爛到有剩的人，當然是題目有看沒有懂，查了很多範例，還是想不出要怎麼解，所以只好先看解說影片來解題，然後又是一連串的錯誤訊息。關於外包函式的做法，現在還是搞不太懂要先跑哪個函式，得多練習一些題目來建立邏輯。Ｒ：Ｉ：Ｄ：明天繼續試寫題目以及觀看npm課程。

日期：110年4月29日(星期四)20:00~22:30 今日進度：[JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest

課程筆記：一、如何測試你的程式: 例: function repeat(str,times) { var result = ‘’ for(i = 0; i<times; i++) { result += str } return result } 一般來說，會用console.log→輸入條件測試是否成功，如console.log(repeat(‘abc’,5))，就會回傳abcabcabcabcabc；或是可用空字串，如console.log(repeat(‘’,3))，就會回傳一行空白。還有另一種方法，就是先寫出測試資料，如console.log(repeat(‘a’,5) === ‘aaaaa’)，若正確會回傳true。

二、利用 Jest 來寫你的第一個測試: (一)先安裝Jest→ yarn add --dev jest (二)把上面的repeat例先exports出去→ function repeat(str,times) { var result = ‘’ for(i = 0; i<times; i++) { result += str } return result } module.exports = repeat (三)console.log測試法: 新建一個index.test.js touch index.test.js vim index.test.js var repeat = require(‘./repeat’) console.log(repeat(‘a’,5)) 存檔離開後 node index.test.js (四)jest測試法: var repeat = require(‘./repeat’)

test('a重複5次應該要等於aaaaa', function() => { expect(repeat(‘a’,5)).toBe(‘aaaaa’); //把要執行的內容放在expect，執行結果放在toBe }); 存檔離開後不是輸入node index.test.js，而是先更新package.json→subl package.json 進入package.json檔案修改”test”:”jest” 或是指定單一檔案”jest index.test.js” 再輸入npm run test測試是否成功(如果npm版本比較新，也可輸入npx index.test.js測試)

(五)可以一次寫很多條測試，並用describe包起來: var repeat = require(‘./repeat’)

describe(‘測試’, function() { test('a重複5次應該要等於aaaaa', function() => { expect(repeat(‘a’,5)).toBe(‘aaaaa’);
}); test('abc重複1次應該要等於abc', function() => { expect(repeat(‘abc’,1)).toBe(‘abc’);
}); })

三、先寫測試再寫程式：TDD(Test-Driven Development，測試驅動開發) (一)選定一個功能，新增測試案例先寫好測試案例的程式，但尚未實作實際內容。 (二)執行測試，得到 Failed（紅燈）由於還沒撰寫實際內容，測試的結果是 failed。確保測試程式可執行，沒有語法錯誤等等。 (三)實作「夠用」的產品程式寫出可通過測試的案例。 (四)再次執行測試，得到 Passed（綠燈）確保程式的功能邏輯已經正確地得到實作。 (五)重構程式優化程式碼，同時確保每次修改後，執行測試皆能通過。

四、ES5？ES6？這些到底是什麼 (一)Javascipt的語言是根據ECMAScript(標準、規範)來實作。 (二)ECMAScript 6在2015年正式發布，也被稱作ES6或ES2015

五、ES6語法-宣告變數的新選擇：let 與 const (一)const = constant常數: 代表值不能改變 (二)var:作用域在function內，如果變數脫離function就失效 (三)let:作用域在一個block內，但建議常用let (四)再也不需要字串拼接：Template Literals 為避免多行字串拼接時，容易出現錯誤，ES6可使用`符號(跟~同一鍵)就可輕鬆分隔，如下: var str = hello world abc 另有變數內嵌法${}，可在字串中插入，如下: function sayHi(name) { console.log(hello, ${name} now is ${new Date()}`) } sayHi(‘nick’)

六、Destructuring-解構，可直接取出變數 (一)陣列可直接對應值，如下: const arr = [1,2,3,4] var [first, second, third, fourth] = [1,2,3,4] console.log(second, third) (二)物件也可對應: const obj = { name : ‘nick’, age : 30, address: ’Taiwan’ } var {name,age,address} = obj console.log(address)

七、把東西展開-Spread Operator 例: var arr = [1,2,3] var arr2 = [4,5,6,...arr] //寫法是...arr，可以放在陣列任何地方 console.log(arr2) 輸出結果→[4,5,6,1,2,3]

Ｏ：Ｒ：Ｉ：Ｄ：今天實作jest測試法時，輸入subl package.json卻出現無此指令的錯誤訊息，google關鍵字也沒有看到類似的解法...明天再研究到底是怎麼回事。

日期：110年4月30日(星期五)21:00~23:00 今日進度：[JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest

課程筆記：一、「反向」的展開：Rest Parameters: (一)例: var arr = [1,2,3,4] var [first, second] = arr

console.log(first) //會回傳1 可改為 var arr = [1,2,3,4] var [first,...rest] = arr //...rest只能放在陣列最後面

console.log(rest) //會回傳 [2,3,4]

(二)物件也可以用: var obj = { a:1, b:2, c:3 }

var {a,...rest} = {} console.log(rest) //會回傳 {b:2,C:3} 可改為 var obj = { a:1, b:2 }

var obj2 = { ...obj, c:3 }

var {a,...rest} = obj2

console.log(a,rest) //會回傳{b:2,c:3} (三)function也可以: function add(...args) { console.log(args) //會回傳陣列 [1,2] return args[0] + args[1] }

console.log(add(1,2,3,4,5))

二、加上預設值：Default Parameters (一)例: function repeat(str,times) { return str.repeat(times) } console.log(repeat(‘abs’),5) //會回傳abc5次預設值可以先設好 function repeat(str = ‘hello’, times = 5) { return str.repeat(times) } console.log(repeat()) //會回傳hello5次

(二)物件版本 const obh = { b:2 } const {a=123,b} = obj console.log(a,b) //會回傳123,2

三、Function 的更新：箭頭函式 Arrow Function (一)例: const test = function(n) { return n } function可用=>取代 const test = n => { return n } (二)例: var arr= [1,2,3,4] console.log( arr .filter(fonction(value)) { return value >1 }) .map(function(value) { return value 2 }) ) 用=>取代 var arr= [1,2,3,4] console.log( arr .filter(value => { return value >1 }) .map(value => { return value 2 }) ) 還可再省略 var arr= [1,2,3,4] console.log( arr .filter(value =>value >1) .map(value => value *2 ) )

四、Import 與 Export (一)例: function add(a,b) { return a + b } 如果要將這個函式輸出，可加上export export function add(a,b) { return a + b } 在node.js要呼叫的話，可使用import import {add} from ‘./utils’ console.log(add(3,5)) 但是在node下不支援import，所以要改用npx babel-node index.js 如果要在export的時候更改名稱 function add(a,b) { return a + b } export { add as addFunction } 如果想一次把東西都import進來 import as utils from ‘./utils’ //在程式語言中代表所有東西 (二)export default export default function add(a,b) { return a + b } import add from ‘./utils’ //函式就可以不用加{}

五、Babel 簡介與基本使用方法為了在舊的系統上作業，將新的語法轉換成舊的語法的工具 Babel 的安裝說明：https://babeljs.io/docs/en/next/babel-node.html 設定步驟： 1.安裝必要套件：npm install --save-dev @babel/core @babel/node @babel/preset-env 2.新增 .babelrc 3.填入內容，告訴 babel 要用這個 preset： {

"presets": ["@babel/preset-env"]

}

最後使用 npx babel-node index.js 即可

六、總結重點: 1.模組化==>寫程式常用，可把共用的function抽出來模組化，避免不同檔案都有類似的function，避免修正時要同時修好幾個檔案，也可下載常用module使用 2.測試==>單元測試，可事先測試function功能是否正常 3.ES6==>不一定要用ES6的新語法，如果不知道是什麼功能就不要用，不過建議var可改用let或是const，因為sccop作用域比較小，較不會影響到其他變數。

Ｏ：Ｒ：Ｉ：Ｄ：今天的課程把JS102上完了，學到了很多新知識，但是也忘記了之前學到的東西，看來要時刻把之前的筆記拿出來複習，不然都沒有好好消化。

日期：110年5月1日(星期六)22:00~24:00 今日進度：寫作業今日心得：我覺得我看到題目，除了想不出解法外，連程式的架構都不是很確定，常常想了半天還是沒有頭緒，只好翻找筆記，或是邊看解說影片邊解題，這實在是讓人很挫折。

日期：110年5月2日(星期日)20:00~23:00 今日進度：寫作業今日心得：第三週的課程結束了，本周練習了很多題目，但是沒什麼時間看解說影片，所以對於程式的構造之類的還不是特別熟練，下週開始除了新的進度外，也要開始安排做之前課程的複習，不然真的是學一個忘一個。

Lu-yeom / mentor-program-5th-self-learning

week3(2021/4/26~2021/5/2) #3