การสร้าง Ranges (ช่วงข้อมูล) ด้วย JavaScript

บ่อยครั้งที่เขียนฟังก์ชันต้องการสร้าง ranges (ช่วงข้อมูล) เพื่อทำงานกับ data Range แทนข้อมูลใน array/object ด้วยค่าเริ่มต้นและค่าสิ้นสุด

หลายภาษามี built-in method เช่น Ruby ('a'..'e').to_a # => ["a","b","c","d","e"] แต่ JavaScript ไม่มี built-in สำหรับ range มีหลายวิธีสร้างเอง 3 วิธีดังนี้

1. _.range() - Lodash Library

ใช้ _.range() ของ Lodash สร้าง range ตัวเลขได้เร็วที่สุด คืนค่า array รับ 3 arguments: start, end (up to), step (increment)

_.range(-2);      // => [0, -1]
_.range(1, 3);    // => [1, 2]
_.range(1, 10, 4); // => [1, 5, 9]

ถ้าใส่ 1 argument จะสร้าง range จาก 0 ถึงตัวเลขนั้น (ไม่รวม) ต้องติดตั้ง Lodash แยกต่างหาก

2. สร้าง range() function เอง (ตัวเลข)

ประหยัด overhead ไม่ต้อง import library

function range(start, end, step = 1) {
  if (start === end) return [start];
  const range = [];
  for (let i = start; i <= end; i += step) {
    range.push(i);
  }
  return range;
}

range(1, 10, 4); // => [1, 5, 9]
range(1, 10);    // => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3. สร้าง Non-number Range Function (ตัวอักษร)

ใช้ charCodeAt() แปลงตัวอักษรเป็นรหัสตัวเลข เพิ่มค่า แล้ว String.fromCharCode() แปลงกลับ

function charRange(start, stop) {
  const range = [];
  const end = stop.charCodeAt(0);
  for (let i = start.charCodeAt(0); i <= end; i++) {
    range.push(String.fromCharCode(i));
  }
  return range;
}

charRange('A', 'F'); // => ['A', 'B', 'C', 'D', 'E', 'F']

สรุป

ตอนนี้คุณรู้วิธีสร้าง ranges เองใน JavaScript แล้ว บันทึกฟังก์ชันเหล่านี้ไว้ จะประโยชน์ในอนาคตแน่นอน!