การใช้คำสั่งควบคุมการทำงานของโปรแกรม ในภาษา Dart เบื้องต้น

เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee
control flow in dart dart ควบคุมคำสั่ง ภาษา dart

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ control flow in dart dart ควบคุมคำสั่ง ภาษา dart

ดูแล้ว 12,093 ครั้ง




ในการเขียนโปรแกรมภาษาใดๆ ก็ตาม เราต้องเจอกับเงื่อนไข
การทำงาน และต้องกำหนดทิสทางของการทำงานให้กับเงื่อนไข
หรือเป้าหมายให้เป็นไปตามความต้องการ เช่นเดียวกับกับภาษา Dart
    รูปแบบคำสั่งที่ใช้ในการควบคุมการทำงานของโปรแกรมในภาษา Dart อาจจะ
ไม่แตกต่างจากรูปแบบของกาษาอื่นๆ มากนัก โดยเราสามารถใช้คำสั่งต่อไปนี้ ในการควบคุม
การทำงานในโปรแกรม 
  • if and else  // การตรวจสอบเงื่อนไข
  • for loops  // การทำซ้ำคำสั่ง
  • while and do-while loops
  • break and continue // การออกจากคำสั่งทำซ้ำ หรือการข้ามรายการทำซ้ำ
  • switch and case  // การเลือก
สามารถทดสอบการเขียนโปรแกรมผ่านเว็บไซต์ DartPad
 
 

การใช้งาน if else

    สำหรับการใช้งานคำสั่ง if จะใช้สำหรับตรวจสอบเงื่อนไขว่าเป้น true หรือไม่ และเนื่องจาก Dart เป้นภาษาโปรแกรม
ที่ให้ความสนใจเกี่ยวกับประเภทตัวแปร และการใช้งานอย่างถูกต้อง  ดังนั้นในภาษา dart อาจจะไม่เหมือนกรณีภาษาอื่นเสีย
ทีเดียว เช่น กรณี JavaScript เราสามารถใช้ค่าอื่นๆ ในการกำหนดเป้นเงื่อนไข สำหรับคำสั่ง if ได้ แต่ใน ภาษา dart จะต้องเป็น
ค่า boolearn เท่านั้น ตัวอย่างเช่น 
 
// กรณี JavaScript 
var a = 2;
if(a){
  console.log('This run');
}

// กรณีภาษา Dart
var a = 2;
if(a){  // เกิด error ค่าในเงื่อนไขต้องเป็น boolean เท่านั้น
  print('This run');
}
 
    รูปแบบการใช้งานในภาษา Dart ที่ถูกต้อง
 
void main (){

  var graduated = true;
  if(graduated){// มีค่าเป็น true
    print("Congratulation!");
  }
  
  var a = 1;
  var b = 2;
  if(b > a){// มีค่าเป็น true
    print("a is greater than b");
  }
  
  var name = '';
  if(name.isEmpty){ // มีค่าเป็น true
    print("Please fill your name.");
  }
  
}
 
    สำหรับการตรวจสอบเงื่อนไขข้างต้น จะให้ความสนใจเฉพาะส่วนของเงื่อนไขเมื่อเป็น true เท่านั้น กรณีเราต้องการทำ
คำสั่งที่เป็นค่า false สามารถกำหนดเงื่อนไขเพิ่มเติมโดยใช้ ELSE ดังนี้
 
void main (){

  var graduated = true;
  if(graduated){// มีค่าเป็น true
    print("Congratulation!");
  }else{// มีค่าเป็น false
    print('Study harder');
  }
  
  var a = 5;
  var b = 2;
  if(b > a){// มีค่าเป็น true
    print("a is greater than b");
  }else{ // มีค่าเป็น false
    print('b is greater than a');
  }
  
  var name = 'Ebiwayo';
  if(name.isEmpty){ // มีค่าเป็น true
    print("Please fill your name.");
  }else{ // มีค่าเป็น false
    print("Hello! $name.");
  }
  
}
 
    ในกรณีเงื่อนไขที่เราต้องการตรวจสอบ มีมากกว่าหนึ่ง เงื่อนไข เราสามารถกำหนดเพิ่มเติมโดยใช้ ELSE IF สำหรับ
