Jaynarol Blog

ว่าด้วยเรื่อง ES6 : For, Structures, Methods

วันนี้มาต่อเรื่องเกี่ยวกับ Structures แบบใหม่ๆ ใน ES6 (ที่มีมานานแล้วในภาษาอื่น 555+)

รวมถึงการใช้งาน For-Of ในรูปแบบต่างและ Methods ใหม่ๆที่ช่วยสนันสนุนการเขียนโปรแกรมของเราครับ

 

For-of Operator

ลูปแบบ For-Of นั้นช่วยให้เราเข้าถึงข้อมูลใน Array และ Structures ต่างๆได้สะดวกขึ้นกว่าเดิม

และที่สำคัญที่สุดคือโค้ดอ่านง่ายขึ้นมากๆ 🙂

ในหัวข้อนี้ผมจะยกตัวอย่างการใช้ For-Of ในการเข้าถึงตัวแปรชนิดต่างๆ และเปรียบเทียบกับ For-In ว่าต่างกันอย่างไร

 

Iterating over an Array

การลูป Array ด้วย For-Of ช่วยให้โค้ดเราดูหล่อขึ้นจริงๆ

 

 

Iterating over a String

สามารถใช้ For-Of แตก String เป็น Char ได้ด้วย

 

 

Difference between For-of and For-in

ความแตกต่างของ For-Of และ For-In คือค่าที่ได้จากการลูป

For-Of จะคืนค่าที่เป็น Value แต่ For-In คืนค่าที่เป็น Index ครับ

นอกจากนี้ For-Of ยังคืนค่าเฉพาะที่ตรงกันกับ Type ของตัวแปรเท่านั้น

อย่างในตัวอย่าง foo ซึ่งเป็น Property ของ iterable ซึ่งไม่ใช่ Array จะหลุดออกมาด้วยใน For-In

ดังนั้น For-Of ช่วยลดข้อผิดพลาดที่เราไม่ได้ตั้งใจหรือคาดไม่ถึงด้วยครับ

 

 

New Structures

 

Set Data-Structure

ใน ES6 เราสามารถใช้ Set ในการเก็บค่าได้แล้ว การอ้างสมาชิก Set ต้องอ้างโดยระบุ Index ของสมาชิก

ดูๆไปมันก็คล้ายๆ Array แต่ว่า Set จะมีฟังชั่นอำนวยความสะดวกอื่นๆเพิ่มมาให้ ที่สำคัญคือโค้ดสะอาดครับ

และ For-Of ก็สามารถใช้กับ Set ได้ด้วยครับ

 

 

Map Data-Structure

ในส่วนของ Map ก็คล้ายๆกับ Set เพียงแต่เราสามารถใช้ String ต่างๆเป็นคีย์ได้

และสิ่งที่ทำให้ Map แตกต่างต่างจาก Array แบบชัดเจน คือเราสามารถใช้พวก Object เป็นคีย์ได้ด้วยครับ

พร้อมทั้งยังมี Method ที่คอยอำนวยความสะดวกและแน่นอนว่านำไปลูปด้วย For-Of ได้ด้วย

 

 

Weak-Link Data-Structures

Weak Structure นี่เป็นฟีเจอร์ใหม่ที่เพิ่งเกิดมาใน ES6 โดยเฉพาะ โดยจะมีทั้ง WeakSet และ WeakMap

ซึ่งมันทำงานคล้ายๆกับ Set และ Map ปกติมากๆ แต่สิ่งที่ทำให้มันแตกต่างมีดังนี้

  1. Index ของ WeakMap ต้องเป็น Object เท่านั้น แต่ Map ใช้ String และ Number ได้ด้วย
  2. WeakMap ไม่มี Method size (สำหรับตรวจสอบจำนวนสมาชิก) และอื่นๆเหมือน Map
  3. WeakMap ไม่สามารถทำงานบนลูป For-Of ได้

ดูเหมือนมีแต่ข้อเสียแล้วจะมี Weak Structure มาทำไมละ? คำตอบก็คือ ป้องกัน Memory Leak ครับ

