รวม function ของ Array และวิธีการใช้งานใน Java Script

ในเขียนโปรแกรมทั่วไป ปกติเราก็ต้องยุ่งเกี่ยวกับตัวแปรประเภทที่เป็นชุดข้อมูลหรือ array นั่นเอง ซึ่งในทุกภาษาก็จะมีวิธีการจัดการ array ในรูปแบบที่แตกต่างกันแต่โดยแนวทางแล้วจะค่อยข้างคล้ายกัน ต่างกันที่คำสั่งและวิธีการใช้งาน บทความนี้เลยจัดการรวบรวม function ของ array ที่ใช้กันใน java script ให้อยู่ในรูปแบบที่เข้าใจได้โดยง่าย

1. วิธีการประกาศตัวแปรประเภท array มีอยู่ 2 วิธีคือแบบ new instance class Array กับ วิธีการใช้ json array ดังตัวอย่าง

วิธีแรกแบบ new instance
var arr = new Array();
ถ้าต้องการใส่ค่าตั้งต้นไปด้วยเลยก็ใช้
var arr = new Array('One', 'Two', 'Three');
วิธีที่สองแบบ json array
var arr = [];
ถ้าต้องการใส่ค่าตั้งต้นไปด้วยเลยก็ใช้
var arr = ['One', 'Two', 'Three'];

2. วิธีการเรียกใช้ข้อมูลที่อยู่ใน array เราสามารถเข้าถึงข้อมูลในตำแหน่งนั้นๆ ได้ด้วยการอ้างเป็นตัวเลขตำแหน่งที่อยู่ของชุดข้อมูลนั้น โดยเริ่มต้นที่ 0 ซึ่งจากตัวอย่างนั่นหมายถึง ตัวที่ 0 ของ ตัวแปร arr มีค่าเท่ากับ One

var arr = ['One', 'Two', 'Three'];
console.log(arr[0]); // result = One

3. วิธีดูขนาดของ array สามารถเรียกขนาดของ array ได้ผ่าน property ของตัวแปรที่ชื่อว่า length (ไม่ใช่ function นะครับไม่จำเป็นต้องมีวงเล็บ)

var arr = ['One', 'Two', 'Three'];
console.log(arr.length); // result = 3

4. วิธีเพิ่มข้อมูลเข้าไปใน array สามารถเพิ่มได้โดยการใช้ method ที่ชื่อว่า push จะเป็นการเพิ่มข้อมูลต่อท้ายเข้าไปใน array

var arr = ['One', 'Two', 'Three'];
arr.push('Four');
console.log(arr); // ["One", "Two", "Three", "Four"]

5. ถ้าต้องการเพิ่มข้อมูลเข้าไปใน array แบบระบุตำแหน่งหรือแทรกเข้าไปในตำแหนงที่ต้องการนั้น สามารถทำได้ผ่าน method ชื่อว่า splice โดยเป็น function ที่รับค่า parameter 3 ตัว ตัวแรกคือตำแหน่งที่ต้องการแทรกเข้าไป ส่วนตัวที่สองคือจำนวนที่ต้องการลบออก ตัวที่สามคือข้อมูลที่ต้องการแทรก(เนื่องจาก function นี้ สามารถทำได้ทั้ง add, replace, delete ได้ในตัวเดียวฉนั้น ผมขอแยก ตัวอย่างเป็น 3 อันนะครับ)

ตย.1 Add
var arr = ['One', 'Two', 'Three'];
arr.splice(0, 0, "Zero");  //ระบุ parameter 2 เป็น 0 จะเท่ากับการ add
console.log(arr);
ตย.2 Replace
var arr = ['One', 'Two', 'Three'];
arr.splice(0, 1, "Zero"); //ระบุ parameter 2 เป็น 1 จะเท่ากับการ Replace
console.log(arr);
ตย.3 Delete 
var arr = ['One', 'Two', 'Three'];
arr.splice(0, 1); //ระบุ parameter 2 เป็น 1 จะเท่ากับการ add และ ไม่ต้องระบุ parameter ที่ 3
console.log(arr);

6. อีก function สำหรับทำการเพิ่มข้อมูลเข้าไปใน array คือ function ชื่อ unshift รับ parameter 1 ตัว โดยทำงานต่างกับตัว splice คือจะเป็นการเพิ่มข้อมูลเข้าไปที่ตำแหน่งแรกเสมอ

var arr = ['One', 'Two', 'Three'];
arr.unshift('Zero');
console.log(arr); // ["Zero","One", "Two", "Three"]

