請啟用 Javascript 查看內容

JS 學徒特訓班 - JS 變數 1 ~ 10 關

 ·  ☕ 16 分鐘

竹白的 JS 學徒特訓班筆記 - 目錄

記錄六角學院所開的 JS 學徒特訓班，為期 60天的特訓。

Featured Image

第一關：環境與變數環境

題目連結

1. 題目

第 1 題：

1
2
3
4
5
6

// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
var a;
a = 1;
a = 'hello';
console.log(a);

第 2 題：

1
2
3
4
5
6
7

// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
var b = 3;
var c = 4;
console.log(d);
var d = b + c;
console.log(d);

第 3 題：

1
2
3
4
5
6
7
8

// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
console.log(e);
var e;
e = 5;
e = 'hello';
e = true;
console.log(e);

1. 參考解答

第 1 題：

  1. "hello"
  2. 1個變數、2個型別、3個記憶體物件
1
2
3
4

var a ;         // 已經有記憶體空間，但沒有值
a = 1;          // 數值
a = 'hello';    // 字串
console.log(a); // "hello"

第 2 題：

  1. undefined、7
  2. 3個變數、1個型別、6個記憶體物件
1
2
3
4
5
6
7
8

var b;          // 已經有記憶體空間，但沒有值
var c;          // 已經有記憶體空間，但沒有值
var d;          // 已經有記憶體空間，但沒有值  
console.log(d); // undefined
b = 3;          // 數值
c = 4;          // 數值
d = b + c;      // 數值
console.log(d); // 7

第 3 題：

  1. undefined、true
  2. 1個變數、3個型別、4個記憶體物件
1
2
3
4
5
6

var e;          // 已經有記憶體空間，但沒有值
console.log(e); // undefined
e = 5;          // 數值
e = 'hello';    // 字串
e = true;       // 布林值
console.log(e); // true

教學、延伸知識連結

第二關：變數命名

題目連結

2. 題目

請依照以下房型資訊，去定義各個變數名稱，變數務必要命名比較語意化且好懂。

3. 參考解答

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const singleRoom = {
  peopleLimit: 1,
  bedSize: '單人床',
  bathroomNum: 1,
  roomSize: 18,
  feetSize: '平方公尺',
  description: 'Single Room is only...',
  checkInTimeFrom: '15:00',
  checkInTimeTo: '21:00',
  checkOutTimeFrom: '10:00',
  checkOutTimeTo: '21:00',
  facilities: {
    wifi: true,
    landlinePhone: true,
    breakfast: true,
    airConditioning: true,
    minibar: false,
    refrigerator: true,
  },
}

教學、延伸知識連結

第三關：變數型別轉換

題目連結

3. 題目

請依序告知以下 console.log 會顯示什麼值。

第一題：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var a = 1;
console.log(typeof a);

var b = 'hello';
console.log(typeof b);

var c = 1 + 'hello';
console.log(typeof c);

var d = 1 + '11';
console.log(d);
console.log(typeof d);

第二題：

1
2
3
4
5
6
7

var a;
a = a + 'hello';
console.log(a);
console.log(typeof a);

var b = 3;
console.log(b * 'hello');

第三題：

1
2
3
4
5
6
7

var a = 9;
console.log(a + 9);
console.log(a + '9');

var b = '9';
console.log(b * b);
console.log(typeof (b * b));

3. 參考解答

第一題：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var a = 1;
console.log(typeof a); // 'number'

var b = 'hello';
console.log(typeof b); // 'string'

var c = 1 + 'hello';
console.log(typeof c); // 'string'

var d = 1 + '11';
console.log(d); // '111'  隱含的強制轉型
console.log(typeof d); // 'string'

使用 + 運算子，其中一邊為字串型別，會將另一邊強制轉型成字串。

依據 ES5.1 語言規格的 section 11.6.1：

  • 只要其中一邊為字串，就是字串相接：
    • 非字串的型別會強制轉型成字串。
  • 若雙方皆為非字串：
    • 基本型別的值會轉為數值，物件型別（物件、陣列、函式）會先進行 ToPrimitive 轉換；
    • 如果雙邊都沒有字串，就會進行數值運算。

第二題：

1
2
3
4
5
6
7