เงื่อนไขเพิ่มเติม และอาจจะปิดด้วยเงื่อนไขอื่นๆ โดยใช้ ELSE ตามแนวทางตัวอย่างดังนี้
 
void main (){

  var score = 60;
  
  if(score >= 80){
    print("Grade A");
  }else if(score >= 70){
    print("Grade B");
  }else if(score >= 60){
    print("Grade C");
  }else if(score >= 50){
    print("Grade D");
  }else{
    print("Grade F");
  }
  
}
 
    เงื่อนไขข้างต้น แม้อาจจะมองว่ารองรับการทำงาน แต่ในภาษาโปรแกรมแล้ว ยังถือว่ายังไม่รองรับการใช้งานสำหรับในหลายๆ กรณี
เช่น ถ้าเป็นตัวเลขมาก 100 ที่เป็นคะแนนเต็ม หรือถ้าเป็นตัวเลขติดลบ หรือถ้าเป็นกรณีกรอกข้อมูลที่ไม่่ใช้ตัวเลข เหล่านี้ ล้วนอยู่ใน
ความเป็นไปได้ของการทำงาน ดังนั้น เราอาจจะปรับรูปแบบเพิ่มเติมใหม่ได้ดังนี้
 
void main (){

  int score = 75;
  
  if(score >= 80 && score <=100){
    print("Grade A");
  }else if(score >= 70){
    print("Grade B");
  }else if(score >= 60){
    print("Grade C");
  }else if(score >= 50){
    print("Grade D");
  }else if(score >=0 && score < 50){
    print("Grade F");
  }else{
    print("Please input a valid number between 0 - 100");
  }
  
}
 
    ในภาษา Dart มีตัวดำเนินการที่ช่วยให้เราสามารถกำหนดเงื่อนไข ในกรณีการใช้งาน if else ที่ไม่ซับซ้อนได้ง่ายขึ้น
ในรูปแบบเงื่อนไข 
 
    condition ? expr1 : expr2
    // รูปแบบ:  เงื่อนไข ? ทำคำสั่งกรณี if : ทำคำสั่งกรณี else  
 
ยกตัวอย่าง เช่น
 
void main (){
  // ตัวอย่างที่ 1
  var graduated = true;
  var msg;
  // เงื่อนไข if else
  if(graduated){// มีค่าเป็น true
    print("Congratulation!");
  }else{// มีค่าเป็น false
    print('Study harder');
  }
  
  // เงื่อนไข if else ในรุปแบบ condition expression 
  // รูปแบบ:  เงื่อนไข ? ทำคำสั่งกรณี if : ทำคำสั่งกรณี else  
  msg = (graduated) ? "Congratulation!" : "Study harder";
  print(msg); // Congratulation!
 
  // ตัวอย่างที่ 2
  var name = 'Ebiwayo';
  var greeting_msg;
  // เงื่อนไข if else  
  if(name.isEmpty){ // มีค่าเป็น true
    print("Please fill your name.");
  }else{ // มีค่าเป็น false
    print("Hello! $name.");
  }
  
  // เงื่อนไข if else ในรุปแบบ condition expression 
  // รูปแบบ:  เงื่อนไข ? ทำคำสั่งกรณี if : ทำคำสั่งกรณี else    
  greeting_msg = (name.isEmpty) ? "Please fill your name." : "Hello! $name.";
  print(greeting_msg);// Hello! Ebiwayo.

}
 
    สำหรับ condition expression รูปแบบที่ 2 จะเป็นการตรวจสอบค่าตัวแปรใดๆ ว่าหากไม่ได้เป็น null ให้มีค่าตามค่าเดิม
