จาวาสคริปต์พิเศษ

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

โครงสร้างรหัส

คำสั่งคั่นด้วยเครื่องหมายอัฒภาค:

 alert('สวัสดี'); alert('โลก');

โดยปกติแล้ว ตัวแบ่งบรรทัดจะถือเป็นตัวคั่นด้วย ดังนั้นจึงใช้ได้เช่นกัน:

 alert('สวัสดี')
alert('โลก')

นั่นเรียกว่า "การแทรกอัฒภาคอัตโนมัติ" บางครั้งมันก็ไม่ได้ผล เช่น

 alert("จะมีข้อผิดพลาดเกิดขึ้นหลังจากข้อความนี้")

[1, 2].forEach(แจ้งเตือน)

แนวทางการเขียนโค้ดส่วนใหญ่ยอมรับว่าเราควรใส่เครื่องหมายอัฒภาคหลังแต่ละคำสั่ง

ไม่จำเป็นต้องใช้เครื่องหมายอัฒภาคหลังจากโค้ดบล็อก {...} และโครงสร้างไวยากรณ์มีเครื่องหมายอัฒภาคเหมือนลูป:

 ฟังก์ชัน ฉ() {
  // ไม่ต้องใช้เครื่องหมายอัฒภาคหลังจากการประกาศฟังก์ชัน
-

สำหรับ(;;) {
  // ไม่ต้องใช้เครื่องหมายอัฒภาคหลังการวนซ้ำ
-

…แต่แม้ว่าเราจะใส่เครื่องหมายอัฒภาค “พิเศษ” ที่ไหนสักแห่งได้ นั่นก็ไม่ใช่ข้อผิดพลาด มันจะถูกละเลย

เพิ่มเติมใน: โครงสร้างโค้ด

โหมดเข้มงวด

หากต้องการเปิดใช้งานคุณลักษณะทั้งหมดของ JavaScript สมัยใหม่อย่างสมบูรณ์ เราควรเริ่มสคริปต์ด้วย "use strict"

 'ใช้อย่างเข้มงวด';

-

คำสั่งจะต้องอยู่ที่ด้านบนของสคริปต์หรือที่จุดเริ่มต้นของเนื้อหาของฟังก์ชัน

หากไม่มี "use strict" ทุกอย่างยังคงใช้งานได้ แต่ฟีเจอร์บางอย่างทำงานในลักษณะ "เข้ากันได้" ที่ล้าสมัย โดยทั่วไปแล้วเราชอบพฤติกรรมสมัยใหม่มากกว่า

คุณสมบัติสมัยใหม่บางอย่างของภาษา (เช่น ชั้นเรียนที่เราจะศึกษาในอนาคต) เปิดใช้งานโหมดเข้มงวดโดยปริยาย

เพิ่มเติมใน: โหมดสมัยใหม่ "ใช้อย่างเข้มงวด"

ตัวแปร

สามารถประกาศได้โดยใช้:

• let

• const (คงที่, ไม่สามารถเปลี่ยนแปลงได้)

• var (แบบเก่าจะดูทีหลัง)

ชื่อตัวแปรอาจรวมถึง:

• ตัวอักษรและตัวเลข แต่อักขระตัวแรกต้องไม่ใช่ตัวเลข

• อักขระ $ และ _ เป็นเรื่องปกติ เทียบเท่ากับตัวอักษร

• อนุญาตให้ใช้ตัวอักษรและอักษรอียิปต์โบราณที่ไม่ใช่ภาษาละตินได้ แต่โดยทั่วไปจะไม่ใช้

ตัวแปรถูกพิมพ์แบบไดนามิก พวกเขาสามารถเก็บค่าใดๆ:

 ให้ x = 5;
x = "จอห์น";

มี 8 ประเภทข้อมูล:

• number ทั้งจำนวนจุดลอยตัวและจำนวนเต็ม

• bigint สำหรับจำนวนเต็มความยาวใดก็ได้

• string สำหรับสตริง,

• boolean สำหรับค่าตรรกะ: true/false ,

• null – ประเภทที่มีค่าเดียว null หมายถึง “ว่างเปล่า” หรือ “ไม่มีอยู่”

• undefined – ประเภทที่มีค่าเดียว undefined หมายถึง “ไม่ได้กำหนด”

• object และ symbol – สำหรับโครงสร้างข้อมูลที่ซับซ้อนและตัวระบุที่ไม่ซ้ำกัน เรายังได้เรียนรู้สิ่งเหล่านี้

ตัวดำเนินการ typeof ส่งคืนประเภทของค่า โดยมีข้อยกเว้นสองประการ:

 typeof null == "object" // ข้อผิดพลาดในภาษา
typeof function(){} == "function" // ฟังก์ชั่นได้รับการปฏิบัติเป็นพิเศษ

เพิ่มเติมใน: ตัวแปรและชนิดข้อมูล

ปฏิสัมพันธ์

เรากำลังใช้เบราว์เซอร์เป็นสภาพแวดล้อมการทำงาน ดังนั้นฟังก์ชัน UI พื้นฐานจะเป็น:

• prompt(question, [default])

• ถาม question และส่งคืนสิ่งที่ผู้เยี่ยมชมป้อนหรือ null หากพวกเขาคลิก "ยกเลิก"

• confirm(question)

• ถาม question และแนะนำให้เลือกระหว่างตกลงและยกเลิก ตัวเลือกจะถูกส่งกลับเป็น true/false

• alert(message)

• ส่ง message ออกมา

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

ตัวอย่างเช่น:

 ให้ชื่อผู้ใช้ = prompt("ชื่อของคุณ?", "อลิซ");
ให้ isTeaWanted = ยืนยัน ("คุณต้องการชาบ้างไหม?");

alert( "ผู้เยี่ยมชม: " + ชื่อผู้ใช้ ); //อลิซ
alert( "ต้องการชา: " + isTeaWanted ); // จริง

เพิ่มเติมใน: การโต้ตอบ: แจ้งเตือน แจ้ง ยืนยัน

ผู้ประกอบการ

JavaScript รองรับโอเปอเรเตอร์ต่อไปนี้:

• เลขคณิต

• ปกติ: * + - / , % สำหรับส่วนที่เหลือและ ** สำหรับยกกำลังของตัวเลขด้วย

  ไบนารีบวก + เชื่อมต่อสตริง และถ้าตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นสตริง อีกตัวหนึ่งจะถูกแปลงเป็นสตริงด้วย:

   การแจ้งเตือน( '1' + 2 ); // '12', สตริง
  การแจ้งเตือน( 1 + '2' ); // '12', สตริง

• การมอบหมายงาน

• มีการมอบหมายง่ายๆ: a = b และการรวมเช่น a *= 2

• ระดับบิต

• ตัวดำเนินการ Bitwise ทำงานกับจำนวนเต็ม 32 บิตที่ระดับบิตต่ำสุด: ดูเอกสารเมื่อจำเป็น

• มีเงื่อนไข

• ตัวดำเนินการเดียวที่มีสามพารามิเตอร์: cond ? resultA : resultB หาก cond เป็นความจริง จะส่งกลับ resultA มิฉะนั้น resultB

• ตัวดำเนินการเชิงตรรกะ

• ตรรกะ AND && และ หรือ || ทำการประเมินการลัดวงจรแล้วส่งคืนค่าที่หยุด (ไม่จำเป็น true / false ) ตรรกะไม่ ! แปลงตัวถูกดำเนินการเป็นประเภทบูลีนและส่งกลับค่าผกผัน

• ตัวดำเนินการรวมตัวแบบ Nullish

• ?? โอเปอเรเตอร์มีวิธีการเลือกค่าที่กำหนดจากรายการตัวแปร ผลลัพธ์ของ a ?? b คือ a เว้นแต่มันจะเป็น null/undefined แล้ว b

• การเปรียบเทียบ

• การตรวจสอบความเท่าเทียมกัน == สำหรับค่าประเภทต่าง ๆ จะแปลงเป็นตัวเลข (ยกเว้น null และ undefined ซึ่งเท่ากันและไม่มีอะไรอื่นใด) ดังนั้นค่าเหล่านี้จึงเท่ากัน:

   การแจ้งเตือน ( 0 == เท็จ ); // จริง
  การแจ้งเตือน ( 0 == '' ); // จริง

  การเปรียบเทียบอื่นๆ จะแปลงเป็นตัวเลขเช่นกัน

  ตัวดำเนินการความเสมอภาคแบบเข้มงวด === จะไม่ทำการแปลง เนื่องจากประเภทที่ต่างกันหมายถึงค่าที่ต่างกันเสมอ

  ค่า null และ undefined เป็นค่าพิเศษ: มีค่าเท่ากัน == ซึ่งกันและกันและไม่เท่ากับค่าอื่นใด

  การเปรียบเทียบมาก/น้อยจะเปรียบเทียบสตริงทีละอักขระ ส่วนประเภทอื่นๆ จะถูกแปลงเป็นตัวเลข

• ผู้ประกอบการรายอื่น

• มีอีกสองสามอย่าง เช่น ตัวดำเนินการลูกน้ำ

เพิ่มเติมใน: ตัวดำเนินการพื้นฐาน คณิตศาสตร์ การเปรียบเทียบ ตัวดำเนินการเชิงตรรกะ ตัวดำเนินการรวมศูนย์ '??'

ลูป

• เราครอบคลุมลูป 3 ประเภท:

   // 1
  ในขณะที่ (เงื่อนไข) {
    -
  -
  
  // 2
  ทำ {
    -
  } ในขณะที่ (เงื่อนไข);
  
  // 3
  สำหรับ (ให้ i = 0; i < 10; i ++) {
    -
  -

• ตัวแปรที่ประกาศในลูป for(let...) จะมองเห็นได้เฉพาะภายในลูปเท่านั้น แต่เรายังสามารถ let และนำตัวแปรที่มีอยู่กลับมาใช้ใหม่ได้

• คำสั่ง break/continue อนุญาตให้ออกจากการวนซ้ำทั้งหมด/ปัจจุบัน ใช้ป้ายกำกับเพื่อแยกลูปที่ซ้อนกัน

รายละเอียดใน: ลูป: while และ for.

ต่อไปเราจะศึกษาลูปประเภทต่างๆ มากขึ้นเพื่อจัดการกับวัตถุ

โครงสร้าง "สวิตช์"

โครงสร้าง "สวิตช์" สามารถแทนที่ได้หลายรายการ if ตรวจสอบ ใช้ === (ความเสมอภาคที่เข้มงวด) ในการเปรียบเทียบ

ตัวอย่างเช่น:

 ให้อายุ = prompt ('อายุของคุณ?', 18);

สวิตช์ (อายุ) {
  กรณีที่ 18:
    alert("ใช้งานไม่ได้"); // ผลลัพธ์ของ prompt เป็นสตริง ไม่ใช่ตัวเลข
    หยุดพัก;

  กรณี "18":
    alert("ใช้งานได้!");
    หยุดพัก;

  ค่าเริ่มต้น:
    alert("ค่าใดๆ ที่ไม่เท่ากับค่าข้างบน");
-

รายละเอียดใน: คำสั่ง "เปลี่ยน"

ฟังก์ชั่น

เราได้กล่าวถึงสามวิธีในการสร้างฟังก์ชันใน JavaScript:

1. การประกาศฟังก์ชัน: ฟังก์ชันในโฟลว์โค้ดหลัก

    ผลรวมฟังก์ชัน (a, b) {
     ให้ผลลัพธ์ = a + b;
   
     ส่งคืนผลลัพธ์;
   -

2. Function Expression: ฟังก์ชันในบริบทของนิพจน์

    ให้ผลรวม = ฟังก์ชั่น (a, b) {
     ให้ผลลัพธ์ = a + b;
   
     ส่งคืนผลลัพธ์;
   -

3. ฟังก์ชั่นลูกศร:

    // นิพจน์ทางด้านขวา
   ให้ผลรวม = (a, b) => a + b;
   
   // หรือไวยากรณ์หลายบรรทัดด้วย { ... } ต้องส่งคืนที่นี่:
   ให้ผลรวม = (a, b) => {
     -
     กลับ + b;
   -
   
   //ไม่มีข้อโต้แย้ง
   ให้ sayHi = () => alert("Hello");
   
   // ด้วยอาร์กิวเมนต์เดียว
   ให้ double = n => n * 2;

• ฟังก์ชั่นอาจมีตัวแปรท้องถิ่น: ตัวแปรที่ประกาศภายในเนื้อหาหรือรายการพารามิเตอร์ ตัวแปรดังกล่าวจะมองเห็นได้เฉพาะภายในฟังก์ชันเท่านั้น

• พารามิเตอร์สามารถมีค่าเริ่มต้นได้: function sum(a = 1, b = 2) {...}

• ฟังก์ชั่นส่งคืนบางสิ่งเสมอ หากไม่มีคำสั่ง return ผลลัพธ์จะเป็น undefined

รายละเอียด: ดูฟังก์ชัน ฟังก์ชันลูกศร พื้นฐาน

มากขึ้นที่จะมา

นั่นเป็นรายการสั้นๆ ของฟีเจอร์ JavaScript ตอนนี้เราเรียนแต่พื้นฐานเท่านั้น นอกจากนี้ในบทช่วยสอน คุณจะพบกับความพิเศษและคุณสมบัติขั้นสูงเพิ่มเติมของ JavaScript