📚

2024 Training JS 系列 /w Codewars

2024/11/08に公開

JavaScript

codewars

2024

tech

はじめに

這是 codewars 上的 Code Katas 學習 JavaScript 系列，總共有 42 題。
可以藉由這些 kata 學習基礎的 JS 語法。

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 陣列的長度而不是賦值。可惡，這個每次都會忘記。

 最優解同上