iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 4

04 運算子練習

昨天我們介紹了各式各樣的運算子,今天我們就要用運算子來練習看看!

基本的加減乘除運算習題

就像昨天開頭所說,運算就是任何資料計算,對系統產生動作。我們先從大家一般會想到的加減乘除開始練習!

如果我今天買了兩個 10 元漢堡,和三包 20 元的薯條,要請電腦幫我計算,並用 console.log 顯示出總共多少錢,要怎麼寫呢?

const hamburgerPrice = 10; //宣告漢堡10元
const friesPrice = 20; //宣告薯條20元
let hamburgerNum = 2; //宣告買兩個漢堡
let friesNum = 3; //宣告買三包薯條

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum)

console.log("總共"+totalPrice+"元"); //印出總共80元

要注意的是,當我想要讓 console.log 出現字串和變數的串接,只要用 + 把它們連在一起就可以了。是不是很簡單呢?

讓我們試試進階題!

顧客身上有 2000 元,想要買 10 份 10 元漢堡、10 份 20 元的薯條,因為他有會員卡,所以可以打九折優惠,請問他還剩下多少錢?以上的問題,要怎麼轉換成 JS 讓電腦幫我們計算呢?

想要自己練習的朋友可以先不要看下面的解答唷!

那麼我要公布答案了!

const hamburgerPrice = 10; //宣告漢堡10元
const friesPrice = 20; //宣告薯條20元
let hamburgerNum = 10; //宣告買十個漢堡
let friesNum = 10; //宣告買十包薯條

let totalPrice = 0.9 *[(hamburgerPrice*hamburgerNum)+(friesPrice*friesNum)] //計算總共多少錢,因為有九折所以乘以0.9

let leftMoney = 2000 - totalPrice; //計算剩下多少錢

console.log("剩下"+leftMoney+"元"); //印出剩下1730元

指派運算子習題

如果今天客人手上有 2000 元,先買了500 元漢堡,結帳後又折回來,再買了 120 元薯條,要怎麼用指派運算子表示呢?

答案是:

let money = 2000;

money -= 500;
money -= 120;

console.log(money);

比較運算子習題

一樣先來題簡單的!

const a = 100;
const b = 200;
console.log((a+b)>50); 
//印出什麼?


const c = 50;
const d = 80;
console.log(c==d);
//印出什麼?


const e = 7;
const f = 9;
console.log(e!=f);
//印出什麼?


const g = 50;
const h = "50";
console.log(g==h);
console.log(g===h);
//印出什麼?

上面會印出什麼呢?無法直覺答出的話,歡迎在 sublime 、 codepen 、 vscode 先寫一次看看再看下面的文章喔!那麼我要公布答案了。

印出的分別是 true(100+200會大於50)、false( 50 不等於 80 )、true( != 是不等於的意思, 7 不等於 9 所以寫 true )、true(不嚴格模式字串自動轉為數字)、false(嚴格模式字串 50 不等於數字 50 ) 。

都答對了嗎?來點挑戰題吧!

var j = 2;
var k = "5";
console.log((j*k)>=5); 

上面會印出 true、false,還是 undefined 跟 NaN 呢?我要揭曉答案囉!

答案是印出 true 。相信能回答上面基本題的你一定知道, JS 會自動轉換字串變成數字(不知道的給我回去重讀昨天的文章XD),所以 j * k 變成10,當然大於等於五囉!

再來一題!要成為店裡的 VIP 的條件是單次購買滿兩百元。今天顧客買了 10 元漢堡兩個, 20 元薯條三包,請用 JS 告訴電腦計算顧客是否有達成 VIP 的條件,並用布林值 true 和 false 顯示吧!

const hamburgerPrice = 10; //宣告漢堡10元
const friesPrice = 20; //宣告薯條20元

const VipTotal = 200; //宣告 VIP 至少要買滿 200 元

let hamburgerNum = 2; //宣告買兩個漢堡
let friesNum = 3; //宣告買三包薯條

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum) //計算總共價錢

let isVip =(totalPrice >= VipTotal); //宣告判斷買的價錢是否大於 VIP 至少要達成的價錢

console.log("是否達成 VIP 條件: "+isVip); //印出是否達成 VIP 條件: false

邏輯運算子習題

延續上面的題目,如果今天條件改為一次要買滿兩百元並且至少買一個漢堡,客人改成買了八包薯條五個漢堡,要怎麼改寫程式呢?讓我們順便融入逗號運算子,來寫這一題吧!

寫出來了嗎?要公布答案囉!

const hamburgerPrice = 10, friesPrice = 20; //宣告漢堡10元 薯條20元

const VipTotal = 200; //宣告 VIP 至少要買滿 200 元

let hamburgerNum = 5, friesNum = 8; //宣告買五個漢堡八包薯條

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum) //計算總共價錢

let isVip =(totalPrice >= VipTotal && hamburgerNum >0); //宣告判斷買的價錢是否大於 VIP 至少要達成的價錢

console.log("是否達成 VIP 條件: "+isVip); //印出是否達成 VIP 條件: true

上面的題目中運用逗號運算子,把本來要寫兩行的式子,縮成一行,另外運用邏輯運算子 && 來判斷同時要符合兩種條件的狀況。

位元運算子習題

最後,再來練習一下位元運算子!

請問以下分別會印出什麼呢?

console.log (4|6);
console.log (4&6);
console.log (3^6);
console.log (~10);
console.log (5<<2);

你可以利用這個網站換算並在紙上寫寫看唷!

心中有答案了嗎?

/* 因為
3 = 00000011
4 = 00000100
5 = 00000101
6 = 00000110
10 = 00001010
*/

4|6 = 00000110 //console.log (4|6); 印出 6
4&6 = 00000100 //console.log (4&6); 印出 4
3^6 = 00000101 //console.log (3^6); 印出 5
~10 = 11110101 //console.log (~10); 印出 -11
5<<2 = 00010100 //console.log (5<<2); 印出 20

希望今天的習題大補帖,對大家有所幫助!也可以自己變換一下上面的題目,例如把成為 VIP 的條件改為一次買滿兩百元或至少買一個漢堡,確認自己是不是把所有觀念都讀懂了?那我們明天見囉!

學習與參考資料

JS 學徒特訓班教學影片及練習題 4-6 關


上一篇
03 運算子
下一篇
05 if 判斷式
系列文
花三十天找到 JavaScript 沙漠中的綠洲35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言