Google Flutter: เรียนรู้ประเภทตัวแปร List, Set, และ Map

เนื้อหาในส่วนนี้ค่อนข้างมีคำศัพท์เทคนิคอยู่เยอะ ดังนั้นใครที่เพิ่งเริ่มต้นเขียนโปรแกรม แนะนำให้ลองไปตามเนื้อหาเบื้องต้นใน Youtube Channel ของโค้ชพลนะครับ

Google Flutter ใช้ภาษา Dart ในการเขียน ดังนั้นภาษาที่มีชื่อไม่เหมือนกับภาษาโปรแกรมมิ่งที่เราเขียน ก็มักจะมีของใหม่ๆ แปลกๆ ที่เราไม่รู้จักด้วยแน่ๆ

และที่ยอดฮิตเลยก็คือ ประเภทของตัวแปรสำหรับเก็บข้อมูล ที่เรา เรียกกันว่า Array หรือ Collection นั่นเอง

Collection คืออะไร?

Collections เป็นการเรียกกลุ่มของประเภทตัวแปรที่เอาไว้ใช้เก็บข้อมูลหลายๆ ตัวไว้ด้วยกัน (Array ในหลายๆ ภาษา หรือ ArrayList ใน C#.NET ก็เรียกว่า Collection ได้เหมือนกัน)

เพื่อให้เราเห็นภาพมากขึ้น ให้นึกถึงเวลาไปเที่ยวห้าง ชอปปิ้งซื้อของหลายๆ ชิ้น เรามันจะไม่ถือของทั้งหมดด้วยมือ 2 ข้างของเราเองใช่ไหมครับ?

Collection เนี่ย ก็เปรียบเหมือน อะไรสักอย่างที่เอามาใส่ของทั้งหมดไว้ให้เรา ถือ และ หยิบ ของได้สะดวกๆ นั่นเอง

ในที่นี้เราเขียนแอพพลิเคชั่นด้วย Flutter เราจึงเน้นมาที่ Collection พื้นฐาน 3 ตัวด้วยกันคือ

1. List
2. Set
3. และ Map

ในที่นี้ List, Set, และ Map ก็คือ ถุงกับกระเป๋าเป้นั่นเอง

ทีนี้ตัวไหนเหมือนกระเป๋าเป้ ตัวไหนเหมือนถุงมาดูกันเลย

List และ Maps คือกระเป๋ามีช่องจัดเก็บ

List และ Maps นี่เหมือนกระเป๋าเป้ ที่แบ่งช่องเก็บของไว้เป็นช่องๆ อย่างดีครับ (พวกกระเป๋าคอมพิวเตอร์หรืออุปกรณ์อิเล็กทรอนิกส์ จะมีช่องพวกนี้เต็มไปหมด)

ซึ่งการเก็บของในช่องนี้ ให้ประโยชน์ในเรื่องการ “เรียกใช้” ข้อมูลที่เก็บอยู่ในช่องต่างๆ นั่นเอง

เหมือนกับเวลาเราจะให้เพื่อนหยิบของให้ ก็จะบอกประมาณว่า “ช่องด้านหน้าสุด ด้านซ้ายอ่ะ หยิบๆ มาเลย”

เพียงแต่สำหรับช่องเก็บข้อมูลใน List และ Map จะแตกต่างกันก็คือชื่อที่ใช้เรียกช่องครับ

List ใช้เป็นหมายเลข (Index)

ในการจัดเก็บและเรียกใช้ข้อมูลจาก List จะใช้หมายเลข (ชื่อเป็นทางการคือ index) ในการเข้าถึง

คนที่เขียนโปรแกรมด้วยภาษาอื่นมา จะสังเกตว่า List ของ Dart มันละม้ายคล้าย Array ม๊ากมาก

ถูกต้อง เพราะ Array ในภาษา Dart ก็คือ List นั่นเอง

ลองดูตัวอย่างการใช้งานด้านล่างได้จ้า

var nextflowCourse = ['Blockchain', 'Google Flutter', 'React', 'MEAN'];
print(nextflowCourse[0]); // Blockchain
print(nextflowCourse[1]); // Google Flutter
print(nextflowCourse[3]); // React
print(nextflowCourse[4]); // MEAN
print(nextflowCourse.length); // 4

 

Maps ใช้เป็นป้ายช่ือ (Key-value)

Maps ในภาษาโปรแกรมมิ่งอื่นๆ จะคล้ายคลึงกับ Dictionary หรือ Hash

สำหรับกระเป๋า Maps นั้นจะใช้เป็นการตั้งชื่อแทนตัวเลข เหมาะกับการเก็บข้อมูลโดยอาศัยชื่อเป็นตัวเรียกใช้ข้อมูล

var nextflowTrainingCourseMap = {
  'Mobile App': ['Google Flutter','Ionic', 'React Native']
  , 'Web App': ['Angular 6', 'MEAN Stack', 'Meteor']
  , 'Blockchain': ['Ethereum']
};

nextflowTrainingCourseMap['Mobile App']; // ['Google Flutter','Ionic', 'React Native']

nextflowTrainingCourseMap['Blockchain']; // ['Ethereum']

nextflowTrainingCourseMap.containsKey('Mobile App'); // true

 

Set คือถุงดีๆ นี่เอง

Set ในภาษา Dart จะมีรูปแบบการเก็บที่แตกต่างกันออกไป นั่นคือ

1. ไม่เรียงลำดับ เหมือนโยนของลงไปในถุงใหญ่ๆ
2. ของในถุงจะต้องไม่ซ้ำกัน

var nextflowCourses = Set();
nextflowCourses.addAll(['Google Flutter', 'MEAN Stack', 'React', 'Banana']);

print(nextflowCourses.length); // 4

nextflowCourse.remove('Banana');
print(nextflowCourses.length); // 3

print(nextflowCourses.contains('Google Flutter')); // true

 

สนใจเรียน Google Flutter ตั้งแต่เริ่มต้น จนถึงได้แอพ สำหรับองค์กร

โค้ชพลได้ใช้งาน Google Flutter มาตั้งแต่ช่วง Alpha จนถึงตอนนี้เป็น Release Preview 1 แล้ว ระหว่างทางก็ได้ประสบการณ์มากมาย สามารถแชร์ให้เพื่อนพี่น้องที่สนใจเอาเทคโนโลยีนี้ไปทำโปรเจคของตัวเองได้

ถ้าสนใจอยากฝึกทีมในบริษัทของเราให้พร้อมในการทำงาน ด้วยเนื้อหาเข้าใจง่าย ประสบการณ์จริงจากคนทำแอพจริง ติดต่อสอบถามได้ตามช่องทางต่อไปนี้ หรือกดดูรายละเอียดได้ก่อนจ้า

• โทรติดต่อ 083-071-3373
• ทักมาทาง Facebook
• ทักมาทาง Line