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

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

บทความน่าสนใจ

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

6 Comments

kongtoonarmy

Posted 07/10/2010 at 14:42 | Permalink

Array.prototype.exists

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

Log in to reply.
iPong

Posted 08/10/2010 at 13:54 | Permalink

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

Log in to reply.
loso

Posted 11/10/2010 at 09:49 | Permalink

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

Log in to reply.
lensmmfbuy

Posted 12/10/2010 at 20:56 | Permalink

ขอบคุณครับ

Log in to reply.
PP

Posted 14/10/2010 at 15:06 | Permalink

ขออนุญาต 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 ซึ่งอาจทำให้โปรแกรมผิดพลาดได้ (ถ้าไม่ได้เช็คเพิ่มเติม)

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

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

Log in to reply.
administrator

Posted 14/10/2010 at 15:18 | Permalink
ผมได้ลองนำคำแนะนำของคุณ 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 >' );
}
```
ผลที่ได้ของโค้ด
```
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 ด้วยใจจริง ถ้าไม่บอกก็จะไม่รู้เลย เมื่อใช้งานแบบไม่รู้ เกิดเออเร่อขึ้นมาหายากน่าดู
Log in to reply.