Javascript

javaScript ฟังก์ชั่นสำหรับตรวจสอบข้อมูลที่ต้องการในอะเรย์ว่ามีหรือไม่

วัชรเมธน์ ศรีเนธิโรทัย 07/10/2553

ในภาษา 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 ; }

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' ); }

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' ); }

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 ; }

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' ); }

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 ; }

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' ); }

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' ); }

Share this:

• Tweet

Like this:

Like Loading...

Array check array Javascript

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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

Javascript

Schedule Post

Prev Post

Javascript

วิธีการใส่ภาพเข้าไปในบทความ

Next Post

7 comments

• Reply

  

  kongtoonarmy says:

  07/10/2553 at 07/10/2553

  Array.prototype.exists

  หมายความว่าไงครับ งงเล็กน้อย

• Reply

  

  iPong says:

  08/10/2553 at 08/10/2553

  ประมาณ JavaScript framework ครับพี่น้อง เป็นตัวพื้นฐานที่ไหนก็มีทำนองนั้น

• Reply

  

  loso says:

  11/10/2553 at 11/10/2553

  เยี่ยมครับท่าน

• Reply

  

  lensmmfbuy says:

  12/10/2553 at 12/10/2553

  ขอบคุณครับ

• Reply

  

  PP says:

  14/10/2553 at 14/10/2553

  ขออนุญาต comment นิดนึงนะครับ
  กรณีนี้ เพิ่ม method ให้กับ Array จะมีข้อสังเกตุตรงที่ หากใช้คำสั่ง for..in มันจะ loop เอาชื่อที่เราเพิ่มเข้าไปมาด้วย ยกตัวอย่างเช่น
  1 เพิ่ม method exists ให้กับ object Array
  2 สร้าง Array มีข้อมูลดังนี้ var arr = [1,2,3];
  3 ถ้าใช้คำสั่ง for..in วนแสดงค่าออกมาจะได้ 1 2 3 และ exists ซึ่งอาจทำให้โปรแกรมผิดพลาดได้ (ถ้าไม่ได้เช็คเพิ่มเติม)

  ก็แค่ข้อสังเกตุนะครับ..อย่าถือสา หรือใครมีความเห็นอย่างไรมั๊ยครับ ติชมกันได้

  ขอบคุณมากครับ

• Reply

  

  administrator says:

  14/10/2553 at 14/10/2553

  ผมได้ลองนำคำแนะนำของคุณ PP ไปทดสอบโดยการเขียนโค้ดขึ้นมาชุดหนึ่ง

  Array.prototype.exists = function( SearchFor ) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) return true ; }   return false ; }   var arr_fruits = new Array( 'Apple' , 'Mango' , 'Rambutan' );   for each( arr_fruit in arr_fruits) { document.write( '< pre >' + arr_fruit + '</ pre >' ); }

  Array.prototype.exists = function( SearchFor ) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) return true ; } return false ; } var arr_fruits = new Array( 'Apple' , 'Mango' , 'Rambutan' ); for each( arr_fruit in arr_fruits) { document.write( '< pre >' + arr_fruit + '</ pre >' ); }

  ผลที่ได้ของโค้ด

  Apple   Mango   Rambutan   function (SearchFor) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) { return true; } } return false; }

  Apple Mango Rambutan function (SearchFor) { for (var i = 0; i < this.length; i++) { if (this[i] == SearchFor) { return true; } } return false; }

  แทนที่มันจะออกมาเฉพาะผลไม้ จะเห็นว่ามันติด function (SearchFor) มาด้วย เป็นจริงดังที่คุณ PP ว่าไว้ทุกประการ ฉะนั้นก็ได้โปรดระมัดระวังในการใช้งานกันให้ดี

  ขอบคุณคุณ PP ด้วยใจจริง ถ้าไม่บอกก็จะไม่รู้เลย เมื่อใช้งานแบบไม่รู้ เกิดเออเร่อขึ้นมาหายากน่าดู

• Reply

  

  PmChin says:

  12/09/2555 at 12/09/2555

  เป็นการแบ่งปันความรู้ของผู้มีความรู้เรื่องโค้ด นับว่ามีประโยชน์ดีมาก