7. ลบข้อมูลออกจาก array เราสามารถลบข้อมูลออกจาก array ได้ด้วยใช้ function pop เป็น function ที่ไม่รับค่า parameter วิธีการทำงานคือจะลบค่าสุดท้ายของ array ออกมา โดย function จะ return ค่าที่ลบออกมาให้เพื่อเราสามารถนำไปใช้ได้ ซึ่งรูปแบบการทำแบบนี้คือการทำงานแบบ stack คือมาทีหลังออกก่อน last in first out (สามารถเขาไปใช้เขียนส่งอาจารย์วิชา data structure and algorithm ได้นะแต่ไม่แน่ใจว่าเดี๋ยวนี้ยังมีสอนกันอยู่หรือเปล่านะครับ)

var arr = ['One', 'Two', 'Three'];
console.log(arr.pop()); // "Three"
console.log(arr); // ["One", "Two"]

8. ลบข้อมูลออกจาก array แบบต้องการเอาตัวแรกออก ทำงานในแบบ first in first out หรือ queue ผ่าน function shift ไม่มี parameter เช่นกัน return ค่าเป็นข้อมูลที่ถูกลบออกมา

var arr = ['One', 'Two', 'Three'];
console.log(arr.shift()); // "One"
console.log(arr); // ["Two", "Three"]

9. สำหรับวิธีการลบแบบระบุตำแหน่งสามารถใช้ผ่าน function splice โดยระบุ parameter ไป 2 ตัวดังตัวอย่าง

var arr = ['One', 'Two', 'Three'];
arr.splice(0, 1);
console.log(arr); // ['Two', 'Three']

10. ในกรณีที่เราต้องการเปลี่ยนแปลงค่าใน array เราสามารถจับค่ายัดใส่เข้าไปใน array ในตำแหน่งที่เราต้องการได้เลย หรือจะทำผ่าน function splice ก็ได้ ดังนี้

var arr = ['One', 'Two', 'Three'];
arr[0] = "Zero";
console.log(arr);
หรือ
var arr = ['One', 'Two', 'Three'];
arr.splice(0, 1, "Zero");
console.log(arr);

11. ในกรณีที่ต้องการเรียกข้อมูลทั้งหมดของ array มาใช้โดยปกติเราก็จะใช้การ วนลูป ดังตัวอย่าง

var arr = ['One', 'Two', 'Three'];
for(i=0; i<arr.length; i++){
    console.log(i, arr[i]);
}

หรือเรียกผ่าน function forEach ของ array เอง ซึ่งตัว function นี้รับ parameter เป็น function ที่รับ parameter 3 ตัว คือ 1 = ข้อมูลในลำดับนั้นๆ 2 = ลำดับ 3 = ข้อมูล array ทั้งหมด ดังตัวอย่าง

var arr = ['One', 'Two', 'Three'];
arr.forEach(function(item, index, rows){
    console.log(index, item);
});

12. การกรองข้อมูลของตัวแปร array เราสามารถกรองข้อมูลของ array ได้ผ่าน function filter โดย function นี้ จะรับ parameter 1 ตัว เป็น callback function ดังตัวอย่าง

var arr = ['One', 'Two', 'Three'];
arr.filter(function(item){
 if(item ==="Two"){
  return item;
 }
});
//result = ["Two"];

13. การเรียงข้อมูลใน array จะมี function สำหรับจัดเรียงข้อมูลให้เราแล้วชื่อว่า sort, reverse ดังตัวอย่าง

var arr = ['A', 'C', 'B'];
arr.sort(); // A, B, C
arr.reverse(); // C, B, A

14. ในกรณีที่ต้องการเรียงข้อมูลที่เป็นตัวเลขเราจำเป็นต้องเขียน callback function เพิ่มเข้าไปใน function sort เพื่อให้การเรียงข้อมูลอยู่ในรูปแบบที่ถูกต้อง

ในการเรียงปกติของ java script จะเป็นการเรียบแบบ string ดังนี้
var arr = [10, 1, 200, 35]
arr.sort(); // [1, 10, 200, 35] 
เราจึงต้องเพิ่ม function เข้าไปเพื่อให้การเรียงถูกต้อง ดังนี้
var arr = [10, 1, 200, 35]
arr.sort(function(a, b){
   return a-b}
); // [1, 10, 35 ,200]

สรุปแล้ว java script ได้เตรียม function ในการบริการจัดการ array มาให้ค่อนข้างครบถ้วนทำให้เราสามารถนำ array ไปใช้ได้อย่างสะดวกสบายโดยเฉพาะการเขียนโปรแกรมแบบ SPA (Single Page Application)