Zenn
📚

2024 Training JS 系列 /w Codewars

2024/11/08に公開
JavaScript
codewars
2024
tech

JavaScript
Codewars

はじめに

https://github.com/myjinxin2015/Katas-list-of-Training-JS-series/blob/master/
這是 codewars 上的 Code Katas 學習 JavaScript 系列，總共有 42 題。
可以藉由這些 kata 學習基礎的 JS 語法。
codewars

Training JS #1: create your first JS function and print "Hello World!"

Training JS #1 | #8kyu

Training JS #1 - function 練習

Description：
創造你的第一個 JS 函數，並且印出 'Hello World!'

我的解法

function helloWorld(){
  let str = 'Hello World!';
  console.log (str);
}

反饋與思考

最優解

同上

Training JS #2: Basic data types--Number

Training JS #2 | #8kyu

Training JS #2 - 數字型別

Description：
這裡宣告了一些數值，請將數值代入函式使運算式取得 100

我的解法

var v1=50;v2=100,v3=150,v4=200,v5=2,v6=250
function equal1(){
  var a=v1;  
  var b=v1;  
  return a+b;
}
//Please refer to the example above to complete the following functions
function equal2(){
  var a=v3;
  var b=v1;
  return a-b;
}
function equal3(){
  var a=v1;
  var b=v5;
  return a*b;
}
function equal4(){
  var a=v4;
  var b=v5;
  return a/b;
}
function equal5(){
  var a=v6;
  var b=v3;
  return a%b;
}

反饋與思考

  • 取餘數好難……

最優解

同上

Training JS #3: Basic data types--String

Training JS #3 | #8kyu

Training JS #3 - 字串型別

Description：
請練習組成題目要的字串，注意有大小寫

我的解法

var a1="A",a2="a",b1="B",b2="b",c1="C",c2="c",d1="D",d2="d",e1="E",e2="e",n1="N",n2="n"
function Dad(){
  //select some variable to combine "Dad"
  return d1+a2+d2;
}
function Bee(){
  //select some variable to combine "Bee"
  return b1+e2+e2;
}
function banana(){
  //select some variable to combine "banana"
  return b2+a2+n2+a2+n2+a2;
}

反饋與思考

  • 送出之後還有金斧頭銀斧頭的故事，好有趣

最優解

同上

Training JS #4: Basic data types--Array

Training JS #4 | #8kyu

Training JS #4 - 陣列

Description：
學習使用陣列 method

我的解法

function getLength(arr){
  //return length of arr
  return arr.length;
}
function getFirst(arr){
  //return the first element of arr
  return arr[0];
}
function getLast(arr){
  //return the last element of arr
  return arr[arr.length -1];
}
function pushElement(arr){
  let el=4;
  arr.push('el');
  return arr;
}
function popElement(arr){
  //pop an element from arr
  arr.pop()
  return arr;
}

反饋與思考

  • 這麼快就開始陣列了嗎w
  • 觀念不好… 寫成了 return arr.push('el')

最優解

同上

Training JS #5: Basic data types--Object

Training JS #5 | #8kyu

Training JS #5 - 物件

Description：
學習物件的取值與結構

我的解法

function animal(obj){
return `This ${obj.color} ${obj.name} has ${obj.legs} legs.`;
}

反饋與思考

  • 有點看不懂題目在寫啥ww

最優解

同上

Training JS #6: Basic data types--Boolean and conditional statements

Training JS #6 | #8kyu

Training JS #6 - if else 條件式

Description：
學習 if、else if ...等條件式

我的解法

function trueOrFalse(val){
return val ? true : false;             
}

反饋與思考

  • 有點看不懂題目在寫啥ww <= 這不是重覆，是真的很難懂qq

最優解

同上

Training JS #7: if..else and ternary operator

Training JS #7 | #8kyu

Training JS #7 - if else 與三元運算

Description：
學習三元運算

我的解法

function saleHotdogs(n){
return n < 5 ? n * 100 : n >= 10 ? n * 90 : n * 95 ;
}

反饋與思考

  • 通常三元都寫 a or b ，很少寫到三個條件的，練習了一下。

最優解

同上

Training JS #8: Conditional statement--switch

Training JS #8: Conditional statement--switch | #8kyu

Training JS #8: Conditional statement--switch - Switch 語法練習

Description：
在 JavaScript 中，可以使用 switch 取代多個 if

我的解法

Tip: 可以使用 default 減少工作量

function howManydays(month){
  let days;
  switch (month){
    case 2:
      days = 28;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      days = 30;
      break;
    default:
      days = 31;
  }
   return days;
}