var a;
a = a + 'hello';
console.log(a); // 'undefinedhello'  隱含的強制轉型
console.log(typeof a); // 'string'

var b = 3;
console.log(b * 'hello'); // NaN  隱含的強制轉型

-、*、/ 運算子與 + 運算子不同，它們只能對數值進行運算使用，因此會將非數值的值轉成數值。

數值轉換過程是根據 ES5 的規格中 section 9.3 的 ToNumber：

  • undefined：NaN
  • null：+0 即 0
  • 布林值：
    • true：1
    • false：+0 即 0
  • 字串：數值或 NaN
  • 物件型別（物件、陣列、函式）
    • 會先進行 ToPrimitive 轉換，再執行 ToNumber

第三題：

1
2
3
4
5
6
7

var a = 9;
console.log(a + 9); // 18
console.log(a + '9'); // '99'  隱含的強制轉型

var b = '9';
console.log(b * b); // 81  隱含的強制轉型
console.log(typeof (b * b)); // 'number'

教學、延伸知識連結

第四關：比較運算子

題目連結

4. 題目

請依序告知以下 console.log 會顯示什麼值，若不知道答案，可將 code 貼在 chrome console 來顯示後，再回頭補知識點。

第一題：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var a = 2;
var b = 1;
console.log(a > 0);
console.log(a + b > 1);

var c = 4;
var d = 3;
console.log(c == d);

var e = 8;
var f = 5;
console.log(f >= e);
console.log(f != e);
console.log(f == e);

第二題 搭配型別自動轉型：

1
2
3
4
5
6
7
8
9

var a = 3;
var b = '3';
console.log(a == 1);
console.log(a == b);

var c = 2;
var d = '5';
// 請解釋為什麼
console.log(c * d >= 5);

第三題 嚴謹模式：

1
2
3
4
5
6

var a = 1;
var b = '1';
console.log(a == 1);
console.log(a == b);
console.log(a === b);
console.log(a !== b);

4. 參考解答

第一題：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var a = 2;
var b = 1;
console.log(a > 0); // true
console.log(a + b > 1); // true

var c = 4;
var d = 3;
console.log(c == d); // false

var e = 8;
var f = 5;
console.log(f >= e); // false
console.log(f != e); // true
console.log(f == e); // false

第二題：

1
2
3
4
5
6
7
8
9

var a = 3;
var b = '3';
console.log(a == 1); // false
console.log(a == b); // true

var c = 2;
var d = '5';
// 請解釋為什麼
console.log(c * d >= 5); // true

第四關有說明過了，* 運算子只能對數值進行運算使用，因此會將非數值的值強制轉成數值。

第三題：

1
2
3
4
5
6

var a = 1;
var b = '1';
console.log(a == 1); // true
console.log(a == b); // true
console.log(a === b); // false
console.log(a !== b); // true

教學、延伸知識連結

第五關：變數實作情境題

題目連結

劇情略。

5. 問題

第一題：顧客 Bob 向店員詢價

顧客 Bob：「請問我要買 4 個漢堡，30 份薯條，總共多少？」

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var bobTotal;

// Code 寫在這，運算內容賦予到 bobTotal，
// 並要利用到 hamburgerPrice、friesPrice
// 算出 Bob 的提問。

console.log('Bob 您好，您詢問的金額總計為' + bobTotal + '元');

第二題：錢包剩下多少錢

Mark 錢包裡有 200 元，買了一個漢堡，三個薯條，他還剩下多少錢？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var markWallet = 200;
var markTotal;

// Code 寫在這，運算內容賦予到 markTotal，
// 並要利用到 markWallet、hamburgerPrice、friesPrice
// 算出 Mark 購買後剩餘的金額。

console.log('馬克買完東西後，錢包剩下' + markTotal + '元');

第三題：顧客 Mary 提供折扣券

顧客 Mary 身上有 5000 元，想要買 10 份漢堡、10 份薯條，因為他有會員卡，所以可以打九折優惠，請問他還剩下多少錢？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var sale = 0.9;
var maryWallet = 5000;
var maryTotal;

// Code 寫在這，運算內容賦予到  maryTotal，
// 並要利用到 hamburgerPrice、friesPrice、sale、maryWallet
// 算出 maryTotal 購買後剩餘的金額。