แต่ถ้าเป็นค่า null ให้เป็นค่าอื่นแทน โดยรูปแบบเป็นดังนี้
 
    expr1 ?? expr2
    // ให้เป็นค่านั้นหากไม่เป็น null ?? หากเป็น null ให้เป็นค่าอื่นแทน

 
ในคำสั่ง if else แบบเต็มและตัวอย่างการใช้งานในรูปแบบ condition express 
 
void main (){

  // ตัวอย่างที่ 1 
  var name; // ค่าเริ่มต้นเป็น null เสมอ 
  if(name != null){
    name = name;
  }else{
    name = 'Guest';
  }
  print(name); // Guest
  
  // ใช้รูปแบบ condition expression 
  print(name ?? "Guest"); // Guest
  
  // ตัวอย่างที่ 2 การใช้งานร่วมกับตัวแปร
  var name2;
  var greeting_msg; 
  greeting_msg = name2 ?? "Guest";
  print(greeting_msg); // Guest

}
 
 
 

การใช้งาน for

    คำสั่ง for ใช้สำหรับวนลูปทำงานซ้ำ จนกว่าเงื่อนไขจะเป็น false  โดยทั่วไป จะใช้กับเงื่อนไขที่เราพอจะประมาณ
จำนวนของทำการงานได้ ตัวอย่าง ต้องแสดงข้อความว่า "Hello" 5 ครั้ง
 
  // รูปแบบ for(ค่าเริ่มต้น ; เงือ่นไข ; การเพิ่มหรือลดค่า)
  for(var step = 0; step < 5; step++){
    print("Hello");
  }
 
    ตัวอย่างการวนลูปแสดงค่าตัวแปร List โดยใช้คำสั่ง for 
 
  var dayName = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  for(var i = 0; i < dayName.length; i++){ // วนลูปแสดงชื่อวันทั้ง 7 จากตัวแปร dayName
    print(dayName[i]);
  }
 
    ในกรณีที่เป็นตัวแปร List หรือ Set เราสามารถใช้คำสั่ง forEach เพื่อวนลูปแสดงรายการ โดยรูปแบบการใช้งาน
เป็นดังนี้
 
void main (){
  
  var dayName = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
//   for(var i = 0; i < dayName.length; i++){ // วนลูปแสดงชื่อวันทั้ง 7 จากตัวแปร dayName
//     print(dayName[i]);
//   }
  
  // ผลลัพธ์เดียวกันกับการใช้ for ด้านบน  
  dayName.forEach((value){
    print(value);
  });
  // รูปแบบ: [ชื่อตัวแปร List หรือ Set].forEach((ข้อมูล){ print(ข้อมูล) }
  
  // การใช้งานในรูปแบบ fat arrow ผลลัพธ์เดียวกัน แต่เขียนกระชับกว่า
  dayName.forEach( (value) => print(value) );
  
}
 
    นอกจากนั้น เรายังสามารถใช้งาน for-in สำหรับข้อมูลที่เป็น List และ Set อีกด้วย  โดยคำสั่ง for-in ก็เสมือนเป็นการบอกว่า
ให้ทำการวนลูปสมาชิกใน object นั้น ตัวอย่างเช่น
 
void main (){
  
  var dayName = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  for(var day in dayName){ // วนลูปแสดงสมาชิกในตัวแปร List 
    print(day);
  }
  
  var gender = {'male','female'}; 
  for(var sex in gender){ // วนลูปแสดงค่าสมาชิกในตัวแปร Set
    print(sex);
  }
  
}
 
 
 

การใช้งาน while  และ do while

    คำสั่ง while จะเป็นการวนลูปทำซ้ำไปในขณะที่เงื่อนไขยังเป็นจริง โดยจะเป้นการตรวจสอบเงือ่นไข
ก่อนทำคำสั่ง รูปแบบคำสั่ง
 