反饋與思考

  • 一開始寫成了下面的方式，宣告了 days 應該要在完成判斷後(case)賦予 days 值。所以原本寫的方式會造成 undefined 
case 2:
  console.log(28);
  break;
  • 以為 case 只能一次用一個，後來才發現原來可以一次好幾個 case
    like:
case 4:
case 6:
case 9:
case 11:
  days = 30;
break;

最優解

同上

Training JS #9: loop statement --while and do..while

Training JS #9 | #8kyu

Training JS #9 - while 迴圈練習

Description：
學習 while 和 do..while

我的解法

function padIt(str,n){
  while (n > 0){
    if (n % 2 === 1){
      str = '*' + str;
    }else{
      str = str + '*';
    }
    n--;
  }
  return str;
}

反饋與思考

  • 沒學過 while 感覺跟 for 有點像，查詢了一下是說 while 適合用在不知道確切的循環次數的情境。

最優解

同上

Training JS #10: loop statement --for

Training JS #10 | #8kyu

Training JS #10 - for 迴圈練習

Description：
學習 for

我的解法

function pickIt(arr){
  var odd=[],even=[];
  for(let i = 0; i < arr.length ; i++ ){
    if (arr[i] % 2 === 0){
      even.push(arr[i]);
    }else{
      odd.push(arr[i]);
    }
  }
  return [odd,even];
}

反饋與思考

  • for 來了~ 這個比較熟啦w

最優解

同上

Training JS #11: loop statement --break,continue

Training JS #11 | #8kyu

Training JS #11 - break, continue 迴圈練習

Description：
迭代 dolls 陣列來抓取 'Hello Kitty' 和 'Barbie doll'添加到 bag 陣列中，並且最多只能抓取 3 個。

我的解法

function grabDoll(dolls){
  var bag=[];
  for (let i = 0 ; i < dolls.length ;i++){
    if(dolls[i] === 'Hello Kitty' || dolls[i] === 'Barbie doll'){
      bag.push(dolls[i]);
      if(bag.length === 3){
        break;
      }
    }
  }
  return bag;
}

反饋與思考

  • 先試著自己寫一次，然後交由 GPT 來檢查。
  • for 迴圈中 i >= 3 正確應該是 i < dolls.length ，因為偷看到測試，所以先入為主的設了 3 ，並且應該是要小於才會跑迴圈。
  • dolls === 'Hello Kitty' 應該是 dolls[i] === 'Hello Kitty'，因為需要的是陣列裡面的元素。而不是 dolls 本身
  • 錯誤的賦值：if(bag.length = 3) ，這是是想要檢查 bag 陣列的長度而不是賦值。可惡，這個每次都會忘記。

最優解

同上

https://github.com/myjinxin2015/Katas-list-of-Training-JS-series/blob/master/
這是 codewars 上的 Code Katas 學習 JavaScript 系列，總共有 42 題。
可以藉由這些 kata 學習基礎的 JS 語法。
codewars

Training JS #1: create your first JS function and print "Hello World!"

Training JS #1 | #8kyu

Training JS #1 - function 練習

Description：
創造你的第一個 JS 函數，並且印出 'Hello World!'

我的解法

function helloWorld(){
  let str = 'Hello World!';
  console.log (str);
}

反饋與思考

最優解

同上

Training JS #2: Basic data types--Number

Training JS #2 | #8kyu

Training JS #2 - 數字型別

Description：
這裡宣告了一些數值，請將數值代入函式使運算式取得 100

我的解法

var v1=50;v2=100,v3=150,v4=200,v5=2,v6=250
function equal1(){
  var a=v1;  
  var b=v1;  
  return a+b;
}
//Please refer to the example above to complete the following functions
function equal2(){
  var a=v3;
  var b=v1;
  return a-b;
}
function equal3(){
  var a=v1;
  var b=v5;
  return a*b;
}
function equal4(){
  var a=v4;
  var b=v5;
  return a/b;
}
function equal5(){
  var a=v6;
  var b=v3;
  return a%b;
}

反饋與思考

  • 取餘數好難……

最優解

同上

Training JS #3: Basic data types--String

Training JS #3 | #8kyu

Training JS #3 - 字串型別

Description：
請練習組成題目要的字串，注意有大小寫

我的解法

var a1="A",a2="a",b1="B",b2="b",c1="C",c2="c",d1="D",d2="d",e1="E",e2="e",n1="N",n2="n"
function Dad(){
  //select some variable to combine "Dad"
  return d1+a2+d2;
}
function Bee(){
  //select some variable to combine "Bee"
  return b1+e2+e2;
}
function banana(){
  //select some variable to combine "banana"
  return b2+a2+n2+a2+n2+a2;
}

