iT邦幫忙

2023 iThome 鐵人賽
DAY 14
0
Modern Web

給前端新手的圖文故事系列 第 14 篇

了解 JavaScript 基礎邏輯運算

15th鐵人賽
306 瀏覽

  • 分享至 

  • xImage
    •  

條件判斷與迴圈

<常用條件判斷式> 如果是否則(if ... else)

// if (condition) {

// } else { 可以不加 else 條件

// }


var number = 12;

// 是
if (number > 10) {
  console.log(true);
}

// 是否
if (number > 10) {
  console.log(true);
} else {
  console.log(false);
}

實際範例的演練

var 我媽叫我去睡覺 = false;
var 打贏一把就睡覺 = true;

if (我媽叫我去睡覺) {
  console.log('我媽叫我去睡覺');
} else if (打贏一把就睡覺) {
  console.log('就去睡覺');
} else {
  console.log('再來一把');
}

多條件範例

if (number > 10) {
  console.log('大於10');
} else if (number > 5) {
  console.log('小於等於10大於５');
} else {
  console.log('其他');
}

免運金額計算

      var 購物車金額 = 3000;
      var 免運金額 = 2050;
      var 貨運金額 = 60;

      if (購物車金額 >= 免運金額) {
        console.log('免運總金額：' + 購物車金額);
      } else {
        購物車金額 += 貨運金額;
        console.log('總金額：' + 購物車金額);
      }

<常用條件判斷式> 依照條件判斷內容(switch ... case)

// switch (key) {
// 	case value:

// 		break; 沒有加 break 的話將會持續下方條件

// 	default:
// 		break;
// }

var week = 2;

switch (week) {
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;

  default:
    console.log('請輸入 1 - 3');
    break;
}

進行與 IF 判斷式的比較

var 案件類型 = '案件';

if (案件類型 === '刑事') {
  console.log('這是刑事案件');
} else if (案件類型 === '民事') {
  console.log('這是民事案件');
} else if (案件類型 === '案件') {
  console.log('隨意案件類型');
} else {
  console.log('都沒有滿足的時候');
}

switch (案件類型) {
  case '刑事':
    console.log('這是刑事案件');
    break;
  case '民事':
    console.log('這是民事案件');
    break;
  case '案件':
    console.log('隨意案件類型');
    break;
  default:
    console.log('都沒有滿足的時候');
}

 var cardLevel = ['銀卡', '金卡', '白金卡'];
      var myLevel = '銀卡';

      var ifTest = function (testCase) {
        if (myLevel === '銀卡') {
          return '銀卡的消費折扣';
        } else if (myLevel === '金卡') {
          return '金卡的消費折扣';
        } else if (myLevel === '白金卡') {
          return '白金卡的消費折扣';
        } else {
          return '沒有會員';
        }
      };

      var test = function (testCase) {
        switch (testCase) {
          case '銀卡':
            return '銀卡的消費折扣';
          case '金卡':
            return '金卡的消費折扣';
          case '白金卡':
            return '白金卡的消費折扣';
          default:
            return '沒有會員';
        }
      };

      console.log(test('日式料理')); // 今天吃日式料理

引入函式當中

var test = function (testCase) {
  switch (testCase) {
    case '台式料理':
      return '今天吃台式料理';
    case '泰式料理':
      return '今天吃泰式料理';
    case '日式料理':
      return '今天吃日式料理';
    case '美式料理':
      return '今天吃美式料理';
    default:
      return '都沒有滿足的時候';
  }
};

console.log(test()); // 都沒有滿足的時候
console.log(test('日式料理')); // 今天吃日式料理

<常用條件判斷式> 條件滿足前執行(do ... while)

  // do {

  // } while (condition);
  
  var i = 2;
  
  do {
    document.write(i);

    console.log(i);

    i++;
  } while (i <= 10);

<常用條件判斷式> 符合條件前執行(while)

// while (condition) {

// }

var i = 2;
while (i <= 10) {
  document.write(i);
  document.write('<br/>');

  i++;
}

<差異解釋> (do ... while) 與 (while)

var whileNumber = 21;
// var whileNumber = 20

while (whileNumber >= 20) {
  console.log('條件達成即結束循環');
  whileNumber--;
}

do {
  console.log('不管如何都先進行一次操作，之後才判斷是否完成條件');
  whileNumber--;
} while (whileNumber >= 20);

<常用迴圈> for & forEach 固定次數的迴圈操作 為每個實體提供函式

for (var index = 0; index < 6; index = index + 2) {
  console.log(index);
}

// index = 0
// Boolean(index <= 5)
// 執行內容;
// index = index + 2

// index = 2
// Boolean(index <= 5)
// 執行內容;
// index = index + 2

// index = 4
// Boolean(index <= 5)
// 執行內容;
// index = index + 2

// index 6
// Boolean(index <= 5)

var array = ['apple', 'banana', 'orange']; // length : 3
for (var index = 0; index < array.length; index++) {
  var element = array[index];
  console.log(element);
}

