ในภาษา PHP การตรวจสอบว่าข้อมูลที่ต้องการมีอยู่หรือไม่ใน Array เป็นเรื่องง่ายๆ ดั่งปอกทุเรียนเข้าปาก เราใช้ฟังก์ชั่น in_array() เป็นตัวตรวจสอบ แค่ฟังก์ชั่นเดียวเอาอยู่
แต่ใน javaScript ไม่ง่ายอย่างนั้น ผมจึงนำฟังก์ชั่นสำหรับตรวจสอบข้อมูลที่ต้องการในอะเรย์ว่ามีหรือไม่ เผื่อท่านจะได้ไม่ต้องไปนั่งคิด ประหยัดเวลาในการเขียนโปรแกรมขึ้นอีกนิดหน่อย และในตอนท้ายเรื่อง ผมจะแนะนำวิธีการเขียน javaScript ในเชิงออบเจ็ก ซึ่งมันมิใช่เรื่องยากเย็นแต่ประการใด ง่ายๆแต่ได้ไฮโซ
function Search_Array(ArrayObj, SearchFor) { for (var i = 0; i < ArrayObj.length; i++) { if (ArrayObj[i] == SearchFor) return true ; } return false ; } |
ฟังก์ชั่นนี้จะรอรับอะเรย์และคำที่ต้องการค้นหา จากนั้นจึงนำไปวนลูปเทียบค่าแต่ละตัวในอะเรย์ ว่ามีตรงกับสิ่งที่ต้องการค้นหาบ้างหรือไม่ ถ้ามี จะคืนค่ากลับมาเป็น true แต่ถ้าไม่มีจะคืนค่ากลับมาเป็น false
var arr_fruit = new Array( 'Apple' , 'Mango' , 'Rambutan' ); if( Search_Array( arr_fruit , 'Apple' ) ) { alert( 'Found' ); } else { alert( 'Not Found' ); } |
สร้างตัวแปรอะเรย์ผลไม้ขึ้นมาเพื่อเป็นการทดสอบ จากนั้นจึงให้ตรวจสอบในอะเรย์ว่ามีคำว่า Apple หรือไม่ ถ้ามีให้ดึ๋งคำว่า Found แต่ถ้าไม่มีก็ให้ดึ๋งคำว่า Not Found
โค้ดทั้งหมด
function Search_Array(ArrayObj, SearchFor) { for (var i = 0; i < ArrayObj.length; i++) { if (ArrayObj[i] == SearchFor) return true ; } return false ; } var arr_fruit = new Array( 'Apple' , 'Mango' , 'Rambutan' ); if( Search_Array( arr_fruit , 'Apple' ) ) { alert( 'Found' ); } else { alert( 'Not Found' ); } |
ผ่านไปสำหรับการเขียนโค้ดตรวจสอบข้อมูลที่ต้องการในอะเรย์แบบง่ายๆ
ทีนี้มาดูอีกวิธีนึง ซึ่งไฮโซกว่า เราจะโมดิฟายฟังก์ชั่นข้างบนนั่นแหละ ให้ออกแนวออบเจก เซิ่น………….
Array.prototype.exists = function( SearchFor ) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) return true ; } return false ; } |
เราเติมเมธอด exists เข้าไปในออบเจกต้นแบบ Array ของ javaScript เลย โดยส่งข้อมูลที่ต้องการค้นหาเข้าไป การทำงานก็จะเหมือนกับฟังก์ชั่นด้านบน แต่แตกต่างกันอยู่ตรงที่ this
เวลาใช้งาน
var arr_fruit = new Array( 'Apple' , 'Mango' , 'Rambutan' ); if( arr_fruit.exists( 'Apple' ) ) { alert( 'Found' ); } else { alert( 'Not Found' ); } |
จะเห็นว่า หลังจากที่เราได้ตัวแปร arr_fruit ซึ่งเป็น Array มาแล้ว เราก็เรียกใช้เมธอด exists ซึ่งเราเพิ่งยัดเยียดความเป็นสามีให้กับออบเจกต้นแบบไปสดๆร้อนๆ
ทีนี้มาถึงคำตอบของคำว่า this ในฟังก์ชั่นด้านบน ซึ่งก่อนหน้านี้ท่านอาจจะสงสัยว่า this มันมาได้ยังไง this มันจะหมายถึงตัวแปรที่เรียกใช้เมธอด นั่นเอง ถ้าเราจะเขียนฟังก์ชั่นด้านบนให้ดูง่าย ก็จะเป็นดังนี้
Array.prototype.exists = function( SearchFor ) { for (var i = 0; i < arr_fruit.length; i++) { if (arr_fruit[i] == SearchFor) return true ; } return false ; } |
this.length มันหมายความว่า arr_fruit.length ง่ายมะ แต่ท่านอย่าไปเขียนอย่างนี้นะ ผมแค่เขียนอธิบายให้ท่านเห็นภาพ เวลาใช้จริงจะต้องใช้ this.length เสมอ แนวทางในการเขียนแบบออบเจกนี้ ท่านยังนำไปประยุกต์ใช้กับออบเจ็กอื่นๆได้อีกเยอะ แนวการเขียนแบบนี้ฝรั่งนิยมเขียน
โค้ดทั้งหมด
Array.prototype.exists = function( SearchFor ) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) return true ; } return false ; } var arr_fruit = new Array( 'Apple' , 'Mango' , 'Rambutan' ); if( arr_fruit.exists( 'Apple' ) ) { alert( 'Found' ); } else { alert( 'Not Found' ); } |