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

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

[thetext]Unary Operator[/thetext]

เพื่อนๆสังเกตกันไหมครับว่า ก่อนหน้านี้ 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 แทน

[thetext]Assignment Operators[/thetext]

เอาละหวา 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

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

[thetext]Boolean Operators[/thetext]

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

• false
• null
• undefined
• “” (an empty string)
• 0
• Nan (สิ่งที่คุณจะได้รับ กรณีที่ว่คุณพยายามบวก หรือ ลบ หรืออะไรก้แล้วแต่ ระหว่างตัวเลขกับ ค่าอย่างอื่นที่ไม่ใช่ตัวเลข)

</pre>
<pre>var a= "a string";
alert (!a);// false
alert(!!a);//true</pre>
</div>
<div>
<pre>

</pre>
<pre>var a = true;
var b = false;

alert( a&&b); //false
alert(a||b);//</pre>
</div>
<div>
<pre>

</pre>
<pre>var day = 14, year =2011;

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

alert(day < 20  && year >=2010); //true</pre>
</div>
<div>
<pre>

• Facebook
• Twitter
• Line