25
Oct

javascript จิ๊บจ๊อย # 6 Operator ภาคสอง

Category: Blog / 302 views

มาต่อกันที่ตอนที่ 6 นะครับ ครั้งที่แล้วผมเขียนถึง Operator สองตัวนะครับ ทีนี้มาดู Operator อื่นๆกันครับว่ามีอะไรบ้าง  บทความนี้จะเขียนเกี่ยวกับ Operator ที่เหลือให้หมดเลยนะครับ ดังนั้นอ่านแล้วสงสัยหรือไม่เข้าใจตรงไหน ให้โพสต์ถามได้นะครับ พร้อมจะก้าวเข้าสู่เนื้อหาต่อไปหรือยังครับ? ถ้าพร้อมแล้วก็เริ่มเลย

Unary Operator

เพื่อนๆสังเกตกันไหมครับว่า ก่อนหน้านี้ Operator ของเราล้วนแต่เอาไว้ใช้กับ ค่า สองค่า และมีอยู่สองฝั่ง มากระทำต่อกัน (เช่น บวก ลบ หรือเปรียบเทียบ)  สำหรับครั้งนี้มาดู Operator ที่กระทำกับค่าเพียงค่าเดียวกันครับ  ก่อนอื่น เราจะดูวิธีการเพิ่มค่าและลดค่า ก่อนครับ

ตัวอย่าง

var i=0;
i++;
alert(i); // 1

++i;
alert(i); //2

i--;
alert(i);//1

--i;
alert(i);//0

การใส่ “บวก-บวก”  ก่อนหรือหลังตัวเลข  จะเป็นการ “บวกหนึ่ง” เข้าไปให้กับตัวเลขนั้นครับ เช่นเดียวกันกับการใส่ “ลบ-ลบ” ก็จะเป็นการ “ลดออกไปหนึ่ง” จากตัวเลขนั้นๆ  อ้าว! แล้วมันต่างกันอย่างไรละ?  ใจเย็นๆครับ ฮ่าๆ  สิ่งที่แตกต่างระหว่างการใส่  “ก่อน” และ “หลัง” นั้นก็คือ  ถ้าใส่ก่อน เราจะทำการบวกค่าหนึ่งให้กับตัวค่านั้นก่อน แล้วค่อยนำไปใช้ ส่วนการใส่ทีหลังคือจะคืนค่าปัจจุบันก่อนแล้วค่อยบวก/ลบ ทีหลังครับ  อ่านดูอาจจะงงๆ ดูตัวอย่างกันดีกว่าไม๊

var n1=1, n2,n3;

n2=++n1;
console.log("num1: ",n1);//num1: 2
console.log("num2 : ", n2); //num2: 2

n3=n1++;
console.log("num1: ",n1);//num1: 3
console.log("num3: ",n3);//num3: 2

เอาละครับ ทีนี้มาดูบรรทัด

n2=++n1;

ถ้าคิดแบบให้เห็นภาพ บรรทัดนี้สามารถแยกวิธีคิดได้เป็นขั้นตอนแบบนี้ครับ

สังเกตดูนะครับ เราใช้ ++ นำหน้า นั่นหมายความ “ให้เราบวกหนึ่งให้ n1 ก่อนแล้วค่อยคืนค่า”
จากเดิม n1 มีค่าเท่ากับ 1 พอเจอบวกบวกอยู่ข้างหน้า หมายความว่า n1=(n1+1) นั่นเองครับ ซึ่งก็จะได้ค่า n1 ใหม่เป็น 2

จากนั้น ค่อยเอา n2 มาเท่ากับ ค่าของ n1 ตัวใหม่ ซึ่ก็จะได้ว่า n2=n1 นั่นก็คือ n2=2 นั่นเองครับผม  พูดอีกนัยหนึ่งก็คือ ถ้าเจอเครื่องหมายอยู่ข้างหน้า ให้เอาตัวข้างหลังมาบวก/ลบ ก่อนครับ แล้วค่อยไปจับเท่ากับตัวแปรด้านหน้า

ต่อมาดูกรณี เครื่องหมาย บวก-บวก อยู่ด้านหลังนะครับ

n3=n1++;

สำหรับบรรทัดด้านบน จริงๆแล้วจะมีขั้นตอนการคิดแบบนี้ครับ

จะเห็นว่า ขั้นตอนแรก มันจะจับ n3=n1 ก่อนเลยครับ ซึ่งจากเดินค่า n1 ของเราคือ 2 ดังนั้น บรรทัดนี้เราจะได้ n3 เป็นเท่าไหร่ครับ? ใช่แล้วครับ เท่ากับ 2 นั่นเอง
ต่อมา มันก็จะนำ n1 มาบวก หนึ่งครับ ซึ่งก็คือ n1 = n1+1  ซึ่งจากเดิม n1 มีค่าเป็น 2 พอถูกบวกด้วยหนึ่งก็จะมีค่าเป็น 3 นั่นเองครับ