จากในโค้ดด้านล่างเราจะเห็นว่า ตัวแปร map และ weak map ได้ถูกเรียกใช้ใน anonymous function

ซึ่งเป็น function สำหรับเรียกใช้ครั้งเดียว เมื่อทำงานเสร็จมันไม่ควรอยู่ใน memory ต่อไปเพราะเราอ้างถึงมันไม่ได้แล้ว

แต่เนื่องจาก Map ยังมีการเชื่อมโยงกับส่วนนั้นอยู่จึงทำให้โปรแกรมไม่สามารถคืนความจำส่วนนี้ได้และเป็นต้นเหตุของ Memory Leak

ต่างจาก WeakMap ซึ่งถ้าอ่านตามชื่อมัน Weak แปลว่าอ่อนแอ ในโครงสร้างมันจะเชื่อมโยงกันอยู่อย่างอ่อนๆ

และจะไม่เข้าไปยุ่งกับ Memory โดยตรง จุดนี้เองทำให้ส่วนที่มันเข้าไปยุ่งยังสามารถคืนส่วนความจำที่ไม่ใช้แล้วได้

ผลคือไม่เกิด Memory Leak ครับ

 

 

New Built-In Methods

 

Object Property Assignment

Method ใหม่สำหรับ Object ช่วยให้สามารถนำ Object ตัวอื่นๆมา  Merge เข้ากับตัวต้นทางแบบชิวๆได้เลย

 

 

Array Element Finding

Method ตัวนี้สำหรับใช้กับ Array ช่วยให้เราหาค่าที่ต้องการใน Array คล้ายๆกับ Filter

แต่ต่างกันตรงที่เมื่อ Find เจอข้อมูลตรงตามเงื่อนไขมันจะคืนค่าออกมาและหยุดทำงานทันที

แต่ Filter จะทำงานต่อจนครบทุก node และได้ค่าออกมาเป็น Array ทั้งชุด

การเลือกใช้ก็แล้วแต่สถานการณ์ครับ

ถ้าต้องการค่าเดียวก็ใช้ Find ได้เลยไม่เปลือง performance ในการลูป node ที่เหลือ

 

 

String Repeating

Method ตัวใหม่สำหรับ String ช่วยให้ String ให้ทำซ้ำข้อมูลในตัวมันเองได้ตามจำนวนที่ต้องการ

 

 

String Searching

Method ชุดใหม่สำหรับ String ช่วยด้านการค้นหาไม่ต้องใช้ IndexOf ให้โค้ดอ่านยากอีกแล้ว

 

 

Number Type Checking

ใช้ตรวจสอบรูปแบบค่าต่างๆของตัวเลข เช่นพวกค่า Nan ซึ่งหมายถึงค่าที่ผิดพลาดทางคณิตศาสตร์

หรือใช้ตรวจสอบค่าตัวเลขว่ามีขอบเขตหรือไม่ (ไม่ใช่ Infinity)

*Nan จะไม่เท่ากับค่าอะไรเลยแม้แต่ตัวมันเอง

 

 

Number Safety Checking

ใช้สำหรับตรวจสอบค่าตัวเลขว่ายังอยู่ในขอบเขตของ int หรือไม่

*ค่าสูงสุดของ Integer ใน Javascript คือ 9007199254740991 ดูได้จาก Number.MAX_SAFE_INTEGER

 

 

Number Truncation

Method สำหรับใช้ปัดเศษทิ้ง

 

 

Number Sign Determination

ใช้สำหรับตรวจสอบเลขต่างรวมถึง 0 ว่าเป็นค่าติดลบหรือไม่

 

 

ปิดท้าย

รอบนี้ใช้พลังงานไปกับการหาข้อมูลเรื่อง Weak Structor พักใหญ่ๆ เลย ขนาดเว็บฝรั่งยังมีเถียงและให้ข้อมูลไม่ตรงกัน

กว่าจะทำความเข้าใจและทดสอบจนชัว เล่นเอาเหนื่อย

เอาเป็นว่าเจอกันใหม่บทความหน้าครับ…