while (condition) {
 // คำสั่ง การทำงาน
}

    เช่นเดียวกับการใช้งานคำสั่ง do while แตกต่างกันที่การใช้ do while จะทำคำสั่งก่อน จากนั้นจึงตรวจสอบเงื่อนไข
รูปแบบคำสั่ง

do {
 // คำสั่ง การทำงาน
} while (condition);

    ดูตัวอย่างการใช้งานประกอบการทำความเข้าใจ
 
void main (){
  
  // วนลูปแสดงเลข 5 4 3 2 1 โดยตรวจสอบเงื่อนไขก่อน
  var x = 5;
  while (x > 0){ // ตรวจสอบเงื่อนไขก่อนทำคำสั่ง
    print(x);
    x--;
  }
  
  // วนลูปแสดงเลข 5 4 3 2 1 โดยตรวจสอบเงื่อนไขก่อน  
  do { // ทำคำสั่งก่อน
    print(x); 
    x--;    
  } while (x > 0); // แล้วตรวจสอบเงื่อนไข
  
}
 
 

การใช้งาน break และ continue

    สำหรับคำสั่ง break และ continue จะเป็นคำสั่งที่ใช้งานร่วมกับลูปการทำซ้ำ ไม่ว่าจะเป็น for , while หรือ do.. while
โดยคำสั่ง break จะเป็นคำสั่งสำหรับออกจากลูป หรือหยุดการทำงานของคำสั่งลูป  ในขณะที่คำสั่ง continue ใช้สำหรับข้าม
การทำงานระหว่างกำลังวนลูป เช่น สมมติวนลูปที่ 2 เสร็จแล้ว ข้ามการทำงานลูปที่ 3 ไป และไปทำงานลูปที่ 4 ต่อแทน
    ดูตัวอย่างการใช้งานประกอบการทำความเข้าใจ
 
void main (){
  
  var dayName = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  for(var i = 0; i < dayName.length; i++){ // วนลูปแสดงชื่อวันทั้ง 7 จากตัวแปร dayName
    if(dayName[i] == 'Sunday'){ // ข้ามถ้าเป้นวันอาทิตย์
      continue;
    } // สามารถเขียนแบบสั้นเป็นดังนี้ if(dayName[i] == 'Sunday') continue;
    if(dayName[i] == 'Saturday'){ // หยุดการทำงาน และออกจากลูป เมื่อเป็นวันเสาร์
      break;
    }
    print(dayName[i]);
  }
  
  // หรืออีกตัวอย่าง วนลูปแสดงวันธรรมดา ไม่รวมเสาร์-อาทิตย์
  for(var day in dayName){
    if(day == 'Sunday' || day =='Saturday'){
      continue;
    }
    print(day);
  }
  
  // ตัวอย่างการใช้งานกับ while
  var x = 5;
  while(x > 0){
    if(x % 2 == 0){ // ข้ามถ้าเป็นเลขคู่
      x--; // * ต้องมีเงื่อนไขการเพิ่มลบ ไม่เช่นนั้น จะวนลูปไม่สิ้นสุด
      continue;
    }
    print(x);
    x--; 
  }
  
}
 
    ในกรณีที่มีการทำงานคำสั่งวนลูปซ้อนกันมากกว่า 1 ลูป สามารถใช้ label หรือป้ายกำกับ ในรูปแบบคำสั่ง
 
label :
  // คำสั่งวนลูป for | do..while | while

    เพื่อใช้งานร่วมกับ break และ continue ได้ ตัวอย่างเช่น
 
void main (){
 
  // วนลูปสร้างพิกัด x,y
  for(var x = 0; x <= 2; x++){
    for(var y = 0; y <= 2; y++){
      print('$x,$y');
    }
  }
  // ค่าผลัพธ์ที่ได้ 
// 0,0
// 0,1
// 0,2
// 1,0
// 1,1
// 1,2
// 2,0
// 2,1
// 2,2
  
}
 
    ตัวอย่างวิธีการกำหนด label จะได้เป็น
 