console.log('Mary 買完東西後，錢包剩下' + maryTotal + '元');

5. 參考解答

第一題：

1
2
3

bobTotal = hamburgerPrice * 4 + friesPrice * 30;

// Bob 您好，您詢問的金額總計為1400元 

第二題：

1
2
3

markTotal = markWallet - (hamburgerPrice * 1 + friesPrice * 3);

// 馬克買完東西後，錢包剩下30元

第三題：

1
2
3

maryTotal = maryWallet - (hamburgerPrice * 10 + friesPrice * 10) * sale;

// Mary 買完東西後，錢包剩下4190元

第六關：邏輯運算子情境題

題目連結

劇情略。

6. 題目

題目一：布林與比較運算子練習

成為 VIP 會員的條件，只要購買滿 200 元，就可無條件成為會員，Bob 買了 2 個漢堡，2 個 薯條，是否有滿足條件？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;
var isVIP;

// 請透過比較運算子，將比較結果寫在 isVip 上
// 請利用 VIPTotal、hamburgerPrice、friesPrice 的變數進行比較
// isVIP 的型別必須為布林值 (true or false)

console.log('Bob 的 VIP 條件為' + isVIP);

題目二：三心二意的老闆希望用邏輯運算子 &&

老闆發現大家都只買薯條衝 VIP 資格，導致大家都不買漢堡，老闆好生氣，他認為他的美味蟹堡是全美最好吃的，小杰也不知道他的自信從哪裡來的。

所以他跟小杰說，從今天起，VIP 條件必須同時符合以下兩點，才能成為 VIP 資格。

  1. 一次消費滿 200 元
  2. 一定要買 1 個漢堡

這時又來了兩位顧客，Mary 與 Mark，來看看他們有沒有符合條件吧！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 此變數不可更改
var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

var markHamburgerNum = 2;
var markfriesNum = 4;
var markIsVIP;

// 如上面新增的變數，馬克買了 2 個漢堡，與 4 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// markIsVIP 的型別必須為布林值 (true or false)

console.log('mark 的 VIP 條件為' + markIsVIP);

var maryHamburgerNum = 0;
var maryfriesNum = 10;
var maryIsVIP;

// 如上面新增的變數，Mary 買了 0 個漢堡，與 10 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// maryIsVIP 的型別必須為布林值 (true or false)

console.log('mary 的 VIP 條件為' + maryIsVIP);

題目三：Mary 很生氣，他覺得現在的 VIP 資格吃人夠夠，希望用 || 邏輯運算子

Mary 說：「老闆我好歹是忠實老客戶欸，我買了你八年的薯條，而且遠遠超過 200 元，竟然還不算我是 VIP，你有沒有搞錯！」

老闆怕了，他很擔心會上台灣的老天鵝娛樂被當作笑柄，所以他立馬將 VIP 條件改成，只要符合以下任一點消費條件，就能成為 VIP 資格。

  1. 一次消費滿 200 元
  2. 一定要買 1 個漢堡

我們再看看 Mary 有沒有符合條件吧！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

var maryHamburgerNum = 0;
var maryfriesNum = 10;
var maryIsVIP;

// 如上面新增的變數，Mary 買了 0 個漢堡，與 10 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// maryIsVIP 的型別必須為布林值 (true or false)

console.log('mary 的 VIP 條件為' + maryIsVIP);

6. 參考解答

題目一：

1
2
3

isVIP = hamburgerPrice * 2 + friesPrice * 2 >= VIPTotal;

// Bob 的 VIP 條件為false

題目二：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

markIsVIP =
  markHamburgerNum > 1 &&
  hamburgerPrice * markHamburgerNum + friesPrice * markfriesNum >= VIPTotal;

// mark 的 VIP 條件為true

maryIsVIP =
  maryHamburgerNum > 1 &&
  hamburgerPrice * maryHamburgerNum + friesPrice * maryfriesNum >= VIPTotal;

// mary 的 VIP 條件為false

題目三：

1
2
3
4
5

maryIsVIP =
  maryHamburgerNum > 1 ||
  hamburgerPrice * maryHamburgerNum + friesPrice * maryfriesNum >= VIPTotal;

// mary 的 VIP 條件為true

教學、延伸知識連結

