2020-04-22

六角鼠年全馬挑戰賽

8 分鐘閱讀文 (大約 1175 個字)

運用JS中的函式方法做一些小挑戰！

雖然學習JS也一段時間了，但有時寫起來就是會卡卡不順，所以在udemy上買了一堂The Modern Javascript Bootcamp Course，這份課程看起來兼具觀念與實作，看起來很符合我的需要。

講師在其中一堂講函式的課中提供了一些小挑戰，都是運用陣列的常見方法來解，那就來做做看吧！

小挑戰01: isValidPassword函式

寫一個isValidPassword函式, 參數為password和username
password必須符合

不得包含username
不得包含空白
不得小於8個字元

若有以上情形,　則回傳false
若都沒有, 則回傳true


function isValidPassword(password, username){
    let passStr = password.toString();
    let userStr = username.toString();
                    //表達式: 會回傳值(true/false)
    const tooShort = passStr.length <8;
                    //使用string.includes()檢查, 會回傳true/false
    const hasSpace = passStr.includes(' ');
    const hasUser = passStr.includes(userStr);
    console.log('tooShort?'+tooShort, 'Space?' + hasSpace, 'User?' + hasUser);
    //若是以下任一值為true, 則回傳false(沒有通過密碼條件)
    if(tooShort || hasSpace ||hasUser){
        return false;
    }
    return true; 
}

檢查字串中是否包含某字串 –字串方法: indexOf & includes

a. string.indexOf() –會回傳數值


'HELLO WORLD'.indexOf('E'); *// 1 在第一個位置發現E*
'EEEEE'.indexOf('E'); //0 會回傳第一個找到該數值的位置
'Hello there!'.indexOf(' '); //5  也可查找空白值

b.string.includes() – //回傳布林 true/false

1 2	'Hello World'.includes('H') //true 'Hello there!'.includes(' ');//true 也可查找空白值

小挑戰02: 平均數函式

用一個函式來計算參數們的平均數，傳入的數字不限


//因為不知道會傳入多少數字, 所以使用...arg, 此時傳入的所有參數都將成為一個陣列
function findAverage(...arg){
    let nums = arg;
    //用reduce累加
    let sum = nums.reduce((a,b)=>a+b);
    let length = nums.length;
    let result = sum/length;
    console.log(arg);
    return result;   
}

array.reduce() – 累加的好工具

還沒搞清楚
[0, 1, 2, 3, 4].reduce(
function (
accumulator累加器,
currentValue目前數字(由左至右遍歷),
currentIndex(可省)目前數值的索引值,
array(可省)陣列
) {
return accumulator + currentValue;
},
initialValue初始值);

(mdn的表格)

使用reduce時會有兩種狀況:

狀況一：若沒有特別定義初始值,　此時陣列的第一個數會成為第一個accumulator, 第一個數和第二個數相加後的值為第二個accumulator, 與第三個數相加, 此時得出的值又成為下一個accumulator, 直到最後一個數字加完為止。

狀況二：有定義Initial value

1	[1,2,3].reduce((a,b)=>a+b累加函式, 10初始值) //16

此時初始值(10)會成為第一個accumulator, 第一個數和第二個數相加後的值為第二個accumulator, 與第三個數相加, 此時得出的值又成為下一個accumulator, 直到最後一個數字加完為止。

小挑戰03: 全字母句子(pangram)

輸入一個句子作為參數, 檢測這個句子中是否包含英文的全部字母。每個字母必須使用至少一次。

一開始想說使用set來篩選不重複元素，set的特性就是不會收錄重複的元素

//作法一
function isPangram(string){
//把所有字母轉成小寫，再將字串每個字分割並形成一個陣列，不包含空白
let str = string.toString().toLowerCase().split('');
for(let i=0; i<str.length; i++){
    if(str[i]===' '){
    str.splice(i,1);
    }
}
let set = new Set();
//這個字母沒出現在set中嗎？true(沒有),收入set：false(已出現)回傳false並跳出
let result = str.filter(item => !set.has(item)? set.add(item):false)
//英文字母有26個，若是每個都不重複地被收錄到的話，set的長度應該為26
return set.size === 26;
}

這時發現一個致命缺點：英文以外的文字也會被算進去!!!!!

function isPangram(string){
    const alphabet = 'abcdefghijklmnopqrstuvwxyz';
    let str = string.toString().toLowerCase();
    let included = [];
    //遍歷陣列中所有元素
    for(letter of alphabet){
        if(str.includes(letter)){
            included.push(letter);
        }
    };
    return included.length === 26;

} //正宗解法.....

小挑戰04: 抽牌

用一個函式來隨機產生一張牌, 牌上有值(‘1’,’2’,’3’,’4’,’5’,’6’,’7’,’8’,’9’,’10’,’J’,’Q’,’K’,’A’，和花色’clubs’, ‘hearts’,’diamond’, ‘spade’，最後回傳物件 {value:1, suits:’clubs’}


//因為花色和數字都要抽隨機, 所以用另一支函式管理
//回傳該陣列中的索引值
function getRandom(arr){             //記得不要+1, 不然永遠抽不到第一個!
    let num = Math.floor(Math.random()*arr.length);
    return arr[num]
}

function getCard(){
    let values = ['1','2','3','4','5','6','7','8','9','10','J','Q','K','A'];
    let suits = ['clubs', 'hearts','diamond', 'spade'];
                
    return {values: getRandom(values),suits: getRandom(suits)}
}

心得

本來想說使用js也一段時間了，這份課程又是面向初心者開的，我一定能輕輕鬆鬆解決，沒想到每個小挑戰也花了我不少時間，有時就只差一個我不知道的陣列方法或字串方法就能解題，看來我對js的熟悉程度還是得加強才行！
要是你對這些小挑戰有興趣，也可以自己試試看喔！ :)

# JavaScript, 六角鼠年全馬挑戰賽, 函式