void main (){
 
  // วนลูปสร้างพิกัด x,y
  valueX:
  for(var x = 0; x <= 2; x++){
    valueY:
    for(var y = 0; y <= 2; y++){
      print('$x,$y');
    }
  }
  
  // หรือกำหนดเป็นแบบนี้ก็ได้
  valueX: for(var x = 0; x <= 2; x++){
    valueY: for(var y = 0; y <= 2; y++){
      print('$x,$y');
    }
  }
  
  // กรณีใช้งานร่วมกับ break และ continue
  // สำหรับสร้างพิกัดที่เป็นเลขคู่ เช่น 0,0 0,2 2,0 2,2
  valueX: for(var x = 0; x <= 2; x++){
    valueY: for(var y = 0; y <= 2; y++){
       // ข้าม x ทีเ่ป็นเลขคี่ ออกจากลูปด้านในไปทำลูปนอกสุด
      // ที่ชื่อ valueX ในลำดับถัดไป
      if(x % 2 == 1) continue valueX;
      if(y % 2 ==1 ) continue;
      print('$x,$y');
    }
  }  
  
  var alphbet = ['A','B','C'];
  var i = 3;
  whileLabel: while (i > 0){
    i--;
    forLabel: for(var data in alphbet){ // หากไม่ได้ใช้งาน ไม่ต้องกำหนด forLabel ก็ได้
      // หากค่า i เท่ากับ 0 ให้หลุดการทำงานของลูป while ด้านนอก
      // สามารถเขียนแบบย่อเป็น if(i == 0) break whileLabel;
      if(i == 0){ 
        break whileLabel;
      }
      print('$i - $data');
    }
  }
  
}
 
 
 

การใช้งาน switch case

    สำหรับคำสั่ง switch ในภาษา Dart จะใช้ในการเปรียบเทียบค่าที่เป็นตัวเลข ข้อความ หรือ ตัวแปรค่าคงที่โดยใช้เครื่องหมาย ==
โดยค่าที่นำมาเปรียบเทียบจะต้องเป็นประเภทข้อมูลเดียวกัน การใช้งาน switch จะเหมือนเป็นการจำกัดขอบเขตของการเลือกเงื่อนไข
ให้อยู่ในเงื่อนไขที่เป็นไปได้ ลดการแสกนข้อมูลเพื่อตรวจสอบทั้งหมด รูปแบบคำสั่ง
 
switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    ...
  default:
    statements_def
    [break;]
}
 
    ตัวอย่างการใช้งาน
 
void main (){
 
  var command = 'OPEN';
  switch (command) { // ตรวจสอบค่าตัวแปร command
    case 'CLOSED': // เปรียยเทียบข้อความ กรณีเท่ากับ 'CLOSED'
      print("Closed");
      break;
    case 'PENDING':
      print("Pending");
      break;
    case 'APPROVED':
      print("Appreved");
      break;
    case 'DENIED':
      print("Denied");
      break;
    case 'OPEN': // เข้าเงือ่นไขนี้
      print("Open"); // ส่วนนี้ทำงาน
      break; 
    default:
      print("Something else");
      break; // กรณีค่า default ไม่มี break; ส่วนนี้ก็ได้ไม่เกิด error
  }
  
}
 
    นอกจากการใช้งาน break ในคำสั่ง case เรายังสามารถใช้คำสั่งอื่นได้ เช่น continue, throw หรือ return เป็นต้น
 