สังเกตดูนะครับ ถ้า ++อยู่ด้านหน้าให้จับมาบวกก่อน แล้ว เท่ากับ   แต่ถ้าอยู่ด้านหลัง ให้เอาเท่ากับก่อน แล้วค่อยบวกครับ

นอกจากนี้ ยังมี Unary Operator อีกอย่างที่เราเรียกว่า typeof ครับ โอเปอเรเตอร์ตัวนี้จะคืนค่า “ชนิดของตัวแปร” นั้นๆครับ ดูตัวอย่างกัน

alert(typeof 10); // "number"
alert(typeof "test");// "string"
alert(typeof new Date() ); // "object"

ก็ไม่มีอะไรซับซ้อนครับ ลองพิมพ์ตามตัวอย่างดู ฮ่าๆ มีอยู่อย่างเดียวที่โอเปอเรเตอร์ตัวนี้ไม่ระบุชนิดของตัวแปร นั่นก็คือ Array ครับ เพราะว่ามันจะเรียกเป็น object แทน

Assignment Operators

เอาละหวา Operator ตัวนี้เป็นการใช้เครื่องหมาย + – * / %  ควบคู่กับการใช้เครื่องหมายเท่ากับครับ หลักการคิดไม่ยากครับ ลองดูตัวอย่างเนาะ

var num=10;
num +=5;  // same as num = num+5
alert(num); //15

num -=3; // ก็คือ num = num-3 นั่นเอง
alert(num); // 12

num *=2; // ก็คือ num = num*2 นั่นแหล่ะ
alert(num); // 24

num /=6; // ก็คือ num = num/6 อ่ะครับ
alert(num); // 4

num %=3; // ก็คือ num = num % 3 เด้อ
alert(num); // 1

ถ้าดูจากตัวอย่างก็น่าจะเข้าใจนะครับ เพราะว่าหลักการมันง่ายนิดเดียวครับ ^^

Boolean Operators

เอาละครับ มาถึงตัวสุดท้ายแล้ว เย่ๆ  Boolean Operator มีไว้สำหรับทดสอบค่าความจริงครับ ก็คือเช็คว่าจริงหรือเท็จนั่นเอง ทุกๆค่าใน Javascript สามารถนำมาวิเคราะห์เป็น boolean ได้ทั้งนั้นครับ บางค่าอาจจะเป็นจริง บางค่าอาจจะเป็นเท็จ สำหรับ Operator ตัวนี้ เราจะได้เห็นบทบาทความสำคัญของมันมากยิ่งขึ้นในบทต่อๆไปครับ สำหรับตอนนี้ขอให้รู้เพียงแค่ว่า ตัวต่อไปนี้ ถึงค่าที่เป็น เท็จ

  • false
  • null
  • undefined
  • “” (an empty string)
  • 0
  • Nan (สิ่งที่คุณจะได้รับ กรณีที่ว่คุณพยายามบวก หรือ ลบ หรืออะไรก้แล้วแต่ ระหว่างตัวเลขกับ ค่าอย่างอื่นที่ไม่ใช่ตัวเลข)
ส่วนค่าอื่นๆ ก็มีค่าความจริงเป็นจริงหมดครับโอเคตอนนี้มาดู Boolean Operators กันต่อ อย่างแรกเรเราจะมารู้ัจัก NOT ครับ คำว่า not แปลว่าอะไรครับ? ศัพท์ระดับประถมเนาะ น๊อต ก็แปลว่าไม่นั่นเองครับ NOT TRUE ก็คือ ไม่จริง (หรือ False นั่นเอง)  NOT FALSE ก็คือ ไม่เท็จ (หรือ True นั่นแหล่ะคับ) พูดอีกนัยหนึ่งก็คือ NOT จะให้ค่า “ตรงกันข้าม” ครับ
ตัวอย่าง
</pre>
<pre>var a= "a string";
alert (!a);// false
alert(!!a);//true</pre>
</div>
<div>
<pre>
จำที่ผมบอกข้างต้นได้ไหมครับ ว่าค่าใดบ้างที่มีค่าความจริงเป็นเท็จ ถ้าจำไม่ได้ก็ย้อนกลับไปดูบรรทัดด้านบนครับ  จากตัวอย่าง เราได้ a เป็นค่า สตริง ดังนั้น ค่าของมันมีค่าความจริงเป็น “true” ครับ แต่พอเรามาใช่ ! ข้างหน้า ซึ่งเป็นสัญลักษณ์ของ NOT นั่นเองครับ ก็คือ !a หมายความว่า NOT a นั่นเอง  จากตอนแรก a มีค่าความจริงเป็น true พอมาเจอ ! มันก็เลยตรงกันข้ามกับค่าเดิม ซึ่งก็จะได้เป็น False ครับ  ต่อมาบรรทัดที่สาม มันก็มาเจอ ! อีกครั้ง ครั้งนี้ ก็เปลี่ยนจาก False เป็น NOT FALSE ซึ่งก็คือ True นั่นเองครับ  เวลาคิดให้ทำจากขวาไปซ้ายนะครับ ทีละเสต็ปๆ ^^ เรื่องนี้ไม่ยากครับ
เอไหนๆ ก็พูดถึง NOT แล้ว ผมก็กระสันต์อยากพูดถึงสองตัวนี้หน่อยคับ นั่นก็คือ AND และ OR นั่นเอง  แต่ว่า AND กับ OR ต้องใช้ค่าสองค่ามากระทำต่อกันเด้อ  ดูตัวอย่างครับ
</pre>
<pre>var a = true;
var b = false;