反饋與思考

  • 送出之後還有金斧頭銀斧頭的故事，好有趣

最優解

同上

Training JS #4: Basic data types--Array

Training JS #4 | #8kyu

Training JS #4 - 陣列

Description：
學習使用陣列 method

我的解法

function getLength(arr){
  //return length of arr
  return arr.length;
}
function getFirst(arr){
  //return the first element of arr
  return arr[0];
}
function getLast(arr){
  //return the last element of arr
  return arr[arr.length -1];
}
function pushElement(arr){
  let el=4;
  arr.push('el');
  return arr;
}
function popElement(arr){
  //pop an element from arr
  arr.pop()
  return arr;
}

反饋與思考

  • 這麼快就開始陣列了嗎w
  • 觀念不好… 寫成了 return arr.push('el')

最優解

同上

Training JS #5: Basic data types--Object

Training JS #5 | #8kyu

Training JS #5 - 物件

Description：
學習物件的取值與結構

我的解法

function animal(obj){
return `This ${obj.color} ${obj.name} has ${obj.legs} legs.`;
}

反饋與思考

  • 有點看不懂題目在寫啥ww

最優解

同上

Training JS #6: Basic data types--Boolean and conditional statements

Training JS #6 | #8kyu

Training JS #6 - if else 條件式

Description：
學習 if、else if ...等條件式

我的解法

function trueOrFalse(val){
return val ? true : false;             
}

反饋與思考

  • 有點看不懂題目在寫啥ww <= 這不是重覆，是真的很難懂qq

最優解

同上

Training JS #7: if..else and ternary operator

Training JS #7 | #8kyu

Training JS #7 - if else 與三元運算

Description：
學習三元運算

我的解法

function saleHotdogs(n){
return n < 5 ? n * 100 : n >= 10 ? n * 90 : n * 95 ;
}

反饋與思考

  • 通常三元都寫 a or b ，很少寫到三個條件的，練習了一下。

最優解

同上

Training JS #8: Conditional statement--switch

Training JS #8: Conditional statement--switch | #8kyu

Training JS #8: Conditional statement--switch - Switch 語法練習

Description：
在 JavaScript 中，可以使用 switch 取代多個 if

我的解法

Tip: 可以使用 default 減少工作量

function howManydays(month){
  let days;
  switch (month){
    case 2:
      days = 28;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      days = 30;
      break;
    default:
      days = 31;
  }
   return days;
}

反饋與思考

  • 一開始寫成了下面的方式，宣告了 days 應該要在完成判斷後(case)賦予 days 值。所以原本寫的方式會造成 undefined 
case 2:
  console.log(28);
  break;
  • 以為 case 只能一次用一個，後來才發現原來可以一次好幾個 case
    like:
case 4:
case 6:
case 9:
case 11:
  days = 30;
break;

最優解

同上

Training JS #9: loop statement --while and do..while

Training JS #9 | #8kyu

Training JS #9 - while 迴圈練習

Description：
學習 while 和 do..while

我的解法

function padIt(str,n){
  while (n > 0){
    if (n % 2 === 1){
      str = '*' + str;
    }else{
      str = str + '*';
    }
    n--;
  }
  return str;
}

反饋與思考

  • 沒學過 while 感覺跟 for 有點像，查詢了一下是說 while 適合用在不知道確切的循環次數的情境。

最優解

同上

Training JS #10: loop statement --for

Training JS #10 | #8kyu

Training JS #10 - for 迴圈練習

Description：
學習 for

我的解法

function pickIt(arr){
  var odd=[],even=[];
  for(let i = 0; i < arr.length ; i++ ){
    if (arr[i] % 2 === 0){
      even.push(arr[i]);
    }else{
      odd.push(arr[i]);
    }
  }
  return [odd,even];
}

反饋與思考

  • for 來了~ 這個比較熟啦w

最優解

同上

Training JS #11: loop statement --break,continue

Training JS #11 | #8kyu

Training JS #11 - break, continue 迴圈練習

Description：
迭代 dolls 陣列來抓取 'Hello Kitty' 和 'Barbie doll'添加到 bag 陣列中，並且最多只能抓取 3 個。

我的解法

function grabDoll(dolls){
  var bag=[];
  for (let i = 0 ; i < dolls.length ;i++){
    if(dolls[i] === 'Hello Kitty' || dolls[i] === 'Barbie doll'){
      bag.push(dolls[i]);
      if(bag.length === 3){
        break;
      }
    }
  }
  return bag;
}

