--- tags: JavaScript 每日任務 --- # JS 每日任務 ## 10/03 ~ 10/14 每日任務挑戰列表 [每日任務挑戰列表](https://rpg.hexschool.com/training/32/show?embedhm=ibb_QjDUSkGPrph3odN6lg) ### 10/03 Day1:變數自我介紹 🏅 Day 01 - 變數自我介紹 #### 題目 --- 歡迎大家參加這次的 JS 工程師養成直播班,就先來自我介紹一下吧! 首先請大家替以下的變數適當的命名,並賦予它們值: >變數 1: 組別 >變數 2: Discord 名稱 >變數 3: 來自哪裡 >變數 4: 目前的職位 >變數 5: 興趣 >變數 6: JS 學習時數 接著透過 `console.log` 輸出以下字串,`「」`中的內容需要**依序**代入上面的變數呈現。 ``` 大家好,我是第「x」組的「xxx」,很高興認識各位! 我來自「xx」,目前是一個「xxx」,平常的興趣是「xxx」。 預計之後每天會花「x」小時學習 JavaScript,未來還請多多指教。 ``` =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/wvjEEVE) #### 今天的每日刷題主題「Even or Odd - 偶數或奇數」 刷題連結:https://www.codewars.com/kata/53da3dbb4a5168369a0000fe =>ok #### 本週刷題任務主題「四則運算」 每週任務連結:https://hackmd.io/lvFWrEseSuWrWs_tX7RuIg (有任何問題可以到「作業討論」頻道中討論) =>[已完成](https://codepen.io/mwebwvuq-the-flexboxer/pen/GRddzeo) ### 10/04 Day2:型別與宣告 🏅 Day 02 - 型別與宣告 #### 題目 以下兩題請合併為一份 CodePen 繳交,並透過「註解」進行回答。 ##### 問題一 --- 以下變數 a, b, c, d, e, f 它們的值、型別各自為何? (請先想想看,不要用 console.log 檢查) ```javascript= let a = "10" + "10"; let b = "10" * "10"; let c = 10 + "10"; let d = 10 * "10"; let e = 10 - "2"; let f = "10" - "2"; ``` 請依照以下格式回答 ```javascript= // 問題一 // a = 值, 型別 // b = 值, 型別 ``` ##### 問題二 --- 請問以下題項哪些是有問題的,並說明為什麼。 ```js= // 1 let myName = "jay"; // 2 var _state = true; // 3 let true = true; // 4 const 520Pretty = 520; // 5 const appleNum = 10; appleNum = 2; // 6 var ming ='小明'; var ming = '小民'; // 7 const ming = '小明'; const ming = '小民'; // 8 let ming = '小明'; let ming = '小民'; // 9 let ming = '小明'; ming = '小民'; // 10 let $open = "芝麻開門'; ``` 範例回答格式: ```javascript= // 問題二 // (2),因為 blablabla // (3),因為 balabababa ``` =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/qBYMJNm) * 今天的每日刷題主題「Basic Mathematical Operations - 基礎運算符號」 =>ok 刷題連結:https://www.codewars.com/kata/57356c55867b9b7a60000bd7 (可以到「刷題交流」論壇中討論) ### 10/05 Day3:小駝峰式命名 🏅 Day 03 - 小駝峰式命名 #### 題目 請試著回答以下問題。 以下題目請合併為一份 CodePen 繳交,並透過「註解」進行回答。 請參考維基百科的 [駝峰式命名法](https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB),試著以 **小駝峰式命名法** 宣告變數。 舉例: ```javascript= // 房間數量 let roomNum ; // 使用者名稱 let userName ; ``` 1. 咖啡價格 2. 貓貓的體重 3. 浴室數量 4. 刪除檔案 5. 最大人數 6. 姓氏 7. 家庭合照 =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/ZEoMmpJ) #### 今天的每日刷題主題「Thinkful - Logic Drills: Traffic light - 紅綠燈」 =>ok 刷題連結:https://www.codewars.com/kata/58649884a1659ed6cb000072 (可以到「刷題交流」論壇中討論) ### 10/06 Day4:型別陷阱題 🏅 Day 04 - 型別陷阱題 #### 題目 以下題目請合併為一份 CodePen 繳交,並透過「註解」進行回答。 ##### 問題 --- 以下變數 a, b, c, d 它們的值、型別各自為何? ( 請先想想看,不要用 console.log 檢查 ᕙ( ˙-˙ )ᕗ ) ```jsx= let a = true + true ; let b = false + 123 ; let c = null + 123 ; let d = null + '123'; ``` 範例回答格式: ```javascript= // a = 值, 型別 // b = 值, 型別 ``` =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/RwyYqYN) #### 今天的每日刷題主題「Remove String Spaces - 移除字串中的空格」 =>done 刷題連結:https://www.codewars.com/kata/57eae20f5500ad98e50002c5 (可以到「刷題交流」論壇中討論) ### 10/07 Day5:賦值運算子與記憶體觀念 🏅 Day 05 - 賦值運算子與記憶體觀念 #### 題目 以下兩題請合併為一份 CodePen 繳交,並透過「註解」進行回答。 ##### 問題一 --- 了解賦值運算子,並計算出最後 console.log 印出的結果 ```javascript= let a = 1; let b = 2; a += 30; a--; b - 1; a -= b; console.log(a); console.log(b); ``` ##### 問題二 --- 請說明以下程式碼最後共有幾個記憶體空間 ```javascript= let a = '3'; let b = 3; let c = a*b; a + 1; ``` =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/rNvZodE) #### 今天的每日刷題主題「The Feast of Many Beasts - 野獸的盛宴」 刷題連結:https://www.codewars.com/kata/5aa736a455f906981800360d (可以到「刷題交流」論壇中討論) ### 10/10 Day6:比較運算子 🏅 Day 06 - 比較運算子 #### 題目 以下題目請合併為一份 CodePen 繳交,並透過「註解」進行回答。 看完此文章「[比較運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E6%AF%94%E8%BC%83%E9%81%8B%E7%AE%97%E5%AD%90)」的部分,並試著回答以下程式碼 console.log 的結果。 ##### 問題 --- ```javascript= let a = 1; let b = 2; let c = "1"; // 1. console.log(a > b); // 2. console.log(a == c); // 3. console.log(a != b); // 4. console.log(a !== c); // 5. console.log(a >= c); ``` =>已完成:[codepen]( https://codepen.io/mwebwvuq-the-flexboxer/pen/QWxWvyZ) ### 10/11 Day7:邏輯運算子 🏅 Day 07 - 邏輯運算子 #### 題目 請看完此篇文章的「[邏輯運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90)」部分, 並試著回答以下程式碼 a、b、c、d、e 的值。 ##### 問題 --- ```javascript= let a = true || false; let b = 1 && 0; let c = (4 > 3) && (2 >= 2); let d = !(4 > 3); let e = true && (1 > 2); ``` <!-- 解答: a: true b: 0 c: true d: false e: false --> =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/oNyNogp) ### 10/12 Day8:運算子大雜燴 🏅 Day 08 - 運算子大雜燴 #### 題目 運用 [Day 6](https://hackmd.io/kEiaexWPTgyfULIMJ0zMCg) 及 [Day 7](https://hackmd.io/ZzlCecYGTf2MeHRPjtOrmw) 學到的知識,回答以下的問題吧~ ##### 問題 --- ```javascript= // 1. 請問變數 c 的值 let a = 1; let b = "1"; let c = (a===b) && (a!==b); // 2. 請問變數 g 的值 let e = '123'; let f = 456; let g = (e+f) === '123456'; // 3. 請問變數 j, k 的值 let h = true; let i = false; let j = 1 == h; let k = h || i; ``` =>複習:[比較運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E6%AF%94%E8%BC%83%E9%81%8B%E7%AE%97%E5%AD%90) ![](https://i.imgur.com/a64rubZ.png) <!-- 解答: 1. c: false 2. g: true 3. j: true k: true --> =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/KKeKyWV) ### 10/13 Day9:if、else if、else 練習一 🏅 Day 09 - if、else if、else 練習一 #### 題目 請看完此篇文章「[if else 陳述式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_%E9%99%B3%E8%BF%B0%E5%BC%8F)」部分,並試著回答下面問題。 ##### 問題 --- 請試著寫出以下情境: 範例: 如果我有 100 元,我就吃壽司,沒有就吃超商。 ```javascript= let myWallet = 200; if(myWallet >= 100) { console.log('我要吃壽司'); } else { console.log('我吃超商'); } ``` 1. 如果下雨我就坐捷運上班,沒有我就騎車上班 ```javascript= let weather = '雨天'; /* 請試著寫出判斷式 */ ``` 2. 如果 BMI > 24 就超重,18 ~ 24 體重正常,小於 18 過輕。(提示:補上問號部分) ```javascript= let myBMI = 19; /* 請試著寫出判斷式 */ if( ??? ) { console.log('過重'); } else if( ??? ) { console.log('體重正常'); } else { console.log('過輕'); } ``` <!-- 解答: 1. ```javascript= let weather = '雨天'; if(weather === '雨天') { console.log('搭捷運上班'); } else { console.log('騎車上班'); } ``` 2. ```javascript= let myBMI = 19; if(myBMI > 24) { console.log('過重'); } else if (myBMI <= 24 && myBMI >= 18){ console.log('體重正常'); } else { console.log('過輕'); } ``` --> =>已完成:[codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/bGKGMYW) ##### 筆記 ![](https://i.imgur.com/oJ20VbH.png) ### 10/14 Day10:if、else if、else 練習二 🏅 Day 10 - if、else if、else 練習二 #### 題目 延續 [Day 9](https://hackmd.io/NKf9tfsmQiymV88UaAZ3JQ) 的知識,試著回答下面問題。 ##### 問題 --- 觀看下方程式碼,試著回答出最後 console.log 會印出什麼: 第一題: ```javascript= let a = 10; let b = '10'; if( a >= b ){ console.log('a 等於 b'); } else { console.log('a 不等於 b'); } ``` 第二題: ```javascript= let c = false; if(!c){ console.log('六角學院 讚!'); } else { console.log('六角學院 讚讚!'); } ``` 第三題: ```javascript= let d = 100; if(d == '100'){ console.log('沒錯!'); } else if ( d != '100') { console.log ('這陷阱題!'); } else { console.log('錯!'); } ``` =>已完成:[CodePen](https://codepen.io/mwebwvuq-the-flexboxer/pen/GRGRdGj) <!-- 解答: 1. 'a 等於 b' 2. '六角學院 讚!' 3. '沒錯!' --> ## 10/17 ~ 10/28 每日任務挑戰列表 ### 10/17 Day11:陣列操作 🏅 Day 11 - 陣列操作 #### 題目 請運用課堂中教到的陣列相關知識,依照下方註解敘述,完成下方程式碼(補上 `...` 的部分) ##### 問題 --- ```javascript= let recipe = ['sugar', 'salt', 'flour', 'fruit']; // 1. 請使用陣列方法取得 recipe 的長度,並使用 console.log 印出 console.log(...); // 2. 請使用陣列取值方法取得結果為 'sugar' 的值,並使用 console.log 印出 console.log(...); // 3. 請使用陣列取值方法取得結果為 'fruit' 的值,並使用 console.log 印出 console.log(...); // 4. 請使用陣列方法替陣列 recipe 在最後新增一個值 'butter' recipe...; // 5. 請使用陣列方法刪除陣列 recipe 第 3 筆以後的資料(包含第 3 筆),最後印出整個陣列 recipe...; console.log(recipe); ``` =>已完成:[CodePen](https://codepen.io/mwebwvuq-the-flexboxer/pen/JjZjZYd) <!-- 解答: // 1. console.log(recipe.length); // 2. console.log(recipe[0]); // 3. console.log(recipe[3]); // 4. recipe.push('butter'); // 5. recipe.splice(2, recipe.length-1); console.log(recipe); --> 補充文章 - 「JS 常見陣列方法」: https://www.casper.tw/development/2020/10/04/js-array-methods/ ### 10/18 Day12:陣列操作應用 🏅 Day 12 - 陣列操作應用 #### 題目 高雄地區開始實施兵役體檢,只要符合以下其中一個條件就可以免除兵役: 1. BMI >= 35 2. 天生為扁平足 (Flatfoot) 請透過以下程式幫 Bob 判斷一下他需不需要當兵,如果需要,則用陣列方法把他加到 soldierName 陣列裡面。(補上 `...` 的部分) ```javascript= let soldierName = ["Tom", "Nick", "John"]; let bobBmi = 22; let isFlatfoot = false; if(...) { console.log("Bob 不用當兵"); } else { // 將 Bob 填入國軍名單 ... console.log("Bob 光榮入伍"); console.log(`名單: ${soldierName}`); } ``` <!-- 解答: ``` let soldierName = ["Tom", "Nick", "John"]; let bobBmi = 22; let isFlatfoot = false; if(bobBmi >= 35 || isFlatfoot) { console.log("Bob 不用當兵"); } else { // 將 Bob 填入國軍名單 soldierName.push("Bob"); console.log("Bob 光榮入伍"); console.log(`名單: ${soldierName}`); } ``` --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/JjZjZyK) ### 10/19 Day13:物件操作 🏅 Day 13 - 物件操作 #### 題目 以下是製作麵包的食譜,請新增一個名為 breadRecipe 的物件,並依照以下要求設定屬性: 1. 新增一個名為 ingredients 的屬性,其值為一個陣列,包含 "高筋麵包粉"、" 牛奶"、"酵母"、"糖"、"鹽"、"奶油"。 2. 新增一個名為 bakeTime 的屬性,其值為 30。 3. 新增一個名為 difficulty 的屬性,其值為 "簡單"。 4. 新增一個名為 seasoning 的屬性,其值為一個物件,包含: - 屬性名稱: sugar - 值:"22g" - 屬性名稱: salt - 值:"10g" - 屬性名稱: pepper - 值:"10g" ```javascript= let breadRecipe = { /* 程式碼撰寫處 */ }; ``` <!-- 解答: ``` let breadRecipe = { ingredients: ["高筋麵包粉", "牛奶", "酵母", "糖", "鹽", "奶油"], bakeTime: 30, difficulty: "簡單", seasoning: { sugar: "20g", salt: "10g", pepper: "10g" } }; ``` --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/vYrYrpe) ### 10/20 Day14:物件取值 🏅 Day 14 - 物件取值 在物件內新增、修改、取得屬性的方法有以下兩種: 1. 點記法 (Dot notation) ```javascript= let obj = {}; obj.key = "value"; // 新增或修改 console.log(obj.key); // 取得 ``` 2. 括弧記法 (Bracket notation) ```javascript= let obj = {}; // 當屬性的值帶有小數點、空格或是數字時可以使用,記得要加上引號 (單引號或雙引號皆可) obj['k e y'] = "value"; // 新增或修改 console.log(obj['key']); // 取得 ``` #### 題目 請觀看下方程式碼,依照註解敘述完成程式碼(補上 `...` 的部分): ```javascript= let weather = { country: "高雄", "PM2.5": 35, isSunny: false, rainingRegion: ['鼓山', '鹽埕', '旗津'], rainFall: { 鼓山: 400, 鹽埕: 300, } } // 取得 country 的值,並使用 console.log 印出 console.log(...); // 取得 "PM2.5" 的值,並使用 console.log 印出 console.log(...); // 取得 isSunny 的值,並使用 console.log 印出 console.log(...); // 取得 rainingRegion 陣列的第一個值 '鼓山',並使用 console.log 印出 console.log(...); // 在 rainFall 新增一個屬性名為「旗津」、設定值為 200,並,並使用 console.log 印出 rainFall 的值 ... console.log(rainFall); ``` <!-- 解答: // 取得 country 的值 console.log(weather.country); // 方法一 console.log(weather["country"]); // 方法二 // 取得 "PM2.5" 的值 console.log(weather["PM2.5"]); // 取得 isSunny 的值 console.log(weather.isSunny); // 方法一 console.log(weather["isSunny"]); // 方法二 // 取得 rainingRegion 陣列的第一個值 '鼓山' console.log(weather.rainingRegion[0]); // 在 rainFall 新增一個屬性名為「旗津」、設定值為 200,並輸出結果 weather.rainFall.旗津 = 200; // 方法一 console.log(weather.rainFall); weather["rainFall"]["旗津"] = 200; // 方法二 console.log(weather["rainFall"]); --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/abKbKeJ) ### 10/21 Day15:陣列物件整合操作應用 🏅 Day 15 - 陣列物件整合操作應用 #### 題目 請依照下方程式碼中註解的要求完成這段程式碼(補上 `...` 的部分): ```javascript= let productInfo = { price: 1000, // 購買價格 coupons: [ { due_date: "2022-10-15", // 到期日 id: 123, is_enabled: 0, // 是否啟用 percent: 0.7, // 折扣比例 title: "特惠七折", // coupon 標題 }, { due_date: "2022-08-08", // 到期日 id: 456, is_enabled: 1, // 是否啟用 percent: 0.5, // 折扣比例 title: "特惠五折", // coupon 標題 } ] }; /* 請取得 coupons 陣列中 id 為 456 的 percent,並賦值給 discountPercent */ let discountPercent = ...; /* 請取得 coupons 陣列中 id 為 456 的 title,並賦值給 title */ let title = ...; /* 請修改 coupons 陣列中 id 為 456 的 到期日,將其延後兩日(至 2022-08-10)*/ ... /* 請取得 coupons 陣列中 id 為 456 的 is_enabled,並填入以下 if 判斷式中; 如果判斷為 true,則對「購買價格」進行折扣 */ if(...) { /* 程式碼撰寫處,對「購買價格」進行折扣 */ ... console.log(`優惠券「${title}」已啟用`); } else { console.log("優惠券未啟用"); } console.log(`購買價格 ${productInfo.price}`); ``` <!-- 解答: let productInfo = { price: 1000, // 購買價格 coupons: [ { due_date: "2022-10-15", // 到期日 id: 123, is_enabled: 0, // 是否啟用 percent: 0.7, // 折扣比例 title: "特惠七折", // coupon 標題 }, { due_date: "2022-08-08", // 到期日 id: 456, is_enabled: 1, // 是否啟用 percent: 0.5, // 折扣比例 title: "特惠五折", // coupon 標題 } ] }; let discountPercent = productInfo.coupons[1].percent; let title = productInfo.coupons[1].title; productInfo.coupons[1].due_date = "2022-08-10"; if(productInfo.coupons[1].is_enabled) { /* 程式碼撰寫處,對「購買價格」進行折扣*/ productInfo.price *= discountPercent; console.log(`優惠券「${title}」已啟用`); } else { console.log("優惠券未啟用"); } console.log(`購買價格 ${productInfo.price}`); --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/mdKdjzY) ### 10/24 Day16:函式觀念一 🏅 Day 16 - 函式觀念一 依照下方教學練習,並回答問題。 #### 基本函式寫法教學 [課程影音連結](https://courses.hexschool.com/courses/202011131/lectures/42391122) 1. 宣告、命名函式 ```javascript= // 在此 morningAction 是自定義的名稱 function morningAction() { // 定義函式執行內容 console.log("刷牙"); console.log("洗臉"); } ``` 2. 呼叫函式 ```javascript= morningAction(); morningAction(); ``` > 1. 函式撰寫完後,需要呼叫才會執行 > 2. 函式可以重複呼叫 ##### 問題 --- 1. 宣告一個函式,讓此函式執行後會印出字串 `"這是一個函式"` 2. 觀看下方程式碼,最後會印出什麼 ```javascript= function sayHello() { console.log("ㄋ好"); } console.log("Bye!"); ``` 3. 觀看下方程式碼,選出正確敘述 ```javascript= function sayHi() { console.log("Hi"); } sayHi(); sayHi(); /* 選項 1. 函式不能重複呼叫,會報錯 2. 最後會印出兩個 Hi 3. 只會執行一次,印出一個 Hi */ ``` <!-- 解答: 1. 函式名稱可以隨意命名,盡量與執行內容相符即可 ``` function printString() { console.log("這是一個函式"); } printString(); // 記得呼叫才會執行 ``` 2. Bye! 3. 選項 2 --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/QWxWBPK) ### 10/25 Day17:函式觀念二 🏅 Day 17 - 函式觀念二 依照下方程式碼練習,並回答問題。 #### 函式裡面仍可以執行函式 [課程影音連結](https://courses.hexschool.com/courses/202011131/lectures/42391124) ```javascript= function dailyAction() { cleanHead(); console.log("出門"); console.log("回家"); cleanHead(); } function cleanHead() { console.log("刷牙"); console.log("洗臉"); } dailyAction(); ``` > 函式內部可以呼叫其他函式, > 可以重複利用程式碼、簡潔版面。 ##### 問題 --- 1. 觀看以下程式碼,利用函式觀念二,嘗試優化 `todayTask()` 函式 ```javascript= function todayTask() { console.log("觀看課程"); console.log("製作筆記"); console.log("每日任務"); console.log("觀看課程"); console.log("製作筆記"); console.log("主線任務"); console.log("觀看課程"); console.log("製作筆記"); } function watchAndNote() { console.log("觀看課程"); console.log("製作筆記"); } ``` 2. 觀看以下程式碼,最後會印出什麼 ```javascript= function printNumbers() { printOne(); console.log("11"); printOne(); } function printOne() { console.log("1"); } printOne(); ``` <!-- 解答: 1. ``` function todayTask() { watchAndNote(); console.log("每日任務"); watchAndNote(); console.log("主線任務"); watchAndNote(); } function watchAndNote() { console.log("觀看課程"); console.log("製作筆記"); } ``` 2. 1 (原因:printNumbers() 沒有呼叫!) --> ### 10/26 Day18:[函式觀念三] 🏅 Day 18 - 函式觀念三 依照下方程式碼練習,並回答問題。 #### 函式參數觀念 [課程影音連結](https://courses.hexschool.com/courses/202011131/lectures/42391125)(函式參數介紹、參數寫法) 1. 函式可以帶入自定義的參數(在此為 num1, num2),並在呼叫函式的時候傳入。 ```javascript= function callNum(num1, num2){ let total = num1 + num2; console.log(total); } // num1 等於 1, num2 等於 2 callNum(1, 2); // num1 等於 2, num2 等於 4 callNum(2, 4); ``` 2. 參數只存活在大括號。 ```javascript= function callNum(num){ // 在此可以成功呼叫 num console.log(num); } callNum(1); // 函數外部不可以呼叫 num,這行會報錯 // Uncaught ReferenceError: num is not defined console.log(num); ``` ##### 問題 --- 1. 觀看以下程式碼,最後會印出什麼,以及變數 `sum` 最後的值 ```javascript= let sum = 1; function calcNum(x) { sum += x; console.log(x); } calcNum(3); ``` 2. 下方程式碼宣告了一個陣列(陣列內是費波那契數列),請完成下方程式碼(補上 `...` 的部分),讓 `calcNextNum()` 函式可以正常執行,並讓陣列中最後兩個數字相加後 push 到陣列中,最後 `fibonacciArr` 陣列值為 `[1, 1, 2, 3, 5, 8]` ```javascript= let fibonacciArr = [1, 1, 2, 3, 5]; let fibonacciArrLength = fibonacciArr.length; function calcNextNum(...) { ... } calcNextNum(fibonacciArr[fibonacciArrLength-1], fibonacciArr[fibonacciArrLength-2]); console.log(fibonacciArr); ``` <!-- 解答: 1. 3, sum: 4 2. ```javascript= let fibonacciArr = [1, 1, 2, 3, 5]; let fibonacciArrLength = fibonacciArr.length; function calcNextNum(last, penultimate) { // 參數命名可以隨意自訂 fibonacciArr.push(last+penultimate); } calcNextNum(fibonacciArr[fibonacciArrLength-1], fibonacciArr[fibonacciArrLength-2]); console.log(fibonacciArr); ``` --> =>已完成:[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/YzvXzra) ### 10/27 Day19:[函式觀念四] 🏅 Day 19 - 函式觀念四 依照下方程式碼練習,並回答問題。 #### 函式的 return 觀念 [課程影音連結](https://courses.hexschool.com/courses/202011131/lectures/42391129)(return 寫法、return 可以有多個) 1. 函式可以用 return 回傳一個值,並可以將該值賦予給其他變數。 ```javascript= function calcTotalScore(chineseScore, englishScore){ let total = chineseScore + englishScore; return total; } // 將 calcTotalScore 的回傳值賦值給 markScore。 let markScore = calcTotalScore(60, 50); console.log(markScore); ``` 2. return 會中斷函式執行,可以有多個 return、搭配 if else 做使用。 ```javascript= function calcTotalScore(chineseScore, englishScore){ let total = chineseScore + englishScore; // 在此因為 total > 100,所以在第一個 if 函式就中斷了 if(total > 100){ return `總分 ${total},做的好啊 mark`; else{ return `總分 ${total},考得不是很好 mark`; } // 以下的 return 都不會執行 return chineseScore; return englishScore; } let markScore = calcTotalScore(60, 50); console.log(markScore); ``` ##### 問題 --- 1. 下方敘述何者正確 (1) 一個函式中不能有多個 return (2) return 的值可以賦予到變數上,像是下方程式碼中變數 `midNum` 最後的值會變為 `2` ```javascript= let midNum = 0; function calcMidNum(num1,num2) { return (num1 + num2) / 2; } midNum = calcMidNum(1,3); ``` 2. 觀看下方程式碼,選出正確敘述 ```javascript= let awardMoney = 0 function getAward(score) { if(score >= 90) { console.log("贏得獎金 100 元"); return 100; } else if(score >= 60) { console.log("贏得獎金 50 元"); return 50; } else { console.log("再接再厲!"); } console.log("比賽結束!"); } awardMoney = getAward(85); ``` 選項: (1) 最後會印出 2 個字串 (2) `awardMoney` 最後的值為 85 (3) `awardMoney` 最後的值為 50 <!-- 解答: 1. 2 2. 3 --> ### 10/28 Day20:[函式與陣列物件整合運用] 🏅 Day 20 - 函式與陣列物件整合運用 綜合前幾天函式觀念以及陣列物件相關操作,回答下方問題。 ##### 問題 --- 依照註解敘述,完成下方程式碼(只需要補上 `...` 的部分,其餘不要更動) ```javascript= let courses = [ { title: 'Javascript', members: 400, id: 1, isStarted: true, isSoldout: true, tasks: ['主線任務', '每日任務'] } ]; let newCourse = { title: 'Vue3', members: 300, id: 2, isStarted: false, isSoldout: true, tasks: ['主線任務', '每日任務'] }; // 1. 請將 courses 陣列中 id 為 1 的物件,tasks 陣列新增一筆資料為 '每日刷題'。 ... // 2. 請完成下方函式,將物件做為參數,判斷當課程中的 isSoldout 屬性為 true 時, // 就將此物件新增到 courses 陣列中,並回傳 courses 陣列的長度 // (只需要補上 ... 的部分,其餘不要更動) function addCourse(courseObj) { if(...) { courses....; return ...; console.log('新增成功'); } else { console.log('無法新增'); return ...; } return; } let coursesLength = addCourse(newCourse); // 3. 完成上方程式碼後,選出正確敘述 // 選項: // (1) 最後程式碼會印出 '新增成功',而變數 coursesLength 的值會變為 2 // (2) 最後程式碼不會印出任何字串 // (3) 如果 newCourse 的 isSoldout 屬性值為 false 時,執行 addCourse(newCourse) 將不會印出任何字串,也不會回傳 courses 陣列的長度 ``` <!-- 解答: ```javascript= let courses = [ { title: 'Javascript', members: 400, id: 1, isStarted: true, isSoldout: true, tasks: ['主線任務', '每日任務'] } ]; let newCourse = { title: 'Vue3', members: 300, id: 2, isStarted: false, isSoldout: true, tasks: ['主線任務', '每日任務'] }; // 1. courses[0].tasks.push('每日刷題'); // 2. function addCourse(courseObj) { if(courseObj.isSoldout) { courses.push(courseObj); return courses.length; console.log('新增成功'); } else { console.log('無法新增'); return courses.length; } return; } let coursesLength = addCourse(newCourse); // 3. 完成上方程式碼後,選出正確敘述 // 答案:(2) ``` --> ## 其他連結 1. [CodeWar刷題筆記](https://hackmd.io/vHCUR-I_TWmUQbHKcyvhqQ)