alert( a&&b); //false
alert(a||b);//</pre>
</div>
<div>
<pre>
มันทำงานอย่างไร? อาจจะมีบางคนสงสัย และมันมีประโยชน์อันใดเล่า? หลายคนคงกังขา  สำหรับตัวแรกนะครับ เครื่องหมาย && เป็นเครื่องหมายแทน AND Operator ครับ มันจะคืนค่า True ก็ต่อเมื่อทั้งสองข้างของมันมีค่าความจริงเป็น จริงทั้งคู่  เอ.. ลองยกตัวอย่างให้เข้าใจ AND OPERATOR ให้มากขึ้นดีกว่ายกตัวอย่างเช่น บักสนตั้งเงื่อนไขไว้ว่า ผมจะแต่งงานกับพอลล่า ถ้าพอลล่า รวยและเซ็กซี่
นั่นหมายความว่า พอลล่ารวยอย่างเดียวแต่ไม่เซ็กซี่ ผมจะแต่งงานด้วยไหมครับ คำตอบก็คือไม่ ( T && F = F)
พอลล่าจนแต่เซ็กซี่ บักสนก็ไม่สนใจอยู่ดี ผมรีเคว็สสองคุณสมบัตินี่นา ผลลัพธ์ก็จะเป็น F
พอลล่าจนและไม่เซ็กซี่ โอ้ย!! หนีไปไกลๆเลย ยัยพอลล่า คุณสมบัติไม่ผ่านสักอย่าง อย่าได้ริจะได้กินบักสน 55+
พอลล่าสวยและเซ็กซี่ บักสนรีบตะครุบเลยครับ แต่งงานทันที   นี่แหล่ะครับ การใช้ AND จะได้ค่าเป็น True ก็ต่อเมื่อทั้งสองข้างมีค่าความเป็นจริงทั้งคู่ต่อมา OR  OPERATOR ตัวนี้ จะคืนค่าเป็นเท็จ ก็ต่อเมื่อ เป็นเท็จทั้งคู่เท่านั้น  ถ้าเป็นเท้จเพียงแค่อย่างเดียว มันก็ยอมรับได้  ยกตัวอย่างบักสนจะจูบพอลล่า  ถ้าพอลล่า สวย หรือ รวย
กรณีที่ พอลล่า สวย แต่ไม่รวย  ก็ไม่เป็นไร ยอมรับได้ เพราะเธอมีคุณสมบัติผ่านหนึ่งข้อ ก็เลยได้ค่าความจริงเป็น T
กรณีที่ พอลล่า ไม่สวย แต่รวย  ก็ไม่เป็นไร เงินซื้อทุกอย่างได้เสมอ เธอก็มีคุณสมบัติผ่านอยู่หนึ่งข้อ บักสนจูบได้  ค่าความจริงก็ T
กรณีที่ พอลล่า ทั้งสวย และ รวย  บักสนประโคมจูบอย่างดูดดื่ม เพราะเธอคือหญิงในฝัน  ค่าความจริงก็ T
กรณีที่ พอลล่า ขี้เหร่ และั ยากจน  บักสน ไม่หันไปมองให้เสียเวลา อย่ามาใกล้ผมนะ!!!  55  ก็จะได้ค่าความจริงเป็น F
ทีนี้มาดูตัวอย่างในภาษาโปรแกรมกันดู ไม่ยากหรอกครับ
</pre>
<pre>var day = 14, year =2011;

alert(day >10 || year ===2011); // true

alert(day < 20  && year >=2010); //true</pre>
</div>
<div>
<pre>
ก็จะเห็นว่าตัวแรก ทำการเช็คว่า day มากกว่าสิบจริงหรือเปล่า ซึ่ง day มีค่า 14 มันก็มากกว่าสิบอยู่แล้ว ด้านซ้ายเลยตอบ จริง  ต่อมาด้านขวา year เท่ากับ 2011 จริงปะ อ่า ก็เห็นๆอยู่ว่าจริงๆ ดังนั้น จริงและจริง ก็เลยได้ จริงครับ  อีกบรรทัดก็คิดทำนองเดียวกันโอ้โห บทความเรื่อง Operator ก็จบแล้วนะครับ ยาวอยู่เหมือนกัน หวังว่าจะช่วยให้เพื่อนๆที่เข้ามาอ่านได้มีความรู้เกี่ยวกับ javascript เพิ่มขึ้นนะครับ แล้วเจอกันใหม่เด้อ

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours