--- title: Codewars刷題 1~10 tags: codewars, description: --- Codewars刷題 1~10 === #### 1.此程式碼無法正確執行,請試著找出原因。 ![](https://i.imgur.com/aszbHRk.png) Ans:==缺少return==,無法將```a * b```的值回傳。 ```javascript= function multiply(a, b){ return a * b } console.log(multiply(2, 3)); //6 ``` <br> --- #### 2.創造一個函式,把數字代入參數,將會回傳此數字為偶數(even)或奇數(odd)。 ```javascript= function even_or_odd(number) { if (number % 2 === 0){ return `輸入的數字${number}為偶數(even)`; } else { return `輸入的數字${number}為奇數(odd)`; } } console.log(even_or_odd(123)); //輸入的數字123為奇數(odd) ``` - ==三元運算子==的解法 ```javascript= function even_or_odd(number) { return number % 2 === 0 ? `此數字${number}為偶數(even)` : `此數字${number}為奇數(odd)`; }; console.log(even_or_odd(123)); //輸入的數字123為奇數(odd) ``` 延伸閱讀 - [餘數運算子 (%)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Remainder) <br> --- #### 3.迴圈方式,執行第一次將星星加入str左邊,執行第二次將星星加入str右邊,以此類推。 - 用```if else```、```for```迴圈的解法 ```javascript= function padIt(str, n) { for (let i = 0; i < n; i++) { str = i % 2 === 0 ? `*${str}` : `${str}*`; // 執行迴圈,i從0、1、2遞增 // 每次都從餘數判斷是否為odd或even(三元運算子) // odd執行`*${str}` // even執行`${str}*` } return str; }; console.log(padIt('welcome', 0)); console.log(padIt('welcome', 3)); console.log(padIt('welcome', 10)); ``` - 用```while```的解法 ```javascript= function padIt(str, n) { while (n > 0) { str = n % 2 === 0 ? `${str}*` : `*${str}`; n--; } return str; }; console.log(padIt('welcome', 0)); console.log(padIt('welcome', 1)); console.log(padIt('welcome', 3)); console.log(padIt('welcome', 10)); ``` 延伸閱讀 - [while語法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/while) <br> --- #### 4.連續奇數的三角形,計算該三角形第 n 行中數字的總和,從第一行開始 ![](https://i.imgur.com/mq9ers1.png) 三角形的每層加總和,剛好是第n層^3^。 ```javascript= function rowSumOddNumbers(n) { return Math.pow(n, 3); } console.log(rowSumOddNumbers(5)); //125(三角形第五層奇數的總和) ``` 延伸閱讀 - [Math.pow()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/pow) <br> --- #### 5.移除字串第一個字符及最後一個字符 ```javascript= function removeChar(str){ // slice(begin,end) // 從第2個字元~倒數2個字元保留,其他去除 return str.slice(1, -1); // str.slice(2); 字串的第三個字元開始保留,其他去除 // str.slice(-2); 字串的倒數第二個字元開始保留,其他去除 }; console.log(removeChar('abcde')); ``` 延伸閱讀 - [Array.prototype.slice()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) <br> #### 6.代入數字,把大於0的數字加上負號,等於0或小於0則不變。 ![](https://i.imgur.com/1DGZiRG.png) - num > 0,執行-parseFloat(num, 10) - num < 0,執行parseFloat(num, 10) - 如果代入'123'或'1.23' ,parseFloat(num, 10)轉成**十進制 number型別** ```javascript= function makeNegative(num) { return num > 0 ? -parseFloat(num, 10) : parseFloat(num, 10); }; console.log(makeNegative(3)); // 3 console.log(makeNegative('-42')); // -42 console.log(typeof makeNegative('-42')); // number console.log(makeNegative(0)); // 0 console.log(makeNegative(0.12)); // 0.12 console.log(makeNegative(0.00001)); // -0.00001 ``` - 用``Math.abs()``的解法 ```javascript= function makeNegative(num) { return num > 0 ? -Math.abs(num) : Math.abs(num); }; console.log(makeNegative(3)); // 3 console.log(makeNegative('-42')); // -42 console.log(typeof makeNegative('-42')); // number console.log(makeNegative(0)); // 0 console.log(makeNegative(0.12)); // 0.12 console.log(makeNegative(0.00001)); // -0.00001 ``` 延伸閱讀 - [Math.abs()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/abs) <br> --- #### 7.數羊 把陣列裡正確(true)的羊群計算出來。 ``const sheep = [ true, true, true, false, true, true, true, true, true, false, true, false, true, false, false, true, true, true, true, true, false, false, true, true, ];`` - 利用for迴圈把陣列的值一一比對去計算。 ```javascript= function countSheeps(arrayOfSheep) { let sheepNum = 0; for(let i = 0; i < sheep.length; i++) { if(arrayOfSheep[i] === true) { sheepNum ++; } else { sheepNum += 0; } } return sheepNum; }; console.log(countSheeps(sheep)); ``` - 用``filter``的解法 ```javascript= function countSheeps(arrayOfSheeps) { return arrayOfSheeps.filter(Boolean).length; }; console.log(countSheeps(sheep)); ``` <br> #### 8.建立兩個函式表達式``min``、``max``。代入==數字組成的陣列==,分別回傳該陣列裡數字的最大值、最小值。 ![](https://i.imgur.com/Y8wV6VD.png) - 函式表達式,將函式賦予等號左邊的變數。 - 用forEach把陣列裡的資料一一取出比對``最小值``、``最大值`` ```javascript= var min = function(list){ let minimum = 0 list.forEach((item) => { item < minimum ? minimum = item : ``; }) return minimum; }; var max = function(list){ let maximum = 0; list.forEach(item => { item > maximum ? maximum = item : ``; }); return maximum; }; min([4,6,2,1,9,63,-134,566]); // -134 max([4,6,2,1,9,63,-134,566]); // 566 ``` #### 9.將函式代入十進制數字,轉成2進制後回傳。 ![](https://i.imgur.com/VKZgfhB.png) :::warning num.toString(2)轉換出來是二進制數字是string型別, 在二進制數字字串前面加上**+**,會轉型成number型別。 ::: ```javascript= function toBinary(num){ return +num.toString(2); }; toBinary(8); // 1000 toBinary(24); // 11000 ``` #### 10.紅綠燈燈號變換 - 建立一個函式來處理紅綠燈燈號變換,從綠色到黃色、到紅色、再到綠色的每次變化。 - 當函式代入綠燈,回傳黃燈 - 當函式代入黃燈,回傳紅燈 - 當函式代入紅燈,回傳綠燈 ##### forEach解法,判斷邏輯(第5行開始) - 條件一:forEach把``lights``陣列值一一取出時,與函式代入燈號比對 - 條件二:目前``lights``陣列index值小於(<)``lights``陣列index最大值(```lights.length -1```) - ==兩個條件都達成==,燈號順序``lightOrder``就是傳入燈號的下一個(``lights[lightOrder + 1]``) - ==條件二沒達成==,燈號順序``lightOrder``就是傳入紅燈的下一個綠燈(``lights[lightOrder += 0]``) ```javascript= function updateLight(current) { let lights = ['green', 'yellow', 'red']; let lightOrder = 0; lights.forEach((item, index) => { item === current && index < lights.length -1 ? lightOrder = index + 1 : lightOrder += 0; }) return lights[lightOrder]; } console.log(updateLight('green')); console.log(updateLight('yellow')); console.log(updateLight('red')); ``` - 雙重的三元運算子解法 ```javascript= function updateLight(current) { return current === 'yellow' ? 'red' : current === 'green' ? 'yellow' : 'green'; } ``` - switch()的解法 ```javascript= function updateLight(current) { switch (current) { case 'green': return 'yellow'; break; case 'yellow': return 'red'; break; case 'red': return 'green'; break; default: throw 'Error: wrong input'; break; } } ``` <br> #### 11.Remove String Spaces - 移除字串中的空格 - 用``split('')``和``forEach``的解法 ```javascript= function noSpace(x){ let newString = ''; x.split('').forEach(item => item === ' ' ? newString += '' : newString += item); return newString; }; console.log(noSpace('as sss s w w e ff')); ``` - 用``split('')``和``filter()``、``join('')``的解法 ```javascript= function noSpace(x){ return x.split('').filter(item => item !== ' ').join(''); }; console.log(noSpace('as sss s w w e ff')); ``` - 用``split('')``和``join('')``的解法 ```javascript= function noSpace(x){ return x.split(' '),join(''); }; console.log(noSpace('as sss s w w e ff')); ``` <br> #### 12.String cleaning - 將字串代入函式,把字串中的數字去除,需要保留特殊字圖 ```~#$%^&!@*():;"'.,?``` 以及完整的空格 ![](https://i.imgur.com/Uokw2Ew.png) - **用``.split()``、``.filter()``、``.join()``的解法** - 將字串拆成陣列後,用``.filter()``去篩選。 - 篩選條件為=> 將字串陣列一一取出,乘上``+``號。 - 原先文字字串乘上``+``號,變成NaN(篩選判斷條件false)。數字字串乘上+號,變成純數字(篩選判斷條件true)。 - ``!+value``為``+value``反向結果,因此``.filter()``只篩選陣列裡的NaN。 ```javascript= function stringClean(str){ return str.split('').filter(value => !+value ).join(''); }; console.log(stringClean('! !')); console.log(stringClean('123456789')); console.log(stringClean('This looks5 grea8t!')); ``` - **用正則表達式的解法** - 最外層一定包含// - \d:任何數字字元,等於``[0-9]`` - \D:任何非數字字元,等於``[^0-9]`` - \w:任何數字字元字母底線,等於``[A-Za-z0-9_]`` - \W:任何非數字字元字母底線,等於``[^A-Za-z0-9_]`` ```javascript= function stringClean(str){ //.replace(),用正則表達式選取,代入字串裡的字元,再用空字串取代 return str.replace(/\d/g, ''); }; console.log(stringClean('! !')); console.log(stringClean('123456789')); console.log(stringClean('This looks5 grea8t!')); ``` #### 延伸閱讀 - [String replace()](https://www.fooish.com/javascript/string/replace.html) - [Javascript Regular Expressions , 表示法](https://www.puritys.me/docs-blog/article-30-Javascript-Regular-Expressions-,-表示法.html) - [正規表達式 Regular Expression](https://ithelp.ithome.com.tw/articles/10205643) <br> #### 13.Stringy Strings - 寫一個 function 會帶入 size 的參數,表示是幾位數,並將位數替換成 1 及 0 ,從 1 開始。 ![](https://i.imgur.com/ksOm6T7.png) - 參數size代入迴圈計算內,i取2的餘數,每次迴圈累加到變數``result`` ```javascript= function stringy(size) { let result = ''; for (let i = 1; i <= size; i++) { result += i % 2; } return result; }; console.log(stringy(4)); ``` #### 另解 - ``Array(size)``:建立size個長度的陣列。 - ``Array(4)``的``.length``等於4。陣列內容[``empty``, ``empty``, ``empty``, ``empty``]。 - ``.keys()``:會回傳一個包含陣列中的每一個索引之鍵(keys)的新 Array Iterator 物件。 - ``[...Array(size).keys()]``:把size個長度的陣列key值,解構賦值到新陣列上。 - ``.map()``再把值取出,跟2取餘數後回傳,``.join()``再重組成字串。 ```javascript= function stringy(size) { return [...Array(size).keys()].map(item => item % 2 == 0 ? 1 : 0).join('') } ``` #### 延伸閱讀 - [Array.prototype.keys()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/keys) - [JavaScript 陣列(Array)的方法](https://ithelp.ithome.com.tw/articles/10219019) <br> #### 14.The Feast of Many Beasts - 建立function代入兩個字串,檢查兩個字串的第一個、和最後一個字元是否相同,相同回傳``true``,不同回傳``false`` - 分別比對兩個字串的第一個字元、第二個字元是否相同 ```javascript= function feast(beast, dish) { return beast[0] === dish[0] && beast[beast.length -1 ] === dish[dish.length - 1]; }; console.log(feast('chickadee', 'chocolate cake')); ```