反饋與思考

  • 先試著自己寫一次，然後交由 GPT 來檢查。
  • for 迴圈中 i >= 3 正確應該是 i < dolls.length ，因為偷看到測試，所以先入為主的設了 3 ，並且應該是要小於才會跑迴圈。
  • dolls === 'Hello Kitty' 應該是 dolls[i] === 'Hello Kitty'，因為需要的是陣列裡面的元素。而不是 dolls 本身
  • 錯誤的賦值：if(bag.length = 3) ，這是是想要檢查 bag 陣列的長度而不是賦值。可惡，這個每次都會忘記。

最優解

同上

Training JS #12: loop statement --for..in and for..of

Training JS #12 | #8kyu

Training JS #12 - 物件取屬性與取值的方法

Description：
有一個 obj 的物件，請使用 for...in 檢查 key 和 value 如果等於 5 請回傳至陣列中，最後印出你的陣列。

我的解法

  • 建立一個array
  • 取出key && value
  • 檢查.length = 5
  • push回array
function giveMeFive(obj){
let equalFive = [];
for(let key in obj){
  if(key.length === 5){
      equalFive.push(key);
    }
  if(obj[key].length === 5){
    equalFive.push(obj[key]);
  }
  }
  return equalFive;
}

反饋與思考

  • 學到了物件取 key 及 value 的方法
  • 這裡剛好練習到了本週主線任務的重點：動態取值的觀念

最優解

同上

Training JS #13: Number object and its properties

Training JS #13 | #8kyu

Training JS #13 - 數字常數

Description：
有一個 n 參數，請判斷此數字並依條件(5種數字常數)回傳，如果都不是就直接回傳 n 的值。

我的解法

function whatNumberIsIt(n){
  if (isNaN(n)){
    return "Input number is Number.NaN";
  }
  if (n === Number.MAX_VALUE){
    return "Input number is Number.MAX_VALUE";
  }
  if (n === Number.MIN_VALUE){
    return "Input number is Number.MIN_VALUE";
  }
  if (n === Number.NEGATIVE_INFINITY){
    return "Input number is Number.NEGATIVE_INFINITY";
  }
  if (n === Number.POSITIVE_INFINITY){
    return "Input number is Number.POSITIVE_INFINITY";
  }
  return `Input number is ${n}`
}

反饋與思考

  • 完全不知道常數是啥…

最優解

同上

Training JS #14: Methods of Number object--toString() and toLocaleString()

Training JS #14 | #8kyu

Training JS #14 - Number 物件的方法 toString() 和 toLocaleString()

Description：
將 RGB 轉換為十六進位色票代碼後回傳

我的解法

function colorOf(r,g,b){
  r = r.toString(16).padStart(2,'0');
  g = g.toString(16).padStart(2,'0');
  b = b.toString(16).padStart(2,'0');
  
  return '#' + r + g + b;
  
}

反饋與思考

  • 原本是只寫了 r = r.toString(16); 但 (1,2,3) 會變成 #123、#006f00 會變 6f，詢問了 GPT 是說如果數字小於 16 (例 10 變成 a ) 會不符合 16進位的兩位數形式，所以多學了一個 .padStart(2,'0') 來補零。

最優解

同上

Training JS #15: Methods of Number object--toFixed(), toExponential() and toPrecision()

Training JS #15 | #8kyu

Training JS #15 - Number 物件的方法 toFixed() 、toExponential() 和 toPrecision()

Description：
先將陣列的元素使用 toFixed() 取得小數下兩位
接著與 n 的數值相比較，回傳統計小於 n 的總數

我的解法

function howManySmaller(arr,n){
  let newArr = arr.map(item => Number(item.toFixed(2)));
  let total = newArr.filter(item => item < n ).length;
  return total;
}

反饋與思考

  • 本來想說會不會有一句的寫法ww 有夠懶，結果就學到了 一元運算子
  • 之前作業的時候用過 toFixed() 這個 Mathod ，有點印象但不記得用來做什麼的，刷題就是不停的練習基礎語法呀~

最優解

  • 這裡用了 一元運算子 (Unary Plus Operator)
  • 將陣列中的值取小數下兩位(四捨五入) .toFixed(2) (這裡返回的是字串，不是數字)
  • 所以將字串使用 + 轉換回數字
  • 進行判斷並回傳值小於 n 的總數
function howManySmaller(arr,n){
  return arr.filter(x => +x.toFixed(2) < n).length;
}