// index = 0
// 0 < 3
// var element = array[0] -> 'apple'
// log element -> 'apple'
// index = index + 1

// index = 1
// 1 < 3
// var element = array[1] -> 'banana'
// log element -> 'banana'
// index = index + 1

// index = 2
// 2 < 3
// var element = array[2] -> 'orange'
// log element -> 'orange'
// index = index + 1

// index = 3
// 3 < 3
// 條件不成立

  // for (let index = 0; index < array.length; index++) {
  //   const element = array[index];
  // }
  
  var array = ['apple', 'banana', 'orange'];

  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
  }

  array.forEach(function (element) {
    console.log(element);
  });

實務範例操作練習

<練習案例-01> 在網站上新增多個隨機變數

var str = '產出亂碼 - ';

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

for (var i = 1; i <= 10; i++) {
  if (i <= 9) {
    str = str + getRandomInt(100) + '、';
  } else {
    str = str + getRandomInt(100);
  }
}

document.write(str);

<練習案例-01-1> 設計不會重複內容的機制

var randomNumber = function (pointNumber, maxNumber) {
  var text = '產出亂碼 - ';
  var numberArray = [];

  // 印出的總數，不可大於最大數字的範圍
  if (pointNumber > maxNumber) return '請輸入最大範圍要大於總筆數';

  for (var i = 1; i <= pointNumber; i++) {
    // 去隨機取得一個範圍內的數字
    var randomInt = Math.ceil(Math.random() * maxNumber);
    // 當 numberArray 裡面的數值，有包含 randomInt 的數值的時候，再重新隨機取值
    while (numberArray.includes(randomInt)) {
      randomInt = Math.ceil(Math.random() * maxNumber);
    }
    // 到這邊時，randomInt 一定是沒有重複的數值
    numberArray.push(randomInt);
  }

  // 幫 text 這個變數，加上 numberArray 分隔插入、的字串
  text += numberArray.join('、');

  return text;
};
console.log(randomNumber(6, 20));

<練習案例-02> 日薪為 1000 的員工，以每年增長 2% 的比例提高薪資，持續工作 30 年後的薪資

  var salary = 1000;
  for (var i = 1; i <= 30; i++) {
  	salary = salary * 1.02;
  }
  document.write(salary);

<練習案例-03> 輸出 100 以內能被固定數字整除的數字

  for (let i = 0; i < 100; i++) {
  	if (i % 7 == 0) {
  		document.write(i);
  		document.write("<br />");
  	}
  }

  var startNumber = 1;
  while (startNumber * 7 < 100) {
  	document.write(startNumber * 7);
  	document.write("<br />");
  	startNumber++;
  }

  for (var i = 1; i <= parseInt(100 / 7); i++) {
  	console.log(i);// 會給出被 7 整除後餘數為零的數值
  	document.write(i * 7);
  	document.write("<br />");
  }

<練習案例-04> 條件判斷與迴圈應用

  for (var i = 1; i <= 5; i++) {
  	if (i == 3) {
  		//可操作的條件
  		break;
  	}
  	document.write(i);
  	document.write("<br />");
  }

  document.write("break 會跳出 for");
  
  arrayBlock = [
    { name: '王大明', age: 23 },
    { name: '王小明', age: 17 },
    { name: '王鐘銘', age: 20 },
  ];
  
  arrayBlock.forEach(function (element) {
  	if (element.age >= 18) {
  		console.log(element.name);
  	}
  });

<練習案例-05> 計算 100 - 300 之間能被 12 或者 17 整除的數值

  for (var i = 100; i <= 300; i++) {
  	if (i % 12 == 0 || i % 17 == 0) { // 可將 || 改成 &&
  		document.write(i);
  		document.write("<br />");
  	}
  }

<練習案例-06> 顯示下列圖型

  /*
	*				第1行，1个*
	**　				第2行，2个*
	**				第3行，3个*
	****				第4行，4个*
	*****			第5行，5个*
	******			第6行，6个*
	...				第n行，n个*
  */
  
  var rows = 20;
  for (var i = 1; i <= rows; i++) {
    // i代表行數

    // 要求第幾行，輸出幾個'*''
    for (var col = 0; col < i; col++) {
      document.write('*');
    }

    document.write('<br />');
  }

  for (let index = 20; index > 0; index--) {
    for (var col = 0; col < index; col++) {
      document.write('*');
    }
    document.write('<br />');
  }

  for (var i = 1; i <= rows; i++) {
    // i代表行數
    console.log(i);

    // 要求第幾行，輸出幾個'*''
    for (var col = 0; col < i; col++) {
      document.write('*');
    }

    document.write('<br />');
  }

上一篇
JS 那些討厭的小東西
下一篇
學習如何操作 DOM 與異步概念
系列文
給前端新手的圖文故事 共 30 篇
  1. 26
    學習如何使用 TypeScript 在 React 專案
  2. 27
    了解 Next.js 的應用與基礎特性
  3. 28
    了解 Next.js 路由與相關應用
  4. 29
    使用 Redux 搭配 TypeScript 作為資料流載體
  5. 30
    前端系列總結
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