第七關：if - 認真的小杰竟被客訴

題目連結

劇情略。

7. 題目

題目一：if 的練習

老闆說現在要來驗收 if 成果，
成為 VIP 會員的條件，只要購買滿 200 元，
現在 會員 A 購買了 350 元，請用 if 判斷是否要給他 VIP 卡。

1
2
3
4
5

var VIPTotal = 200;
var memberPrice = 350;

// 請透過 if 來設計回覆，如果對方滿足門檻
// 就回覆 console.log("您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上")

題目二：if else 的練習

又有人來申請 VIP 活動了！
成為 VIP 會員的條件，只要購買滿 200 元，就可無條件成為會員，Mark 買了 2 個漢堡，2 個 薯條，是否有滿足條件？

這次要記得用 if，以及注意你的語氣啊~ (小杰覺得人生好難

1
2
3
4
5
6
7

var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

// 請透過 if else 來去設計對方是否有達到條件，有或沒有都需要回覆對方
// 如果有，請顯示 console.log("尊敬的客戶您好，您有達到 VIP 條件")
// 如果沒有達到條件，便用 else 顯示 console.log("尊敬的客戶您好，您還差 xx 元，才有符合 VIP 條件哦~")

題目三： if、else if、else 練習

工作一整天，小杰累到懷疑人生，累歸累，但還是得吃東西，小杰吃東西有自己的 SOP，來幫幫小杰看看他該吃什麼食物。

  • 小杰都用飢餓度 1~100 來計算，100 就是代表最飢餓，數值皆為整數，不會有小數點
  • 小杰飢餓度 0~20 時，都吃飯糰
  • 小杰飢餓度在 21~40 時，都吃肉燥飯+貢丸湯
  • 小杰飢餓度在 41~60 時，都吃麥當勞
  • 小杰飢餓度在 61~100 時，都吃 99 元火鍋吃到飽

今天小杰的飢餓度是 53，請引導小杰去指定地點用餐

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var hungryNum = 53;

if (條件式) {
  console.log();
} else if (條件式) {
  console.log();
}

// 請用 if、else if 去判斷主人公該吃什麼
// 各區塊回覆內容請顯示 console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃麥當勞")

7. 參考解答

題目一：

1
2
3
4
5

if (memberPrice >= VIPTotal) {
  console.log('您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上');
}

// 您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上

題目二：

1
2
3
4
5
6
7
8
9

let total = hamburgerPrice * 2 + friesPrice * 2;
if (total >= VIPTotal) {
  console.log('您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上');
} else {
  let shortage = VIPTotal - total;
  console.log('尊敬的客戶您好，您還差 ' + shortage + ' 元，才有符合 VIP 條件哦~');
}

// 尊敬的客戶您好，您還差 40 元，才有符合 VIP 條件哦~ 

題目三：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 題目已經說明飢餓度 1~100 的整數，因此先不考慮此範圍外的輸入

if (hungryNum <= 20) {
  console.log('主人公因為飢餓度在' + hungryNum + '，所以他決定去吃飯糰');
} else if (hungryNum <= 40) {
  console.log('主人公因為飢餓度在' + hungryNum + '，所以他決定去吃肉燥飯+貢丸湯');
} else if (hungryNum <= 60) {
  console.log('主人公因為飢餓度在' + hungryNum + '，所以他決定去吃麥當勞');
} else {
  console.log('主人公因為飢餓度在' + hungryNum + '，所以他決定去吃 99 元火鍋吃到飽');
}

// 主人公因為飢餓度在53，所以他決定去吃麥當勞

第八關：if 與指派運算子 - 幫幫小杰的金魚腦

題目連結

劇情略。

8. 問題

題目一：老闆考考你指派運算子

老闆：「我其實很懷疑你是不是真的會了，我考考你！」
老闆：「剛好今天是發薪日，先發給你薪資 23500 元(遞給小杰」
小杰：「謝謝腦闆，但你怎麼把我的薪資告訴大家了..」
老闆：「這不是重點，以下兩步驟動作請寫成程式」
老闆：「步驟一：因為你遲到一次，我要扣你 1000 元(取走小杰手上的 1000 元」
老闆：「步驟二：然後你又偷吃 Pizza，我要再扣你 2500 元 (再次取走」
小杰：「不是啊！那明明是小黑吃..」
老闆：「這不是重點，快點算！算出你還剩下多少錢！」

1
2
3
4
5

var salary = 23500;

//請依照上面的武功秘笈 Codepen，依序實現兩步驟，算出小杰被扣了多少錢

console.log('小杰目前還剩下' + salary + '元');

題目二： if + 指派運算子

老闆：「好了，現在我要告訴你贈品條件！」

  • 目前小杰手上有 3 個贈品
  • 消費滿 100 元就送對方贈品

而現在來了兩個客人，並依序有消費，請問現在他還剩下多少個贈品？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var giftNum = 3; // 贈品數量
var customerA = 150; // 顧客 A 消費金額
var customerB = 99; // 顧客 B 消費金額

if (客戶A條件) {
}
if (客戶B條件) {
}

console.log('目前贈品剩下' + giftNum + '個');

題目三：if + 指派運算子

老闆：「我現在補齊給你總計 50 個贈品！」
老闆：「然後我覺得現在贈品門檻太高了，我決定大放送，只要滿 50 元就送一個！以此類推，他買 500 元就送 10 個贈品！」
小杰：「老闆你今天這麼慷慨，那我的薪..」
老闆：「別廢話，客人來了快點！他買完後告訴我贈品還夠不夠！」

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var giftNum = 50; // 贈品數量
var friesPrice = 30; // 薯條單價
var hamburgerPrice = 50; // 漢堡單價

// 以下是題目
// mary 買了 10 份薯條，10 份漢堡
// 請計算完贈品規則後，善用指派運算子去計算目前剩下的贈品有幾個
// 並用下面的 if 回報給老闆

if (條件) {
  console.log('老闆！贈品還夠！剩下' + giftNum + '個~');
} else {
  console.log('老闆贈品賣光啦~');
}

8. 參考解答

題目一：

1
2
3
4

salary -= 1000;
salary -= 2500

// "小杰目前還剩下20000元"

題目二：

1
2
3
4
5
6
7
8

if (customerA >= 100) {
  giftNum -= 1;
}
if (customerB >= 100) {
  giftNum -= 1;
}

// '目前贈品剩下2個'

題目三：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

let maryTotal = friesPrice * 10 + hamburgerPrice * 10;
let maryGiftNum = Math.floor(maryTotal / 50);
giftNum -= maryGiftNum;

if (giftNum > 0) {
  console.log('老闆！贈品還夠！剩下' + giftNum + '個~');
} else {
  console.log('老闆贈品賣光啦~');
}

// '老闆！贈品還夠！剩下34個~'

第九關：觀念總整理 - 幫小杰學會 Function 之呼吸

題目連結

劇情略。

9. 問題

請回覆以下 console.log 內容。

第一式：變數型別之呼吸

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var a = 1;
a += 1;
a += 5;
var b = 5;
console.log(a + b);

var c = 3;
var d = 'hello';
console.log(c * d);

var e = 8 + 2 * '9';
console.log(e);

var f = 1;
var g = '2';
var h = 3;
console.log(typeof (f + g + h));

第二式：運算子之呼吸

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var total = 200;
var isVip = true;
console.log(total >= 200 && isVip);

var a = true;
var b = false;
console.log(a && b);
console.log(a || b);

var c = 10;
var d = 20;
var e = 30;
console.log(c == 10 && d >= 5 && e !== 20);
console.log(c == 10 || d >= 5 || e !== 20);
console.log(c == 5 || d >= 40 || e !== 30);

第三式：運算子之呼吸

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var maryIsVIP = true;
if (maryIsVIP) {
  console.log('哇貴婦餒！');
} else {
  console.log('你一定搞錯了，叫你們店長出來！');
}

var momSwim = false;
var girlfriendSwim = true;

if (momSwim && girlfriendSwim) {
  console.log('都不救，因為他們都會游泳');
} else {
  console.log('小杰大喊：「你們誰不會游泳啊？？」');
  if (girlfriendSwim) {
    console.log('那你自己游上來！');
  } else {
    console.log('我先問我阿母會不會游泳！');
  }

  if (momSwim) {
    console.log('媽妳先自己游上來！');
  } else {
    console.log('媽我去救你！');
  }
}

9. 參考解答

第一式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var a = 1;
a += 1;
a += 5;
var b = 5;
console.log(a + b); // 12

var c = 3;
var d = 'hello';
console.log(c * d); // NaN

var e = 8 + 2 * '9';
console.log(e); // 26

var f = 1;
var g = '2';
var h = 3;
console.log(typeof (f + g + h)); // 'string'

第二式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var total = 200;
var isVip = true;
console.log(total>=200 && isVip); // true

var a = true;
var b = false;
console.log( a && b); // false
console.log( a || b); // true

var c = 10;
var d = 20;
var e = 30;
console.log(c==10 && d>=5 && e !== 20); // true
console.log(c==10 || d>=5 || e !== 20); // true
console.log(c==5 || d>=40 || e !== 30); // false

第三式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var maryIsVIP = true;
if (maryIsVIP) {
  console.log('哇貴婦餒！'); // "哇貴婦餒！"
} else {
  console.log('你一定搞錯了，叫你們店長出來！');
}

var momSwim = false;
var girlfriendSwim = true;

if (momSwim && girlfriendSwim) {
  console.log('都不救，因為他們都會游泳');
} else {
  console.log('小杰大喊：「你們誰不會游泳啊？？」'); // "小杰大喊：「你們誰不會游泳啊？？」"
  if (girlfriendSwim) {
    console.log('那你自己游上來！'); // "那你自己游上來！"
  } else {
    console.log('我先問我阿母會不會游泳！');
  }

  if (momSwim) {
    console.log('媽妳先自己游上來！');
  } else {
    console.log('媽我去救你！'); // "媽我去救你！"
  }
}

基本問題，就不說明了 😉。

第十關：函式參數設計

題目連結

劇情略。

10. 問題

第一題：客戶詢價函式，來更多個客人也不怕

請改設計一個詢價用的函式，並新增三個參數，依序為客戶姓名、薯條數量，漢堡數量。

同時來了三個客戶，請執行三次函式回報結果。

1
2
3
4
5
6

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var bobTotal;

console.log("Bob 您好，您詢問的金額總計為" + bobTotal + "元");

第二題：好多客戶都在問小杰，他們錢包剩下多少錢，小杰表示無言

下面截圖，請改設計一個查詢客戶錢包餘額用的函式，並新增四個參數，依序為客戶姓名、客戶錢包總額、薯條數量，漢堡數量。

同時來了三個客戶，請執行三次函式回報結果。

1
2
3
4
5
6
7

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var markWallet = 200;
var markTotal;

console.log('馬克買完東西後，錢包剩下' + markTotal + '元');

第三題：好多人都擁有九折優惠券

這一題，換您來設計函式與參數看看。

突然間同時來了三個客戶，請執行三次函式回報結果。

1
2
3
4
5
6
7
8

// 定義薯條跟漢堡的金額（金額不可以更改）
var hamburgerPrice = 50;
var friesPrice = 40;
var sale = 0.9;
var maryWallet = 5000;
var maryTotal;

console.log('Mary 買完東西後，錢包剩下' + markTotal + '元');

10. 參考解答

第一題：

1
2
3
4
5

function customer(userName, hamburgerNum, friesPriceNum) {
  let total = hamburgerPrice * hamburgerNum + friesPrice * friesPriceNum;

  return userName + ' 您好，您詢問的金額總計為' + total + '元';
}

第二題：

1
2
3
4
5
6
7
8

function customer(userName, wallet, hamburgerNum, friesPriceNum) {
  let total = 
    hamburgerPrice * hamburgerNum +
    friesPrice * friesPriceNum;
  let walletLast = wallet - total;
  
  return userName + "買完東西後，錢包剩下" + walletLast + "元";
}

題目沒說明，這裡不考慮錢不足的情況。

第三題：

1
2
3
4
5
6

function customer(userName, wallet, hamburgerNum, friesPriceNum) {
  let total = hamburgerPrice * hamburgerNum + friesPrice * friesPriceNum;
  let walletLast = wallet - total * sale;

  return userName + '買完東西後，錢包剩下' + walletLast + '元';
}

題目沒說明，這裡不考慮錢不足的情況，且客戶一定有優惠券。

竹白
作者
竹白
前端筆記
文章目錄