Training JS #16: Methods of String object--slice(), substring() and substr()

Training JS #16 | #8kyu

Training JS #16 - 字串物件的方法：slice()、substring() 和 substr()

Description：
遍歷陣列取得最短的字串，並且將全部字串截取至最短字串的長度。

我的解法

  • 因為要回傳新陣列，所以用 .map()
  • 取得每個字串長度 .length
  • 找到最小長度 minLength = Math.min()
  • 剪切字串長度 .substr (0,minLength) 
function cutIt(arr){
  let minLength = Math.min(...arr.map(item => item.length));
  let newArray = arr.map(item => item.substr(0, minLength));
  return newArray;
}

反饋與思考

  • GPT 說我的思路的對的，但寫到 arr.map(item => item.length) 要取得最小值就卡住了
  • 這裡使用了 展開運算子 來取得陣列中最小的長度，之前看過 展開運算子 但總是看不懂用法，這裡詳細的了解並且筆記了，之後有機會可以練習使用看看。

最優解

同上

Training JS #17: Methods of String object--indexOf(), lastIndexOf() and search()

Training JS #17 | #8kyu

Training JS #17 - 字串物件的方法：indexOf()、lastIndexOf() 和 search()

Description：
計算並回傳參數 c 第一次出現和最後一次出現之間位置的距離，如果只有一個 c 就回傳 0 ，如果沒有 c 就回傳 -1

我的解法

  • 先計算第一個位置 .indexOf()
  • 再計算最後一個位置 .lastIndexOf()
  • 如果 indexOf() === -1 回傳 -1
  • 兩個相減並回傳值
function firstToLast(str,c){
  let firstIndex = str.indexOf(c);
  let lastIndex = str.lastIndexOf(c);
  
  if(firstIndex === -1 ){
    return -1;
  }
  return lastIndex - firstIndex ;
}

反饋與思考

  • 其實我看不懂題目，直接問 GPT 後才看懂題目的要求…所以只知道求 -1 的方法www

最優解

同上

Training JS #18: Methods of String object--concat() split() and its good friend join()

Training JS #18 | #8kyu

Training JS #18 - 字串物件的方法：concat()、split() 和 join()

Description：
你有一個字串參數 string 跟一個符號參數 separator ，將字串中的單字用符號分格，並且回傳成字串型式

我的解法

  • 先將字串依單字轉成陣列 .split(" ")
  • 跑陣列遍歷每個單字，依題目要求的符號分隔 .split("").join(separator)
  • 最後再把他依單字組合回字串回傳 .join(" ")
      let words = string.split(" ");
  let mergeWords = words.map((words) => words.split("").join(separator));
  return mergeWords.join(" ");

反饋與思考

  • 想太簡單了XD? 一開始我直接 return string.split("").join(separator) 但是會變成單字中間多一個空格，然後就自己卡住了。
    腦子轉不過來真的就會寫不出來，一日不寫 code 如隔三秋呀~怎麼會忘記那個是陣列要跑遍歷咧www

最優解

同上

Training JS #19: Methods of String object--toUpperCase() toLowerCase() and replace()

Training JS #19 | #8kyu

Training JS #19 - 字串物件的方法：toUpperCase()、toLowerCase() 和 replace()

Description：
你需要將人類文字轉譯成外星文字，規則是除了最後一個字符，其他的都是大寫

我的解法

  • 將字串依單字拆成陣列 .splice(" ")
  • 跑 map 將除了最後一個字外以的字元都變大寫.toUpperCase()+最後一個字元小寫 .toLowerCase()
  • 組回字串 .join(" ")
      let words = str.split(' ');
  let newArr = words.map(words => {
  return words.slice(0,-1).toUpperCase()+words[words.length -1].toLowerCase()
  });
  return newArr.join(' ');

反饋與思考

  • 我一開始是寫全部轉成大寫+最後一個字元小寫，這樣會變成重覆了最後一個字元；應該要改成取代最後一個字元變小寫
  • 我看很多解法是使用正則表達來改(如下)

最優解

function alienLanguage(str){
  return str.replace(/\w+/g, w => w.slice(0,-1).toUpperCase() + w.slice(-1).toLowerCase());
}

Training JS #20: Methods of String object--charAt() charCodeAt() and fromCharCode()

Training JS #20 | #7kyu

Training JS #20 - 字串物件的方法：charAt()、charCodeAt() 和 fromCharCode()

Description：
暫時放棄這題

我的解法

反饋與思考

  • 遇到這種問題我都無解

最優解

最後に

Discussion