void main (){
 
  var command = 'PENDING';
  switch (command) { // ตรวจสอบค่าตัวแปร command
    case 'CLOSED': // เปรียยเทียบข้อความ กรณีเท่ากับ 'CLOSED'
      print("Closed");
      break;
    case 'PENDING': // เข้าเงือ่นไขนี้
      print("Pending");
      continue approved; // และกระโดนไปทำเงื่อนไข ที่กำหนดด้วย label approved
      
    approved:  
    case 'APPROVED':
      print("Appreved");
      break;
    case 'DENIED':
      print("Denied");
      break;
    case 'OPEN': 
      print("Open"); 
      break; 
    default:
      print("Something else");
  }
  
}
 
    ทั้งหมดเป็นแนวทาง ทำความเข้าใจเกี่ยวกับ คำสั่ง ที่ใช้ในการควบคุมการทำงานของโปรแกรมภาษา Dart เบื้องต้น


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 28-11-2019


การควบคุมแบบต่อเนื่องแบบ Cascade

    ในภาษา Dart จะรองรับรูปแบบการควบคุมแบบต่อเนื่อง หรือก็คือ ลำดับการทำงานหรือการดำเนินการของ Object หนึ่งๆ เช่น ปุ่มนี้กำหนด
ข้อความเป็น "Confirm" ต่อด้วยกำหนด css class เป็น "important" และก็กำหนดการทำงานหรือการรอรับคำสั่งเป็น "alert('Confirmed!')"
ซึ่งจะเห็นว่า ลำดับการทำงานทั้งหมดจะเกิดขึ้นกับ object เดียวกัน ก็คือปุ่ม button 
    โดยการใช้งาน cascade จะใชรูปแบบเป็น (..) จุดสองอันติดกัน ตัวอย่างเช่น myObject ทำคำสั่งหรือที่เรียกว่า เรียกใช้งาน method ชื่อว่า
someMethod() ก็จะได้เป็น
 
myObject.someMethod() // รูปแบบการเรียกใช้ปกติทั่วไป
myObject..someMethod() // รูปแบบ cascade 
    ในรูปแบบแรก หรือรูปแบบทั่วไป เมื่อมีการเรียกใช้คำสั่ง ก็จะมีการ return ค่ากลับมา
    แต่ในรูปแบบ cascade จะไม่ได้ return ค่ากลับมา แต่จะเป็นการอ้างอิงถึง myObject ที่กำลังใช้งาน cascade อยู่ โดยเราสามารถเชื่อมต่อ
การทำงานอื่นๆ เพิ่มเติมให้กับ myObject ได้อย่างต่อเนื่อง เปรียบเทียบการใช้งานตามนี้
 
  // สมมติเราใช้งาน การอ้างอิงถึงปุ่ม (* ตัวอย่าง dart สำหรับเว็บ )
  var button = querySelector('#confirm');
  // กำหนด property และ action ให้กับปุ่ม
  button.text = 'Confirm';
  button.classes.add('important');
  button.onClick.listen((e) => window.alert('Confirmed!')); 
 
    รูปแบบตัวอย่างข้างต้น เราจะเห็นว่า มีการเรียกใช้งาน button ซ้ำๆ เพื่อทำการกำหนด property และ action หรือการทำงานให้กับปุ่ม
ดังนั้น เพื่ออ้างอิง object เดิมซ้ำๆ เราสามารถใช้งาน cascade ในรูปแบบเป็นดังนี้ได้
 
  // การใช้งาน cascade เราอาจจะไม่จำเป็นต้องใช้งานตัวแปร button ก็ได้
  querySelector('#confirm')
    ..text = 'Confirm'
    ..classes.add('important')
    ..onClick.listen((e) => window.alert('Confirmed!'));
    สังเกตว่า การใช้งาน cascade ทำให้เราไม่ต้องเรียกใช้หรืออ้างอิง object เดิมซ้ำๆ หากทำงานหรือยังใช้งานการกำหนดค่าต่างๆ อยู่
ในตัวอย่าง เราสามารถขึ้นต้นบรรทัดใหม่ สำหรับกำหนดลำดับการทำงานที่ต้องการ โดยจะปิดท้ายด้วย ( ; ) เฉพาะบรรทัดคำสั่งสุดท้ายเท่านั้น


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