ลำดับความสำคัญ operators/JavaScript
JavaScript (Operator Precedence) คือ ลำดับความสำคัญ ที่ตัวดำเนินการ (operators) ต่างๆ ใน JavaScript จะถูกประเมวลผลเมื่อมีตัวดำเนินการหลายตัวอยู่ในนิพจน์ (expression) เดียวกัน ⚙️.
ความรู้เรื่องนี้มีความสำคัญอย่างยิ่งในการเขียนโค้ด JavaScript ที่ถูกต้อง เพราะมันจะกำหนดว่าส่วนใดของนิพจน์จะถูกคำนวณก่อน และส่วนใดจะถูกคำนวณทีหลัง ซึ่งส่งผลต่อ ค่าสุดท้าย ของนิพจน์นั้นๆ ครับ/ค่ะ.
หลักการทำงานและตัวอย่าง
ลำดับการประมวลผล
ใน JavaScript, ตัวดำเนินการแต่ละประเภทจะมีลำดับความสำคัญของตัวเอง:
ลำดับสูง: จะถูกประมวลผลก่อน เช่น วงเล็บ (), การเรียกใช้ฟังก์ชัน, ตัวดำเนินการ Unary (เช่น ++, --, !).
ลำดับกลาง: เช่น ตัวดำเนินการทางคณิตศาสตร์ (Arithmetic Operators) ได้แก่ การคูณ *, การหาร /, การบวก +, การลบ -.
ลำดับต่ำ: จะถูกประมวลผลทีหลัง เช่น ตัวดำเนินการเปรียบเทียบ (Comparison Operators) ได้แก่ ==, ===, >, <, และตัวดำเนินการกำหนดค่า (Assignment Operators) ได้แก่ =.
ตัวอย่างความแตกต่าง
พิจารณานิพจน์ต่อไปนี้:
let result=2+3∗4;
ถ้าไม่มี Operator Precedence (ประมวลผลจากซ้ายไปขวา):
2+3 จ ะได้ 5.
5∗4 จะได้ 20.
ตาม Operator Precedence ของ JavaScript:
การคูณ * มีลำดับความสำคัญสูงกว่าการบวก +.
ดังนั้น, 3∗4 จะถูกประมวลผลก่อน ได้ 12.
จากนั้น, 2+12 จะได้ 14 → นี่คือค่าที่ถูกต้อง.
การใช้วงเล็บ ()
คุณสามารถใช้ วงเล็บ () เพื่อ กำหนดลำดับความสำคัญ ด้วยตัวเองได้. วงเล็บมีลำดับความสำคัญสูงที่สุด (สูงสุดในบรรดา Operator Precedence) และจะทำให้ส่วนที่อยู่ในวงเล็บถูกประมวลผลก่อนเสมอ:
let result=(2+3)∗4;
2+3 ถูกประมวลผลก่อน เพราะอยู่ในวงเล็บ ได้ 5.
5∗4 ได้ 20.
การใช้วงเล็บช่วยให้โค้ดมีความชัดเจนและป้องกันความผิดพลาดจากความเข้าใจผิดในลำดับความสำคัญครับ
ลำดับตัวดำเนินการใน JavaScript (Operator Precedence) คือกฎที่กำหนดว่าตัวดำเนินการใดจะถูกประมวลผลก่อนเมื่อมีตัวดำเนินการหลายตัวในสมการเดียวกัน โดยทั่วไป ตัวดำเนินการที่มีลำดับความสำคัญสูงกว่าจะถูกประมวลผลก่อน เช่น ตัวคูณ (\(*\)) และตัวหาร (\(/\)) จะถูกประมวลผลก่อนตัวบวก (\(+\)) และลบ (\(-\)) เราสามารถใช้วงเล็บ (\(()\)) เพื่อเปลี่ยนลำดับการประมวลผลได้ .rPeykc.rWIipd{font-size:var(--m3t5);font-weight:500;line-height:var(--m3t6);margin:20px 0 10px 0}.f5cPye ul{font-size:var(--m3t7);line-height:var(--m3t8);margin:10px 0 20px 0;padding-inline-start:24px}.f5cPye .WaaZC:first-of-type ul:first-child{margin-top:0}.f5cPye ul.qh1nvc{font-size:var(--m3t7);line-height:var(--m3t8)}.f5cPye li{padding-left:4px;margin-bottom:8px;list-style:inherit}.f5cPye li.K3KsMc{list-style-type:none}.f5cPye ul>li:last-child,.f5cPye ol>li:last-child,.f5cPye ul>.bsmXxe:last-child>li,.f5cPye ol>.bsmXxe:last-child>li{margin-bottom:0} ลำดับความสำคัญของตัวดำเนินการ (จากสูงไปต่ำ) วงเล็บ: (\(()\)) เลขชี้กำลัง: (\(**\)) การคูณ: (\(*\)) และ การหาร (\(/\)) โมดูลัส: (\(\)) การบวก: (\(+\)) และ การลบ (\(-\)) ตัวดำเนินการเปรียบเทียบ: (\(<,>\) และอื่นๆ) ตัวดำเนินการตรรกะ: (\(!,&&,||\)) ตัวดำเนินการกำหนดค่า: (\(=,+=,-=\)) ตัวดำเนินการ (Operators) ในภาษา JavaScript - MarcusCode17 ส.ค. 2563 — และนี่เป็นตารางของตัวดำเนินการตรรกศาสตร์ในภาษา JavaScript. สัญลักษณ์ ตัวดำเนินการ ตัวอย่าง && Logical AND. a && b. || Logical OR. a |MarcusCodeไขข้อข้องใจเกี่ยวกับตัวดำเนินการ JavaScript: สัญลักษณ์นั้นหมายถึงอะไรแปลแล้ว — ประเด็นสำคัญ ตัวดำเนินการ JavaScript เป็นสัญลักษณ์พิเศษที่ดำเนินการกับตัวแปรและค่า ซึ่งมีความสำคัญต่อการคำนวณและการจัดการข้อมูล ตัวดำเนินการทางคณิตศาสตร์ได้แ...sitepoint.com ตัวอย่าง 3 + 4 * 5 จะได้ผลลัพธ์เป็น 23 เพราะ * มีลำดับความสำคัญสูงกว่า + (3 + 4) * 5 จะได้ผลลัพธ์เป็น 35 เพราะวงเล็บจะบังคับให้ + ทำงานก่อน * 2 + ++x จะประเมิน ++x ก่อน ดังนั้นถ้า x คือ 5, ++x จะกลายเป็น 6 และผลลัพธ์จะเป็น 2 + 6 = 8
ถ้าใครเจอข้อความ “หน้านี้ไม่ได้โหลด Google Maps อย่างถูกต้อง ดูคอนโซล JavaScript สำหรับรายละเอียดทางเทคนิค” ส่วนใหญ่ไม่ได้แปลว่าโค้ดพังอย่างเดียว แต่เป็นสัญญาณว่า Google Maps ฝั่งเบราว์เซอร์ถูกบล็อก/ตั้งค่าไม่ครบ ให้เริ่มจากการ “เปิด Console” ก่อนเลย (กด F12 > Console) แล้วดู error บรรทัดสีแดง เพราะมันจะบอกสาเหตุชัดกว่าข้อความบนแผนที่มาก 1) เช็ก error ที่เจอบ่อยที่สุด - Google Maps Platform rejected your request. This API project is not authorized…: มักเกิดจาก API key ไม่ถูกต้อง หรือยังไม่ได้ “ผูก key กับโปรเจกต์” - BillingNotEnabledMapError: ยังไม่เปิด Billing ใน Google Cloud Project - RefererNotAllowedMapError: จำกัดโดเมน (HTTP referrer) ไม่ตรงกับเว็บที่เรียกใช้งาน - ApiNotActivatedMapError: ยังไม่ได้ Enable “Maps JavaScript API” (หรือ API ที่เกี่ยวข้อง) 2) เช็ก API Key + เปิดใช้ API ให้ครบ ฉันมักไล่ทำตามลำดับนี้: - ไปที่ Google Cloud Console > เลือกโปรเจกต์ให้ถูก - APIs & Services > Library > ค้นหาและ Enable: “Maps JavaScript API” (ถ้าใช้ค้นหาสถานที่ให้เพิ่ม Places API ด้วย) - APIs & Services > Credentials > ตรวจว่าใช้ API key ตัวที่ถูกต้องจริง (บางทีเว็บอ้างอิง key เก่าค้างอยู่) 3) เปิด Billing (สำคัญมาก) ถ้าใน Console ขึ้นแนว BillingNotEnabledMapError ให้ไปที่ Billing แล้วผูกบัตร/บัญชีให้เรียบร้อย ถึงมี free credit แต่ยังต้องเปิด Billing ไม่งั้นโหลดไม่ขึ้น 4) ตั้งค่า Application restrictions (HTTP referrers) ถ้าขึ้น RefererNotAllowedMapError ให้เข้าไปที่ Credentials > API key > Application restrictions - เลือก HTTP referrers (web sites) - ใส่โดเมนให้ตรง เช่น https://example.com/* และถ้าใช้ www ก็ใส่ https://www.example.com/* ด้วย - ตอนทดสอบบน localhost ให้เพิ่ม http://localhost:* หรือ http://127.0.0.1:* (ตามที่ใช้งานจริง) 5) ตรวจรูปแบบการเรียกสคริปต์ Google Maps ตัวอย่างที่ฉันใช้แล้วเวิร์กบ่อย: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script> - callback ต้องมีฟังก์ชัน initMap อยู่จริง และต้องอยู่ใน scope ที่เข้าถึงได้ - ถ้า Console บอก initMap is not a function ให้เช็กว่าประกาศฟังก์ชันหลังโหลดสคริปต์หรือถูกซ่อนไว้ในโมดูล 6) ระวังการชนกันของสคริปต์/โหลดซ้ำ บางเว็บเผลอใส่ <script …maps/api/js…> ซ้ำ 2 ครั้ง ทำให้พฤติกรรมแปลกๆ หรือเกิด error ซ้อน ให้ค้นทั้งโปรเจกต์ว่ามีการ include ซ้ำหรือไม่ 7) ทิปการอ่าน Console แบบเร็ว ฉันจะดู “คำหลัก” ใน error ก่อน เช่น BillingNotEnabled / RefererNotAllowed / ApiNotActivated แล้วแก้ตามหมวดนั้นๆ จะเร็วกว่าไล่เดาสุ่ม ถ้าอยากให้ช่วยวิเคราะห์ได้ไว แนะนำคัดลอก error จาก Console มาทั้งบรรทัด (รวมรหัส error) แล้วบอกโดเมนที่ใช้งาน + วิธีที่เรียก Maps (script URL/โค้ด initMap) เดี๋ยวจะชี้จุดที่ผิดให้ตรงจุดได้เลย
🥰🥰🥰🥰