ไวยากรณ์ของJavaScriptคือชุดของกฎที่กำหนดโครงสร้างที่ถูกต้องของโปรแกรม JavaScript

ตัวอย่างด้านล่างนี้ใช้console.log()ฟังก์ชันที่มีอยู่ในเบราว์เซอร์ส่วนใหญ่สำหรับการ แสดงผลข้อความมาตรฐาน

ไลบรารีมาตรฐานของ JavaScript ขาดฟังก์ชันแสดงข้อความมาตรฐานอย่างเป็นทางการ (ยกเว้น `<a href="..."> document.write`) เนื่องจาก JavaScript ส่วนใหญ่ใช้สำหรับการเขียนสคริปต์ฝั่งไคลเอ็นต์ภายในเว็บเบราว์เซอร์ สมัยใหม่ และเว็บเบราว์เซอร์เกือบทั้งหมดมีฟังก์ชัน `<a href="...">` ดังนั้นจึงalertสามารถใช้ `<a href="...">` ได้เช่นกัน แต่ไม่นิยมใช้กันทั่วไป

TypeScriptซึ่งเป็นส่วนขยายของ JavaScript ด้วยการระบุประเภทข้อมูลและคุณสมบัติเพิ่มเติม มีไวยากรณ์เหมือนกันกับ JavaScript รวมทั้งคุณสมบัติเพิ่มเติมของตัวเองด้วย

Brendan Eichสรุปที่มาของไวยากรณ์ในย่อหน้าแรกของข้อกำหนด JavaScript 1.1 ^{[ 1 ] [ 2 ]}ดังนี้:

JavaScript ยืมไวยากรณ์ส่วนใหญ่มาจากJavaแต่ก็ยังได้รับอิทธิพลจากAwkและPerl ด้วย โดยมีอิทธิพลทางอ้อมบางส่วนจากSelfในระบบต้นแบบของอ็อบเจ็กต์

ไวยากรณ์ของ JavaScript ส่วนใหญ่ได้มาจากไวยากรณ์ของ Javaซึ่งได้มาจาก ไวยากรณ์ ของ CและC++อีก ทีหนึ่ง

คำต่อไปนี้เป็นคำหลักและไม่สามารถใช้เป็นคำระบุตัวตนได้ในทุกกรณี

คำต่อไปนี้หมายถึงความหมายตามตัวอักษรที่ใช้ในภาษา

JavaScript ยังกำหนดค่าคงที่ส่วนกลางต่อไปนี้ ซึ่งไม่ใช่คีย์เวิร์ด

คำต่อไปนี้ ซึ่งส่วนใหญ่เกี่ยวข้องกับภาษา Java ถูกลบออกจาก มาตรฐาน ECMAScript 5/6:

คำต่อไปนี้เป็นคำสำคัญใน TypeScript

JavaScript เป็นภาษาที่คำนึงถึงตัวพิมพ์ใหญ่และตัวพิมพ์เล็กโดยทั่วไปแล้ว ชื่อของคอนสตรัคเตอร์ มักจะขึ้นต้น ด้วย ตัวอักษรพิมพ์ ใหญ่และชื่อของฟังก์ชันหรือตัวแปรจะขึ้นต้นด้วยตัวอักษรพิมพ์เล็ก

ตัวอย่าง:

var a = 5 ; console.log ( a ) ; // 5 console.log ( A ); // เกิด ข้อผิดพลาด ReferenceError: A ไม่ได้ถูกกำหนด

ต่างจากใน ภาษา Cช่องว่างในซอร์สโค้ด JavaScript สามารถส่งผลกระทบต่อความหมายโดยตรงได้เครื่องหมายเซมิโคลอนจะจบคำสั่งใน JavaScript เนื่องจากการแทรกเซมิโคลอนอัตโนมัติ (ASI) คำสั่งบางคำสั่งที่มีรูปแบบถูกต้องเมื่อมีการแยกวิเคราะห์ บรรทัดใหม่ จะถือว่าสมบูรณ์ราวกับว่ามีการแทรกเซมิโคลอนไว้ก่อนบรรทัดใหม่ ผู้เชี่ยวชาญบางคนแนะนำให้ใส่เซมิโคลอนเพื่อจบคำสั่งอย่างชัดเจน เนื่องจากอาจช่วยลดผลกระทบที่ไม่พึงประสงค์ของการแทรกเซมิโคลอนอัตโนมัติได้^{[ 3 ]}

มีประเด็นอยู่สองประการ: โทเค็นห้าตัวสามารถเริ่มต้นประโยคหรือเป็นส่วนขยายของประโยคที่สมบูรณ์ได้ และกฎการผลิตแบบจำกัดห้าข้อ ซึ่งไม่อนุญาตให้มีการขึ้นบรรทัดใหม่ในบางตำแหน่ง ซึ่งอาจส่งผลให้การวิเคราะห์ไวยากรณ์ไม่ถูกต้อง

สัญลักษณ์ที่มีปัญหา 5 ตัว ได้แก่ วงเล็บเปิด " (", วงเล็บเหลี่ยมเปิด " [", เครื่องหมายทับ " /", เครื่องหมายบวก " +", และเครื่องหมายลบ " -" ในบรรดาสัญลักษณ์เหล่านี้ วงเล็บเปิดมักพบได้บ่อยใน รูปแบบ นิพจน์ฟังก์ชันที่เรียกใช้ทันทีวงเล็บเหลี่ยมเปิดพบได้บ้าง ในขณะที่สัญลักษณ์อื่นๆ พบได้ค่อนข้างน้อย ตัวอย่างเช่น:

a = b + c ( d + e ). foo ()// ดำเนินการดังนี้: // a = b + c(d + e).foo();

พร้อมข้อเสนอแนะว่าควรปิดท้ายประโยคก่อนหน้าด้วยเครื่องหมายเซมิโคลอน

บางคนแนะนำให้ใช้เครื่องหมาย เซมิโคลอน นำหน้าบรรทัดที่ขึ้นต้นด้วย ' (' หรือ ' [' เพื่อป้องกันไม่ให้บรรทัดนั้นเชื่อมต่อกับบรรทัดก่อนหน้าโดยไม่ได้ตั้งใจ วิธีนี้เรียกว่าเซมิโคลอนป้องกันและใช้เพราะมิเช่นนั้นโค้ดอาจเกิดความกำกวมเมื่อมีการจัดเรียงใหม่ ตัวอย่างเช่น:

a = b + c ( d + e ). foo ()// ดำเนินการดังนี้: // a = b + c; // (d + e).foo();

เครื่องหมายเซมิโคลอนนำหน้าบางครั้งก็ถูกใช้ที่จุดเริ่มต้นของไลบรารี JavaScript ในกรณีที่ไลบรารีนั้นถูกนำไปต่อกับไลบรารีอื่นที่ละเว้นเครื่องหมายเซมิโคลอนปิดท้าย เพราะอาจทำให้เกิดความกำกวมในคำสั่งเริ่มต้นได้ ในกรณีที่การวางเครื่องหมายเซมิโคลอนผิดปกติเกิดขึ้น อาจเป็นการดีกว่าที่จะใส่เครื่องหมายเซมิโคลอนด้วยตนเองที่ท้ายคำสั่ง

กฎการผลิตที่จำกัดทั้งห้าข้อ ได้แก่return, throw, break, continue, และการเพิ่ม/ลดค่าหลังการดำเนินการ ในทุกกรณี การใส่เครื่องหมายเซมิโคลอนไม่ได้แก้ปัญหา แต่ทำให้ไวยากรณ์ที่แยกวิเคราะห์ชัดเจนขึ้น ทำให้ตรวจจับข้อผิดพลาดได้ง่ายขึ้นreturnและthrowรับค่าที่เป็นตัวเลือก ในขณะที่breakและcontinueรับป้ายกำกับที่เป็นตัวเลือก ในทุกกรณี คำแนะนำคือให้เก็บค่าหรือป้ายกำกับไว้ในบรรทัดเดียวกันกับคำสั่ง ซึ่งมักจะปรากฏในคำสั่ง return ที่อาจส่งคืนค่าลิเทอรัลออบเจ็กต์ขนาดใหญ่ ซึ่งอาจถูกวางไว้ในบรรทัดใหม่โดยไม่ได้ตั้งใจ สำหรับการเพิ่ม/ลดค่าหลังการดำเนินการ อาจมีความกำกวมกับการเพิ่ม/ลดค่าก่อนการดำเนินการ และขอแนะนำให้เก็บไว้บนบรรทัดเดียวกันอีกครั้ง

ส่งคืนค่าa + b ;// ส่งคืนค่า undefined ถือว่าเป็น: // return; // a + b; // ควรเขียนเป็น: // return a + b;

รูปแบบ การเขียนคำอธิบายประกอบเหมือนกับใน ภาษา C++ , Swiftและภาษาโปรแกรมอื่นๆ

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

ความคิดเห็นประเภทที่สามคือความคิดเห็นแบบ hashbang ซึ่งเริ่มต้น#!และต่อเนื่องไปจนถึงท้ายบรรทัด ความคิดเห็นประเภทนี้ใช้ได้เฉพาะที่จุดเริ่มต้นของไฟล์และมีจุดประสงค์เพื่อใช้ในสภาพแวดล้อมCLI ^{[ 4 ]}

# ! แฮชแบงคอมเมนต์// ข้อความแสดงความคิดเห็นบรรทัดเดียว/* ข้อความแสดงความคิดเห็นหลายบรรทัด */

ตัวแปรใน JavaScript มาตรฐานไม่มีประเภทกำกับ ดังนั้นค่าใดๆ (แต่ละค่ามีประเภท) สามารถเก็บไว้ในตัวแปรใดก็ได้ ตั้งแต่ES6 ซึ่ง เป็นเวอร์ชันที่ 6 ของภาษา ตัวแปรสามารถประกาศได้ด้วย `var` varสำหรับตัวแปรที่มีขอบเขตในฟังก์ชัน และ `var` letหรือ ` var` constซึ่งใช้สำหรับ ตัวแปร ระดับบล็อกก่อน ES6 ตัวแปรสามารถประกาศได้ด้วยvarคำสั่ง `var` เท่านั้น ค่าที่กำหนดให้กับตัวแปรที่ประกาศด้วย `var` constไม่สามารถเปลี่ยนแปลงได้ แต่คุณสมบัติของตัวแปรสามารถเปลี่ยนแปลงได้varไม่ควรใช้ `var` อีกต่อไปเนื่องจาก `var` letและconst`var` รองรับโดยเบราว์เซอร์สมัยใหม่^{[ 5 ]}ตัวระบุของตัวแปรต้องขึ้นต้นด้วยตัวอักษร เครื่องหมายขีดล่าง ( __) หรือเครื่องหมายดอลลาร์ (_ $) ในขณะที่อักขระถัดไปสามารถเป็นตัวเลขได้ ( 0-9) JavaScript มีความไวต่อตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ดังนั้นตัวพิมพ์ใหญ่ " A " ถึง " Z " จึงแตกต่างจากตัวพิมพ์เล็ก " a " ถึง " z "

ตั้งแต่ JavaScript 1.5 เป็นต้นไปสามารถใช้ ตัวอักษร ISO 8859-1หรือUnicode (หรือ ลำดับการหลีกเลี่ยง Unicode) ในตัวระบุได้ ^{[ 6 ]}ในการใช้งาน JavaScript บางอย่าง สามารถใช้ เครื่องหมาย @ ในตัวระบุได้ แต่ขัดกับข้อกำหนดและไม่ได้รับการสนับสนุนในการใช้งานเวอร์ชันใหม่กว่า \uXXXX

ตัวแปรที่ประกาศด้วย `@` varจะมีขอบเขตตามพจนานุกรมที่ระดับฟังก์ชันในขณะที่ตัวแปรที่มี `@` letหรือ `@ const` จะมี ขอบเขต ที่ระดับบล็อกเนื่องจากมีการประมวลผลการประกาศก่อนที่โค้ดใดๆ จะถูกดำเนินการ ตัวแปรจึงสามารถกำหนดค่าและใช้งานได้ก่อนที่จะมีการประกาศในโค้ด^{[ 7 ]}สิ่งนี้เรียกว่าการยกขึ้น (hoisting)และเทียบเท่ากับการประกาศตัวแปรล่วงหน้าที่ด้านบนของฟังก์ชันหรือบล็อก ^{[ 8 ]}

เมื่อใช้ คำสั่ง var`set` let, `set` และconst`set` เฉพาะการประกาศตัวแปรเท่านั้นที่จะถูกยกขึ้นไป (hoisted) ส่วนการกำหนดค่าจะไม่ถูกยกขึ้นไปด้วย ดังนั้นคำสั่ง `set` ที่อยู่ตรงกลางฟังก์ชันจึงเทียบเท่ากับคำสั่งประกาศตัวแปรที่อยู่ด้านบนสุดของฟังก์ชัน และคำสั่งกำหนดค่าตัวแปรที่อยู่ตรงกลางฟังก์ชันนั้น หมายความว่าไม่สามารถเข้าถึงค่าได้ก่อนที่จะมีการประกาศตัวแปร การอ้างอิงไปข้างหน้าจึงเป็นไปไม่ได้ค่าของตัวแปรจะคงอยู่จนกว่าจะมีการกำหนดค่าเริ่มต้น ตัวแปรที่ประกาศด้วย ` set` หรือ ` set` จะไม่สามารถเข้าถึงได้จนกว่าจะได้รับการกำหนดค่าเริ่มต้น ดังนั้นการอ้างอิงตัวแปรดังกล่าวด้วย `set` จะทำให้เกิดข้อผิดพลาด varx=1varxx=1varundefinedletconst

การประกาศฟังก์ชัน ซึ่งเป็นการประกาศตัวแปรและกำหนดฟังก์ชันให้กับตัวแปรนั้น คล้ายกับคำสั่งตัวแปร แต่เพิ่มเติมจากการยกการประกาศขึ้นไปด้านบนแล้ว ยังยกการกำหนดค่าขึ้นไปด้านบนด้วย – ราวกับว่าคำสั่งทั้งหมดปรากฏอยู่ด้านบนสุดของฟังก์ชันที่ครอบคลุม – ดังนั้นจึงสามารถอ้างอิงไปข้างหน้าได้: ตำแหน่งของคำสั่งฟังก์ชันภายในฟังก์ชันที่ครอบคลุมนั้นไม่สำคัญ ซึ่งแตกต่างจากการกำหนดค่าฟังก์ชันให้กับตัวแปรใน คำสั่ง var`if`, let`if`, `if` หรือ ` if`const

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

var func = function () { .. } // การประกาศจะถูกยกขึ้นเท่านั้นfunction func () { .. } // การประกาศและการกำหนดค่าจะถูกยกขึ้น

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

ตัวแปรที่ประกาศอยู่นอกขอบเขตจะเป็นตัวแปรส่วนกลาง (global ) หากตัวแปรถูกประกาศในขอบเขตที่สูงกว่า ขอบเขตย่อยก็สามารถเข้าถึงตัวแปรนั้นได้

เมื่อ JavaScript พยายามค้นหาตัวระบุ มันจะค้นหาในขอบเขตท้องถิ่นก่อน หากไม่พบตัวระบุนี้ มันจะค้นหาในขอบเขตภายนอกถัดไป และทำเช่นนี้ไปเรื่อยๆ ตามลำดับขอบเขตจนกระทั่งถึงขอบเขตทั่วโลกซึ่งเป็นที่อยู่ของตัวแปรทั่วโลก หากยังไม่พบอีก JavaScript จะแสดงReferenceErrorข้อผิดพลาด

เมื่อกำหนดตัวระบุ JavaScript จะดำเนินการตามกระบวนการเดียวกันเพื่อดึงตัวระบุนี้ ยกเว้นว่าหากไม่พบในขอบเขตทั่วโลกมันจะสร้าง "ตัวแปร" ในขอบเขตที่สร้างขึ้น^{[ 9 ]}ผลที่ตามมาคือ ตัวแปรที่ไม่เคยประกาศจะกลายเป็นตัวแปรทั่วโลกหากมีการกำหนดค่า การประกาศตัวแปร (ด้วยคำหลักvar) ในขอบเขตทั่วโลก (เช่น นอกตัวฟังก์ชันใดๆ (หรือบล็อกในกรณีของ let/const)) การกำหนดค่าตัวระบุที่ไม่เคยประกาศ หรือการเพิ่มคุณสมบัติให้กับออบเจ็กต์ทั่วโลก (โดยปกติคือ window ) จะสร้างตัวแปรทั่วโลกใหม่ด้วย

โปรดทราบว่า โหมดเข้มงวด (strict mode)ของ JavaScript ห้ามการกำหนดค่าให้กับตัวแปรที่ไม่ได้ประกาศไว้ ซึ่งจะช่วยหลีกเลี่ยงการปนเปื้อนของเนมสเปซส่วนกลาง

ต่อไปนี้เป็นตัวอย่างของการประกาศตัวแปรและขอบเขตการใช้งาน:

var x1 = 0 ; // ตัวแปรส่วนกลาง เนื่องจากไม่ได้อยู่ในฟังก์ชันใดๆlet x2 = 0 ; // ตัวแปรส่วนกลางเช่นกัน เนื่องจากไม่ได้อยู่ในบล็อกใดๆฟังก์ชันf () { var z = 'foxes' , r = 'birds' ; // ตัวแปรโลคอล 2 ตัวm = 'fish' ; // ตัวแปรโกลบอล เนื่องจากไม่ได้ประกาศไว้ที่ใดมาก่อนฟังก์ชันลูก() { var r = 'monkeys' ; // ตัวแปรนี้เป็นตัวแปรภายในและไม่มีผลต่อตัวแปร r "birds" ของฟังก์ชันแม่z = 'penguins' ; // Closure: ฟังก์ชันลูกสามารถเข้าถึงตัวแปรของฟังก์ชันแม่ได้}twenty = 20 ; // ตัวแปรนี้ถูกประกาศในบรรทัดถัดไป แต่สามารถใช้ได้ทุกที่ในฟังก์ชัน แม้กระทั่งก่อนหน้านั้น ดังเช่นในตัวอย่างนี้var twenty ;child (); return x1 + x2 ; // เราสามารถใช้ x1 และ x2 ได้ที่นี่ เพราะเป็นตัวแปรส่วนกลาง}ฟ();console.log ( z ); // บรรทัดนี้จะทำให้เกิดข้อผิดพลาด ReferenceError เนื่องจากค่าของ z ไม่สามารถใช้งานได้อีกต่อไป

for ( let i = 0 ; i < 10 ; i ++ ) console . log ( i ); console . log ( i ); // ทำให้เกิดข้อผิดพลาด ReferenceError: i ไม่ได้ถูกกำหนด

for ( const i = 0 ; i < 10 ; i ++ ) console . log ( i ); // จะเกิดข้อผิดพลาด TypeError: Assignment to constant variablefor ( const i of [ 1 , 2 , 3 ]) console . log ( i ); //จะไม่เกิดข้อยกเว้น i ไม่ได้ถูกกำหนดค่าใหม่ แต่ถูกสร้างขึ้นใหม่ในทุกรอบการวนซ้ำconst pi ; // จะเกิดข้อผิดพลาด SyntaxError: Missing initializer in const declaration

ภาษา JavaScript มีชนิดข้อมูลพื้นฐาน 6 ชนิด ได้แก่:

• Undefined
• Number
• BigInt
• String
• Boolean
• Symbol

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

ค่า"undefined" จะถูกกำหนดให้กับ ตัวแปรที่ยังไม่ได้เริ่มต้นทั้งหมดและจะถูกส่งกลับเมื่อตรวจสอบคุณสมบัติของอ็อบเจ็กต์ที่ไม่มีอยู่จริง ในบริบทของค่าบูลีน ค่า undefined จะถือว่าเป็นค่าเท็จ

หมายเหตุ: ค่า undefined ถือเป็นชนิดข้อมูลพื้นฐานแท้จริง เว้นแต่จะมีการแปลงอย่างชัดเจน ค่า undefined อาจแสดงพฤติกรรมที่ไม่คาดคิดเมื่อเปรียบเทียบกับชนิดข้อมูลอื่น ๆ ที่ประเมินค่าเป็น false ในบริบทเชิงตรรกะ

let test ; // ตัวแปรถูกประกาศแล้ว แต่ยังไม่ได้กำหนดค่า ... // ... ตั้งค่าเป็น undefined const testObj = {}; console.log(test ) ; // ตัวแปรtest มีอยู่แต่ค่าไม่ได้ ... // ... ถูกกำหนด แสดง เป็นundefined console.log ( testObj.myProp ); // testObj มีอยู่ แต่คุณสมบัติไม่มี ... // ... แสดงเป็น undefined console.log ( undefined == null ); // ไม่บังคับใช้ประเภทในระหว่างการตรวจสอบ แสดงเป็น true console.log ( undefined === null ); // บังคับใช้ ประเภทในระหว่าง การตรวจ สอบ แสดง เป็นfalse

หมายเหตุ: ไม่มีตัวอักษรในภาษาที่ใช้แทนคำว่า undefined โดยตรง ดังนั้นจึงไม่ใช่วิธีที่เชื่อถือได้ 100% ในการตรวจสอบว่าตัวแปรนั้นเป็น undefined หรือไม่ เพราะในเวอร์ชันก่อน ECMAScript 5 การเขียนค่า undefined เป็นสิ่งที่ถูกต้องตามกฎหมายวิธีที่เชื่อถือได้มากกว่าคือการเปรียบเทียบโดยใช้ ` undefined` (x===undefined)varundefined="I'm defined now";(typeofx==='undefined')

ฟังก์ชันลักษณะนี้จะไม่ทำงานตามที่คาดหวัง:

ฟังก์ชันisUndefined ( x ) { let u ; return x === u ; } // แบบนี้... ฟังก์ชันisUndefined ( x ) { return x === void 0 ; } // ... หรือแบบที่สองฟังก์ชันisUndefined ( x ) { return ( typeof x ) === "undefined" ; } // ... หรือแบบที่สาม

ในกรณีนี้ การเรียกใช้ฟังก์ชันisUndefined(my_var)จะทำให้เกิดข้อผิดพลาด ReferenceErrorหากmy_varเป็นตัวระบุที่ไม่รู้จัก ในขณะที่ การเรียกใช้ฟังก์ชันอื่น จะไม่ ทำให้เกิดข้อผิดพลาดดังกล่าวtypeofmy_var==='undefined'

ตัวเลขจะถูกแสดงในรูปแบบเลขฐานสองโดยใช้ค่าทศลอยIEEE 754 แบบดับเบิล แม้ว่ารูปแบบนี้จะให้ความแม่นยำเกือบ 16 หลักสำคัญแต่ก็ไม่สามารถแสดงจำนวนจริงได้อย่างแม่นยำเสมอไป รวมถึงเศษส่วนด้วย

ปัญหานี้เกิดขึ้นเมื่อเปรียบเทียบหรือจัดรูปแบบตัวเลข ตัวอย่างเช่น:

console.log ( 0.2 + 0.1 === 0.3 ); // แสดง ผลเป็น false console.log ( 0.94 - 0.01 ); // แสดงผลเป็น0.9299999999999999

ด้วยเหตุนี้ จึง ควรใช้วิธีการต่างๆ เช่น เมธอดtoFixed() เพื่อปัดเศษตัวเลขทุกครั้งที่มี การจัดรูปแบบตัวเลขสำหรับการแสดงผล

สามารถระบุตัวเลขได้โดยใช้สัญลักษณ์ใดสัญลักษณ์หนึ่งต่อไปนี้:

345 ; // จำนวนเต็ม แม้ว่าจะมีเพียงชนิดข้อมูลตัวเลขเดียวใน JavaScript 34.5 ; // จำนวนทศนิยม3.45e2 ; // จำนวนทศนิยมอีกตัว เทียบเท่ากับ 345 0b1011 ; // จำนวนเต็มไบนารีเท่ากับ 11 0o377 ; // จำนวนเต็มฐานแปดเท่ากับ 255 0xFF ; // จำนวนเต็มฐานสิบหกเท่ากับ 255 ตัวเลขแทนด้วย ... // ... ตัวอักษร AF อาจพิมพ์ใหญ่หรือพิมพ์เล็ก

นอกจากนี้ยังมีตัวคั่นตัวเลข_ (เครื่องหมายขีดล่าง) ซึ่งถูกนำมาใช้ใน ES2021:

// หมายเหตุ: ไวยากรณ์ของวิกิพีเดียยังไม่รองรับตัวคั่นตัวเลข1 _000_000_000 ; // ใช้กับตัวเลขขนาดใหญ่1 _000_000 .5 ; // รองรับทศนิยม1 _000e1_000 ; // รองรับเลขยกกำลัง// รองรับเลขฐานสอง ฐานแปด และฐานสิบหก0b0000 _0000_0101_1011 ; 0o0001 _3520_0237_1327 ; 0xFFFF _FFFF_FFFF_FFFE ;// แต่ผู้ใช้ไม่สามารถใช้ตัวคั่นเหล่านี้ติดกับส่วนที่เป็นตัวเลขที่ไม่ใช่ตัวเลข หรือที่ต้นหรือท้ายของตัวเลขได้_12 ; // ตัวแปรไม่ได้ถูกกำหนด (เครื่องหมายขีดล่างทำให้เป็นตัวระบุตัวแปร) 12 _ ; // ข้อผิดพลาดทางไวยากรณ์ (ไม่สามารถอยู่ท้ายตัวเลขได้) 12 _ .0 ; // ข้อผิดพลาดทางไวยากรณ์ (การวางตัวคั่นไว้ข้างจุดทศนิยมไม่สมเหตุสมผล) 12. _0 ; // ข้อผิดพลาดทางไวยากรณ์12 e_6 ; // ข้อผิดพลาดทางไวยากรณ์ (อยู่ติดกับ "e" ซึ่งไม่ใช่ตัวเลข การวางตัวคั่นไว้ที่ต้นไม่สมเหตุสมผล) 1000 ____0000 ; // ข้อผิดพลาดทางไวยากรณ์ (อยู่ติดกับ "_" ซึ่งไม่ใช่ตัวเลข อนุญาตให้ใช้ตัวคั่นได้เพียงครั้งละ 1 ตัวเท่านั้น)

ค่า+∞ , −∞และNaN (ไม่ใช่ตัวเลข) ของชนิดข้อมูลตัวเลข สามารถหาได้จากนิพจน์โปรแกรมสองแบบ:

อนันต์; // อนันต์บวก (อนันต์ลบได้จาก -Infinity เป็นต้น) NaN ; // ค่าที่ไม่ใช่ตัวเลข ซึ่งจะถูกส่งคืนเป็นค่าผิดพลาดใน ... // ... การแปลงสตริงเป็นตัวเลข

อนันต์และ NaN เป็นตัวเลข:

typeof Infinity ; // คืนค่าเป็น "number" typeof NaN ; // คืนค่าเป็น "number"

ค่าพิเศษทั้งสามนี้สอดคล้องกันและมีพฤติกรรมตามที่มาตรฐาน IEEE-754ระบุไว้

สามารถใช้ตัวสร้างประเภทข้อมูล Number (ซึ่งใช้เป็นฟังก์ชัน) หรือเครื่องหมาย + หรือ - เพื่อทำการแปลงค่าตัวเลขโดยตรงได้:

const myString = "123.456" ; const myNumber1 = Number ( myString ); const myNumber2 = + myString ;

เมื่อใช้เป็นตัวสร้าง จะมีการสร้างอ็อบเจ็กต์ ห่อ หุ้มตัวเลข ขึ้นมา (แม้ว่าจะมีประโยชน์เพียงเล็กน้อยก็ตาม):

const myNumericWrapper = new Number ( 123.456 );

อย่างไรก็ตาม NaN ไม่เท่ากับตัวมันเอง:

const น่าน= น่าน; คอนโซล​ เข้าสู่ระบบ( น่าน== น่าน); // คอนโซลเท็จเข้าสู่ระบบ( น่าน=== น่าน); // คอนโซลเท็จเข้าสู่ระบบ( น่าน!== น่าน); // คอนโซลที่ แท้จริง เข้าสู่ระบบ( แนน!== แนน); // จริง// ผู้ใช้สามารถใช้เมธอด isNaN เพื่อตรวจสอบค่า NaN ได้console.log ( isNaN ( " converted to NaN" ) ); // true console.log ( isNaN ( NaN ) ) ; // true console.log ( Number.isNaN ( " not converted " )); // false console.log( Number.isNaN ( NaN ) ) ; // true

ใน JavaScript ตัวเลขปกติจะถูกแทนด้วยชนิดข้อมูลจุดลอยตัว IEEE 754 ซึ่งหมายความว่าจำนวนเต็มสามารถจัดเก็บได้อย่างปลอดภัยก็ต่อเมื่อค่าอยู่ระหว่างNumber.MIN_SAFE_INTEGERและNumber.MAX_SAFE_INTEGERเท่านั้น^{[ 10 ]}ในทางกลับกัน BigInts แทนจำนวนเต็มขนาดใดก็ได้ ทำให้โปรแกรมเมอร์สามารถจัดเก็บจำนวนเต็มที่สูงหรือต่ำเกินกว่าที่จะแสดงด้วยรูปแบบ IEEE 754 ได้^{[ 11 ]}

มีสองวิธีในการประกาศค่า BigInt nสามารถเพิ่มเข้าไปในจำนวนเต็ม หรือBigIntสามารถใช้ฟังก์ชันได้: ^{[ 11 ]}

const a = 12345n ; // สร้างตัวแปรและเก็บค่า BigInt เท่ากับ 12345 const b = BigInt ( 12345 );

สตริงใน JavaScript คือลำดับของอักขระ ใน JavaScript สามารถสร้างสตริงได้โดยตรง (เป็นลิเทอรัล) โดยการวางลำดับของอักขระไว้ระหว่างเครื่องหมายคำพูดคู่ ( )"หรือ'เครื่องหมายคำพูดเดี่ยว ( ) สตริงดังกล่าวต้องเขียนในบรรทัดเดียว แต่อาจมีอักขระขึ้นบรรทัดใหม่ที่ถูกหลีกเลี่ยง (เช่น\n) มาตรฐาน JavaScript อนุญาตให้ใช้ อักขระ แบ็กควอต ( `, หรือที่รู้จักกันในชื่อ grave accent หรือ backtick) เพื่ออ้างอิงสตริงลิเทอรัลหลายบรรทัด รวมถึงนิพจน์ที่ฝังอยู่โดยใช้ไวยากรณ์^{[ 12 ]}${expression}

const greeting = "สวัสดีชาวโลก!" ; const anotherGreeting = 'สวัสดีชาวโลก' ; const aMultilineGreeting = `ด้วยความเคารพอย่างสูง, จอห์น โด' ;// เทมเพลตลิเทอรัลจะแปลงประเภทของนิพจน์ที่ประเมินแล้วและแทรกเข้าไปในสตริงconst templateLiteral = `นี่คือสิ่งที่เก็บไว้ใน anotherGreeting: ${ anotherGreeting } .` ; console . log ( templateLiteral ); // 'นี่คือสิ่งที่เก็บไว้ใน anotherGreeting: 'สวัสดีชาวโลก' console . log ( `คุณมีอายุ${ Math . floor ( age )=> 18 ? "ได้รับอนุญาต" : "ไม่ได้รับอนุญาต" } เพื่อดูเว็บเพจนี้` );

สามารถเข้าถึงอักขระแต่ละตัวภายในสตริงได้โดยใช้ เมธอด charAt (ซึ่งมีอยู่ในString.prototype ) นี่เป็นวิธีที่แนะนำเมื่อต้องการเข้าถึงอักขระแต่ละตัวภายในสตริง เนื่องจากใช้งานได้ในเบราว์เซอร์ที่ไม่ทันสมัยด้วยเช่นกัน:

const h = greeting.charAt ( 0 ) ;​

ในเบราว์เซอร์สมัยใหม่ สามารถเข้าถึงอักขระแต่ละตัวภายในสตริงได้ (ในฐานะสตริงที่มีเพียงอักขระเดียว) โดยใช้สัญลักษณ์เดียวกับอาร์เรย์:

const h = greeting [ 0 ];

อย่างไรก็ตาม สตริงใน JavaScript นั้นไม่สามารถเปลี่ยนแปลงได้ :

greeting [ 0 ] = "H" ; // ล้มเหลว

การใช้ตัวดำเนินการความเท่าเทียมกัน ("==") กับสตริงสองสตริงจะคืนค่าเป็นจริง หากสตริงทั้งสองมีเนื้อหาเหมือนกัน ซึ่งหมายความว่า มีความยาวเท่ากันและประกอบด้วยลำดับตัวอักษรเดียวกัน (ตัวพิมพ์ใหญ่เล็กมีความสำคัญสำหรับตัวอักษร) ดังนั้น:

const x = "World" ; const compare1 = ( "Hello, " + x == "Hello, World" ); // ในที่นี้ compare1 มีค่าเป็น true const compare2 = ( "Hello, " + x == "hello, World" ); // ในที่นี้ compare2 มีค่าเป็น ... // ... false เนื่องจาก ... // ... ตัวอักษรตัวแรก ... // ... ของตัวถูกดำเนินการทั้งสอง ... // ... ไม่ใช่ตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเดียวกัน

เครื่องหมายอัญประกาศชนิดเดียวกันไม่สามารถซ้อนกันได้ เว้นแต่จะมี การใส่เครื่องหมาย หลีก (escape ) ไว้

let x = '"Hello, World!" he said.' ; // ถูกต้องx = "" Hello , World ! " he said." ; // ไม่ถูกต้องx = "\"Hello, World!\" he said." ; // ใช้ได้โดยการหลีกเลี่ยง " ด้วย \"

ตัว สร้าง Stringจะสร้างอ็อบเจ็กต์สตริง (อ็อบเจ็กต์ที่ห่อหุ้มสตริง):

const greeting = new String ( "Hello, World!" );

อ็อบเจ็กต์เหล่านี้มี เมธอด valueOfที่ส่งคืนสตริงแบบดั้งเดิมที่ห่อหุ้มอยู่ภายใน:

const s = new String ( "Hello!" ); typeof s ; // เป็น ' object' typeof s.valueOf ( ); // เป็น 'string'

ความเท่าเทียมกันระหว่างอ็อบเจ็กต์ Stringสองตัวจะไม่ทำงานเหมือนกับค่าพื้นฐานของสตริง:

const s1 = new String ( "Hello!" ) ; const s2 = new String ( "Hello!" ) ; s1 == s2 ; // เป็นเท็จ เพราะเป็นอ็อบเจ็กต์ที่แตกต่างกันสองตัวs1.valueOf() == s2.valueOf ( ) ; // เป็นจริง

JavaScriptมีชนิดข้อมูลบูลีน (Boolean ) ที่มี ค่า เป็น trueและfalseตัวดำเนิน การ `typeof`จะคืนค่าเป็นสตริง"boolean"สำหรับชนิดข้อมูลพื้นฐาน เหล่านี้ เมื่อใช้ในบริบทเชิงตรรกะ ค่า0 , -0 , null , NaN , undefinedและสตริงว่าง ( "" ) จะถูกประเมินเป็นfalseเนื่องจากการแปลงชนิดข้อมูล อัตโนมัติ ค่าอื่นๆ ทั้งหมด (ส่วนเติมเต็มของรายการก่อนหน้า) จะถูกประเมินเป็นtrueรวมถึงสตริง"0" , "false"และออบเจ็กต์ใดๆ

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

เมื่อจำเป็นต้องมีการแปลงประเภท JavaScript จะแปลง ตัวดำเนินการ Boolean , Number , StringหรือObjectดังนี้: ^{[ 13 ]}

ตัวเลขและสตริง

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

บูลีน

ถ้าตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นค่าบูลีน ค่าบูลีนนั้นจะถูกแปลงเป็น 1 ถ้าเป็นจริงหรือเป็น 0 ถ้าเป็นเท็จ

วัตถุ

หากมีการเปรียบเทียบอ็อบเจ็กต์กับตัวเลขหรือสตริง JavaScript จะพยายามส่งคืนค่าเริ่มต้นของอ็อบเจ็กต์นั้น โดยจะแปลงอ็อบเจ็กต์เป็นค่าสตริงหรือตัวเลขโดยใช้เมธอด.valueOf()หรือ.toString()ของอ็อบเจ็กต์นั้น หากการแปลงล้มเหลว จะเกิดข้อผิดพลาดขณะรันไทม์

Douglas Crockfordสนับสนุนคำว่า "truthy" และ "falsy" เพื่ออธิบายว่าค่าของประเภทต่างๆ มีพฤติกรรมอย่างไรเมื่อประเมินในบริบทเชิงตรรกะ โดยเฉพาะอย่างยิ่งในส่วนที่เกี่ยวกับกรณีพิเศษ^{[ 14 ]} ตัวดำเนินการตรรกะแบบไบนารีจะส่งคืนค่าบูลีนใน JavaScript เวอร์ชันแรกๆ แต่ตอนนี้จะส่งคืนค่าตัวถูกดำเนินการตัวใดตัวหนึ่งแทน ตัวถูกดำเนินการด้านซ้ายจะถูกส่งคืน หากสามารถประเมินได้เป็น: เท็จในกรณีของการเชื่อม : ( ) หรือจริงในกรณีของการแยก : ( ); มิฉะนั้นจะส่งคืนตัวถูกดำเนินการด้านขวา การแปลงประเภทอัตโนมัติโดยตัวดำเนินการเปรียบเทียบอาจแตกต่างกันสำหรับกรณีของตัวถูกดำเนินการที่ผสมระหว่างบูลีนและตัวเลขที่เข้ากันได้ (รวมถึงสตริงที่สามารถประเมินเป็นตัวเลขได้ หรือออบเจ็กต์ที่สามารถประเมินเป็นสตริงดังกล่าวได้) เนื่องจากตัวถูกดำเนินการบูลีนจะถูกเปรียบเทียบเป็นค่าตัวเลข นี่อาจเป็นสิ่งที่ไม่คาดคิด สามารถแปลงนิพจน์เป็นค่าบูลีนได้อย่างชัดเจนโดยการใช้ตัวดำเนินการปฏิเสธ เชิงตรรกะซ้ำสองครั้ง : ( !! ) โดยใช้ ฟังก์ชัน Boolean()หรือใช้ตัวดำเนินการเงื่อนไข : ( ) a && ba || bc ? t : f

// การแปลงประเภทอัตโนมัติconsole.log ( true == 2 ); // false... true → 1 !== 2 ← 2 console.log ( false == 2 ) ; // false... false → 0 !== 2 ← 2 console.log(true == 1); // true.... true → 1 === 1 ← 1 console.log( false == 0 ) ; // true .... false → 0 === 0 ← 0 console.log ( true == " 2 " ) ; // false ... true → 1 !== 2 ← "2" console.log ( false == " 2" ); // false... false → 0 !== 2 ← "2" console.log ( true == " 1" ); // true .... true → 1 === 1 ← "1" console.log ( false == "0" ) ; // จริง .... false → 0 === 0 ← "0" console เข้าสู่ระบบ( เท็จ== "" ); // จริง .... เท็จ → 0 === 0 ← "" console เข้าสู่ระบบ( เท็จ== น่าน); // เท็จ... เท็จ → 0 !== น่านconsole.log ( NaN == NaN ); // false...... NaN ไม่เท่ากับอะไรเลย รวมถึง NaN ด้วย// การเปรียบเทียบแบบตรวจสอบประเภท ( ไม่มีการแปลงประเภทและค่า) console.log ( true === 1 ); // false...... ประเภทข้อมูลไม่ตรงกัน// การแปลงประเภทข้อมูลอย่างชัดเจนconsole.log ( true === !! 2 ) ; // true.... ประเภทข้อมูลและค่าตรงกันconsole.log ( true === !! 0 ); // false... ประเภทข้อมูลตรงกัน แต่ค่าต่างกันconsole.log ( 1 ? true : false ); // true.... มีเพียง ± 0 และ NaN เท่านั้นที่เป็นตัวเลข "falsy" console.log ( "0" ? true : false ); // true.... มีเพียงสตริงว่างเท่านั้นที่เป็น "falsy" console.log ( Boolean ( {})); // true.... วัตถุทั้งหมดเป็น " truthy "

ตัวดำเนินการ `new` สามารถใช้สร้างออบเจ็กต์ห่อหุ้มสำหรับค่าบูลีนได้ อย่างไรก็ตาม ตัวดำเนินการ `typeof`ไม่คืนค่าบูลีนสำหรับออบเจ็กต์ห่อหุ้ม แต่จะคืน ค่าออบเจ็กต์ ` object`แทน เนื่องจากออบเจ็กต์ทั้งหมดมีค่าเป็นจริง จึงต้องใช้ วิธีการเช่น`.valueOf() ` หรือ`.toString()`เพื่อดึงค่าที่ห่อหุ้มไว้ สำหรับการแปลงเป็นประเภทบูลีนอย่างชัดเจน Mozilla แนะนำให้ ใช้ฟังก์ชัน `Boolean()` (โดยไม่ต้องใช้`new` ) แทนการใช้ออบเจ็กต์บูลีน

const b = new Boolean ( false ); // อ็อบเจ็กต์ false {} const t = Boolean ( b ); // Boolean true const f = Boolean ( b.valueOf ( )); // Boolean false let n = new Boolean ( b ); // ไม่แนะนำn = new Boolean ( b.valueOf ( ) ); // แนะนำถ้า( 0 || - 0 || "" || null || undefined || b.valueOf () || ! new Boolean () || ! t ) { console.log ( " ไม่เคยเป็นแบบนี้" ) ; } else if ( [] && { } && b && typeof b === "object" && b.toString ( ) === "false" ) { console.log ( " เป็นแบบนี้เสมอ" ); }

สัญลักษณ์เป็นคุณสมบัติที่นำมาใช้ในES6แต่ละสัญลักษณ์รับประกันว่ามีค่าที่ไม่ซ้ำกัน และสามารถใช้สำหรับการห่อหุ้มได้^{[ 15 ]}

ตัวอย่าง:

let x = Symbol ( 1 ); const y = Symbol ( 1 ); x === y ; // => falseconst symbolObject = {}; const normalObject = {};// เนื่องจาก x และ y มีค่าไม่ซ้ำกัน// จึงสามารถใช้เป็นคีย์ที่ไม่ซ้ำกันในออบเจ็กต์symbolObject [ x ] = 1 ; symbolObject [ y ] = 2 ;symbolObject [ x ]; // => 1 symbolObject [ y ]; // => 2// เมื่อเปรียบเทียบกับปุ่มตัวเลขปกติnormalObject [ 1 ] = 1 ; normalObject [ 1 ] = 2 ; // แทนที่ค่าของ 1normalObject [ 1 ]; // => 2// การเปลี่ยนค่าของ x จะไม่เปลี่ยนคีย์ที่เก็บไว้ในอ็อบเจ็กต์x = Symbol ( 3 ); symbolObject [ x ]; // => ไม่ได้กำหนด// การเปลี่ยน x กลับเป็นค่าเดิมจะสร้าง Symbol ที่ไม่ซ้ำกันอีกอันหนึ่งx = Symbol ( 1 ); symbolObject [ x ]; // => ไม่ได้กำหนด

นอกจากนี้ยังมี สัญลักษณ์ ที่ เป็นที่รู้จักกันดี อีกด้วย

หนึ่งในนั้นคือSymbol.iteratorถ้าสิ่งใดสิ่งหนึ่งใช้งานตามหลักการ นี้ได้ Symbol.iteratorแสดงว่าสิ่งนั้นสามารถวนซ้ำได้:

const x = [ 1 , 2 , 3 , 4 ]; // x เป็นอาร์เรย์x [ Symbol . iterator ] === Array . prototype [ Symbol . iterator ]; // และอาร์เรย์สามารถวนซ้ำได้const xIterator = x [ Symbol.iterator ](); // ฟังก์ชัน [ Symbol.iterator ] ควรให้ iterator สำหรับ x xIterator.next ( ) ; // { value: 1, done: false } xIterator.next ( ) ; // { value: 2 , done: false } xIterator.next ( ); // { value: 3, done: false } xIterator.next (); // { value : 4, done: false } xIterator.next ( ); // { value: undefined, done : true } xIterator.next (); // { value: undefined, done: true }// ลูป for..of จะวนซ้ำค่าโดยอัตโนมัติfor ( const value of x ) { console . log ( value ); // 1 2 3 4 }// เซตก็สามารถวนซ้ำได้เช่นกัน: [ Symbol . iterator ] in Set . prototype ; // truefor ( const value of new Set ([ 'apple' , 'orange' ])) { console . log ( value ); // "apple" "orange" }

ภาษา JavaScript มีอ็อบเจ็กต์ พื้นฐานอยู่จำนวนหนึ่ง อ็อบเจ็กต์พื้นฐานของ JavaScript ถือเป็นส่วนหนึ่งของข้อกำหนดเฉพาะของ JavaScript ไม่ว่าสภาพแวดล้อมของ JavaScript จะเป็นอย่างไร อ็อบเจ็กต์ชุดนี้ควรพร้อมใช้งานเสมอ

อาร์เรย์ ( Array)เป็นอ็อบเจ็กต์ใน JavaScript ที่สร้างต้นแบบมาจากArrayคอนสตรัคเตอร์ (Constructor) โดยเฉพาะ ซึ่งออกแบบมาเพื่อจัดเก็บค่าข้อมูลโดยใช้คีย์ที่เป็นจำนวนเต็ม อาร์เรย์นั้นแตกต่างจากอ็อบเจ็กต์พื้นฐานตรงที่มีเมธอดและคุณสมบัติเพื่อช่วยให้โปรแกรมเมอร์ทำงานประจำได้ง่ายขึ้น (เช่น การค้นหาแบบอินเทอร์เฟส (Integer) และการค้นหาแบบอินเทอร์เฟส ( joinInteger slice) push)

เช่นเดียวกับในภาษาตระกูล Cอาร์เรย์ใช้ระบบการจัดทำดัชนีแบบเริ่มต้นที่ศูนย์: ค่าที่ถูกแทรกเข้าไปในอาร์เรย์ว่างโดยใช้pushวิธีการดังกล่าว จะครอบครองดัชนีลำดับที่ 0 ของอาร์เรย์

const myArray = []; // ชี้ตัวแปร myArray ไปยังอาร์เรย์ว่างที่สร้างขึ้นใหม่ ... // myArray.push ( " hello World" ); // เติมดัชนีว่างถัดไป ในกรณีนี้คือ 0 console.log ( myArray [ 0 ] ); // เทียบเท่ากับ console.log ("hello World") ;

อาร์เรย์มีlengthคุณสมบัติหนึ่งที่รับประกันว่าจะมีค่ามากกว่าดัชนีจำนวนเต็มที่ใหญ่ที่สุดที่ใช้ในอาร์เรย์เสมอ ค่านี้จะได้รับการอัปเดตโดยอัตโนมัติหากมีการสร้างคุณสมบัติที่มีดัชนีที่มากกว่าเดิม การเขียนตัวเลขที่เล็กกว่าลงในlengthคุณสมบัติจะลบดัชนีที่ใหญ่กว่าออกไป

Arrayสามารถเข้าถึง องค์ประกอบของ s ได้โดยใช้สัญกรณ์การเข้าถึงคุณสมบัติของวัตถุตามปกติ:

myArray [ 1 ]; // รายการที่ 2 ใน myArray myArray [ "1" ];

สองอย่างข้างต้นนั้นเทียบเท่ากัน ไม่สามารถใช้สัญลักษณ์ "จุด" หรือสตริงที่มีการแสดงตัวเลขในรูปแบบอื่นได้:

myArray.1 ; // ข้อผิดพลาดทางไวยากรณ์myArray [ "01" ]; // ไม่เหมือนกับ myArray[1]

การประกาศอาร์เรย์สามารถใช้ได้ทั้งค่าArrayคงที่หรือArrayตัวสร้าง:

ให้myArray ;// ค่าคงที่ของอาร์เรย์myArray = [ 1 , 2 ]; // ความยาว 2 myArray = [ 1 , 2 ,]; // อาร์เรย์เดียวกัน - ผู้ใช้สามารถเพิ่มเครื่องหมายจุลภาคที่ท้ายได้ด้วย// นอกจากนี้ยังสามารถเว้นการเติมข้อมูลในบางส่วนของอาร์เรย์ได้myArray = [ 0 , 1 , /* ช่องว่าง */ , /* ช่องว่าง */ , 4 , 5 ]; // ความยาว 6 myArray = [ 0 , 1 , /* ช่องว่าง */ , /* ช่องว่าง */ , 4 , 5 ,]; // อาร์เรย์เดียวกันmyArray = [ 0 , 1 , /* ช่องว่าง */ , /* ช่องว่าง */ , 4 , 5 , /* ช่องว่าง */ ,]; // ความยาว 7// ด้วยคอนสตรัคเตอร์myArray = new Array ( 0 , 1 , 2 , 3 , 4 , 5 ); // ความยาว 6 myArray = new Array ( 365 ); // อาร์เรย์ว่างที่มีความยาว 365

อาร์เรย์ถูกสร้างขึ้นโดยใช้หน่วยความจำเฉพาะสำหรับองค์ประกอบที่กำหนดไว้เท่านั้น เรียกว่า " อาร์เรย์แบบเบาบาง " การตั้งค่าให้ใช้พื้นที่สำหรับองค์ประกอบสองตัวนี้เท่านั้น เช่นเดียวกับวัตถุอื่นๆ ขนาดหน่วยความ จำของอาร์เรย์จะยังคงแสดงเป็น 58 ความยาวสูงสุดของอาร์เรย์คือ 4,294,967,295 ซึ่งตรงกับเลขฐานสอง 32 บิต (11111111111111111111111111111111) ₂myArray[10]='someThing'myArray[57]='somethingOther'length

เราสามารถใช้ตัวอักษรประกาศวัตถุเพื่อสร้างวัตถุที่มีพฤติกรรมคล้ายกับอาร์เรย์แบบเชื่อมโยงในภาษาโปรแกรมอื่นๆ ได้:

const dog = { color : "brown" , size : "large" }; dog [ "color" ]; // ผลลัพธ์คือ "brown" dog . color ; // ผลลัพธ์ก็คือ "brown" เช่นกัน

เราสามารถใช้ตัวอักษรประกาศออบเจ็กต์และอาร์เรย์เพื่อสร้างอาร์เรย์แบบเชื่อมโยง อาร์เรย์หลายมิติ หรือทั้งสองอย่างได้อย่างรวดเร็ว (ในทางเทคนิคแล้ว JavaScript ไม่รองรับอาร์เรย์หลายมิติ แต่เราสามารถจำลองได้โดยใช้อาร์เรย์ของอาร์เรย์)

const cats = [{ color : "brown" , size : "large" }, { color : "black" , size : "small" }]; cats [ 0 ][ "size" ]; // ผลลัพธ์คือ "large"const dogs = { rover : { color : "brown" , size : "large" }, spot : { color : "black" , size : "small" }}; dogs [ "spot" ][ "size" ]; // ผลลัพธ์คือ "small" dogs . rover . color ; // ผลลัพธ์คือ "brown"

อ็อบเจ็กต์นี้Dateเก็บค่าการนับมิลลิวินาทีแบบมีเครื่องหมาย โดยที่ศูนย์แทนวันที่ 1 มกราคม 1970 เวลา 00:00:00 UT และช่วงค่าคือ ±10.8 ^วันมีหลายวิธีในการส่งอาร์กิวเมนต์ไปยังDateคอนสตรัคเตอร์ โปรดทราบว่าเดือนเริ่มต้นจากศูนย์

new Date (); // สร้างอินสแตนซ์ Date ใหม่ที่แสดงถึงเวลา/วันที่ปัจจุบันnew Date ( 2010 , 2 , 1 ); // สร้างอินสแตนซ์ Date ใหม่ที่แสดงถึงวันที่ 1 มีนาคม 2010 เวลา 00:00:00 new Date ( 2010 , 2 , 1 , 14 , 25 , 30 ); // สร้างอินสแตนซ์ Date ใหม่ที่แสดงถึงวันที่ 1 มีนาคม 2010 เวลา 14:25:30 new Date ( "2010-3-1 14:25:30" ); // สร้างอินสแตนซ์ Date ใหม่จากสตริง

มีการระบุวิธีการแยกฟิลด์ รวมถึงข้อมูลที่เป็นประโยชน์ดังนี้toString:

const d = new Date ( 2010 , 2 , 1 , 14 , 25 , 30 ); // 2010-มี.ค.-01 14:25:30;// แสดง ผล ' 2010-3-1 14:25:30 ' : console.log ( d.getFullYear () + '-' + ( d.getMonth () + 1 ) + ' - ' + d.getDate ( ) + ' ' + d.getHours ( ) + ' : ' + d.getMinutes ( ) + ':' + d.getSeconds ( ) );// เมธอด toString ในตัวจะส่งคืน ค่าประมาณ 'Mon 1 March, 2010 14:25:30 GMT-0500 (EST)': console.log ( d ) ;

สามารถสร้างข้อความแสดงข้อผิดพลาดแบบกำหนดเองได้โดยใช้Errorคลาส:

throw new Error ( "เกิดข้อผิดพลาดบางอย่าง" );

ข้อผิดพลาดเหล่านี้สามารถดักจับได้โดยใช้บล็อก try...catch...finally ตามที่อธิบายไว้ในส่วนเกี่ยวกับการ จัดการข้อผิดพลาด

อ็อบเจ็กต์Mathประกอบด้วยค่าคงที่ทางคณิตศาสตร์ต่างๆ (เช่นπ ) และฟังก์ชัน (เช่น โคไซน์) (โปรดทราบว่า อ็อบเจ็กต์ Mathไม่มีคอนสตรัคเตอร์ ต่างจากArrayหรือDate เมธอดทั้งหมดของมันเป็น "static" นั่นคือเมธอดของ "คลาส " ) ฟังก์ชันตรีโกโนเมตริกทั้งหมดใช้มุมที่แสดงในหน่วยเรเดียนไม่ใช่องศาหรือเกรด

เมธอดของออบเจ็กต์คณิตศาสตร์

ตัวอย่าง	ค่าที่ส่งคืนจะถูกปัดเศษเป็น 5 หลัก	คำอธิบาย
คณิตศาสตร์.abs(-2.3)	2.3	ค่าสัมบูรณ์
คณิตศาสตร์.acos(คณิตศาสตร์.SQRT1_2)	0.78540  เรเดียน = 45°	อาร์คโคซีน
Math.asin(Math.SQRT1_2)	0.78540 เรเดียน = 45°	อาร์คซีน
คณิตศาสตร์.atan(1)	0.78540 เรเดียน = 45°	ครึ่งวงกลมอาร์คแทนเจนต์ ( ⁠ ⁠${\displaystyle -\pi /2}$ถึง⁠ ⁠${\displaystyle +\pi /2}$ )
Math.atan2(-3.7, -3.7)	−2.3562 เรเดียน =−135°	อาร์คแทนเจนต์ของวงกลมทั้งหมด ( ⁠ ⁠${\displaystyle -\pi }$ถึง⁠ ⁠${\displaystyle +\pi }$ )
คณิตศาสตร์.ceil(1.1)	2	เพดาน: ปัดขึ้นเป็นจำนวนเต็มที่เล็กที่สุดที่มากกว่าหรือเท่ากับค่าที่กำหนด
คณิตศาสตร์.cos(คณิตศาสตร์.PI/4)	0.70711	โคไซน์
คณิตศาสตร์.exp(1)	2.7183	ฟังก์ชันเลขชี้กำลัง : eยกกำลังนี้
คณิตศาสตร์.floor(1.9)	1	Floor: ปัดลงให้เป็นจำนวนเต็มที่มากที่สุด ≤ ค่าที่ป้อนเข้าไป
แมธ.ล็อก(แมธ.อี)	1	ลอการิทึมธรรมชาติ ฐานe
คณิตศาสตร์สูงสุด(1, -2)	1	ค่าสูงสุด: (x > y) ? x : y
คณิตศาสตร์.min(1, -2)	−2	ค่าต่ำสุด: (x < y) ? x : y
Math.pow(-3, 2)	9	การยกกำลัง (ยกกำลังด้วย): Math.pow(x, y)ให้ผลลัพธ์เป็น x y
สุ่มคณิตศาสตร์()	เช่น 0.17068	เลข สุ่มเทียมระหว่าง 0 (รวม 0 ด้วย) และ 1 (ไม่รวม 1 ด้วย)
คณิตศาสตร์รอบ(1.5)	2	ปัดเศษให้เป็นจำนวนเต็มที่ใกล้ที่สุด เศษส่วนครึ่งหนึ่งจะปัดขึ้น (เช่น 1.5 ปัดเป็น 2)
คณิตศาสตร์.sin(คณิตศาสตร์.PI/4)	0.70711	ไซน์
คณิตศาสตร์.sqrt(49)	7	รากที่สอง
คณิตศาสตร์แทน(คณิตศาสตร์ PI/4)	1	แทนเจนต์

/expression/ . test ( string ); // ส่งคืนค่าบูลีน"string" . search ( /expression/ ); // ส่งคืนหมายเลขตำแหน่ง"string" . replace ( /expression/ , replacement );// นี่คือตัวอย่างบางส่วนถ้า( /Tom/ . test ( "My name is Tom" )) console . log ( "Hello Tom!" ); console . log ( "My name is Tom" . search ( /Tom/ )); // == 11 (ตัวอักษรก่อน Tom) console . log ( "My name is Tom" . replace ( /Tom/ , "John" )); // == "My name is John"

// \d - ตัวเลข// \D - ไม่ใช่ตัวเลข// \s - ช่องว่าง// \S - ไม่ใช่ช่องว่าง// \w - อักขระคำ// \W - ไม่ใช่อักขระคำ// [ ] - หนึ่งใน// [^] - ไม่ใช่หนึ่งใน// - - ช่วงถ้า( /\d/ . test ( '0' )) console . log ( 'Digit' ); ถ้า( /[0-9]/ . test ( '6' )) console . log ( 'Digit' ); ถ้า( /[13579]/ . test ( '1' )) console . log ( 'Odd number' ); ถ้า( /\S\S\s\S\S\S\S/ . test ( 'My name' )) console . log ( 'Format OK' ); ถ้า( /\w\w\w/ . test ( 'Tom' )) console . log ( 'Hello Tom' ); ถ้า( /[a-zA-Z]/ . test ( 'B' )) console . log ( 'Letter' );

// A...Z a...z 0...9 - ตัวอักษรและตัวเลข// \u0000...\uFFFF - เลขฐานสิบหกยูนิโค้ด// \x00...\xFF - เลขฐานสิบหก ASCII // \t - แท็บ// \n - ขึ้นบรรทัดใหม่// \r - CR // . - อักขระใดๆ// | - หรือถ้า( /Tm/ . test ( 'Tom' )) console . log ( 'Hi Tom, Tam or Tim' ); ถ้า( /A|B/ . test ( "A" )) console . log ( 'A or B' );

// ? - ตรงกัน 0 หรือ 1 รายการ// * - ตรงกัน 0 รายการขึ้นไป// + - ตรงกัน 1 รายการขึ้นไป// {n} - ตรงกับ n พอดี // {n,} - ตรงกับ n รายการ ขึ้นไป // {0,n} - ตรงกับ n รายการหรือน้อยกว่า// {n,m} - อยู่ในช่วง n ถึง mถ้า( /ab?c/ . test ( "ac" )) console . log ( "OK" ); // ตรงกัน: "ac", "abc" ถ้า( /ab*c/ . test ( "ac" )) console . log ( "OK" ); // ตรงกัน: "ac", "abc", "abbc", "abbbc" เป็นต้นถ้า( /ab+c/ . test ( "abc" )) console . log ( "OK" ); // ตรงกัน: "abc", "abbc", "abbbc" เป็นต้นถ้า( /ab{3}c/ . test ( "abbbc" )) console . log ( "OK" ); // ตรงกัน: "abbbc" ถ้า( /ab{3,}c/ . test ( "abbbc" )) console . log ( "OK" ); // จับคู่: "abbbc", "abbbbc", "abbbbbc" ฯลฯif ( /ab { 1,3}c/ . test ( "abc" )) console เข้าสู่ระบบ( "ตกลง" ); // จับคู่: "abc", "abbc", "abbbc"

// ^ - สตริงขึ้นต้นด้วย// $ - สตริงลงท้ายด้วยถ้า( /^My/ . test ( "My name is Tom" )) console . log ( "Hi!" ); ถ้า( /Tom$/ . test ( "My name is Tom" )) console . log ( "Hi Tom!" );

// ( ) - จัดกลุ่มอักขระถ้า( /water(mark)?/ . test ( "watermark" )) console . log ( "นี่คือน้ำ!" ); // จับคู่: "water", "watermark", ถ้า( /(Tom)|(John)/ . test ( "John" )) console . log ( "สวัสดี Tom หรือ John!" );

// /g - ทั่วโลก// /i - ไม่สนใจตัวพิมพ์ใหญ่/พิมพ์เล็ก// /m - อนุญาตให้การจับคู่ครอบคลุมหลายบรรทัดconsole.log ( "hi tom!" . replace ( " /Tom/i" , "John" )); // == "hi John!" console.log ( " ratatam " .replace ( " /ta/" , " tu" )); // == "ratutam" console.log ( "ratatam" .replace ( " /ta/g" , " tu " )); // == "ratutum"

my_array = my_string.split ( my_delimiter ); // ตัวอย่างmy_array = "dog,cat,cow" .split ( "," ) ; // my_array==["dog " ,"cat", " cow"];my_array = my_string.match ( my_expression ); // ตัวอย่างmy_array = "We start at 11:30, 12:15 and 16:45" .match ( / \d\d:\d\d/g ) ; // my_array==["11:30","12:15","16:45"];

const myRe = /(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})/ ; const results = myRe . exec ( "วันที่และเวลาคือ 2009-09-08 09:37:08." ); if ( results ) { console . log ( "ตรงกัน: " + results [ 0 ]); // การจับคู่ทั้งหมดconst my_date = results [ 1 ]; // กลุ่มแรก == "2009-09-08" const my_time = results [ 2 ]; // กลุ่มที่สอง == "09:37:08" console . log ( `เวลา${ my_time } ในวันที่${ my_date } ` ); } else console . log ( "ไม่พบวันที่ที่ถูกต้อง!" );

ทุกฟังก์ชันใน JavaScript เป็นอินสแตนซ์ของFunctionคอนสตรัคเตอร์:

// x, y คืออาร์กิวเมนต์ 'return x + y' คือส่วนเนื้อหาของฟังก์ชัน ซึ่งเป็นส่วนสุดท้ายในรายการอาร์กิวเมนต์const add = new Function ( 'x' , 'y' , 'return x + y' ); add ( 1 , 2 ); // => 3

ฟังก์ชันการบวกข้างต้นสามารถกำหนดได้โดยใช้การแสดงฟังก์ชันเช่นกัน:

const add = function ( x , y ) { return x + y ; }; add ( 1 , 2 ); // => 3

ใน ES6 ได้มีการเพิ่มไวยากรณ์ฟังก์ชันลูกศร ซึ่งทำให้ฟังก์ชันที่ส่งค่ากลับมีความกระชับมากขึ้น นอกจากนี้ ฟังก์ชันลูกศรยังคงรักษาคุณสมบัติthisของอ็อบเจ็กต์ส่วนกลางไว้ แทนที่จะสืบทอดคุณสมบัติจากตำแหน่งที่เรียกใช้หรือสิ่งที่ถูกเรียกใช้ ซึ่งแตกต่างจากfunction() {}นิพจน์

const add = ( x , y ) => { return x + y ;}; // สามารถส่งค่ากลับโดยปริยายได้ (เช่น ไม่จำเป็นต้องใช้คำสั่ง return) const addImplicit = ( x , y ) => x + y ;add ( 1 , 2 ); // => 3 addImplicit ( 1 , 2 ) // => 3

สำหรับฟังก์ชันที่จำเป็นต้องยกขึ้น (hoisted) จะมีนิพจน์แยกต่างหาก:

ฟังก์ชันadd ( x , y ) { return x + y ; } add ( 1 , 2 ); // => 3

การ Hoisting ช่วยให้ผู้ใช้สามารถใช้ฟังก์ชันได้ก่อนที่จะมีการ "ประกาศ" ฟังก์ชันนั้นอย่างเป็นทางการ:

add ( 1 , 2 ); // => 3 ไม่ใช่ ReferenceError ฟังก์ชันadd ( x , y ) { return x + y ; }

อินสแตนซ์ของฟังก์ชันประกอบด้วยคุณสมบัติและเมธอด

ฟังก์ชันลบ( x , y ) { ส่งคืนค่าx - y ; }console.log ( subtract.length ) ; // = > 2 , จำนวนอาร์กิวเมนต์ของฟังก์ชันconsole.log ( subtract.toString ( ) ) ;/* "ฟังก์ชันลบ (x, y) {  ส่งคืนค่า x - y; }" */

ตัวดำเนินการ '+' มีการใช้งานหลายรูปแบบ : ใช้สำหรับการเชื่อมต่อสตริงและการบวกทางคณิตศาสตร์ ซึ่งอาจก่อให้เกิดปัญหาหากเผลอผสมสตริงและตัวเลขเข้าด้วยกัน นอกจากนี้ ในฐานะตัวดำเนินการเอกภาค มันสามารถแปลงสตริงตัวเลขให้เป็นตัวเลขได้

// รวม สตริง2 สตริงเข้าด้วยกันconsole.log ( ' He' + 'llo' ); // แสดงผล Hello// บวกเลขสองจำนวนconsole.log ( 2 + 6 ) ; // แสดงผล 8// การบวกตัวเลขและสตริงจะส่งผลให้เกิดการต่อกัน (จากซ้ายไปขวา) console.log( 2 + ' 2 ' ) ; // แสดง ผล22 console.log ( '$' + 3 + 4 ); // แสดงผล $34 แต่ ผลลัพธ์ที่คาดหวังอาจเป็น $7 console.log ( ' $' + ( 3 + 4 )); // แสดงผล $7 console.log ( 3 + 4 + '7' ); // แสดง ผล77 ตัวเลขยังคงเป็นตัวเลขจนกว่าจะมีการบวกสตริงเข้าไป// แปลงสตริงเป็นตัวเลขโดยใช้ตัวดำเนินการบวกแบบเอกภาคconsole.log ( ' + 2 ' === 2 ); // แสดง ค่าtrue console.log ( ' + Hello' ); // แสดงค่า NaN

ในทำนองเดียวกัน ตัวดำเนินการ '*' ก็มีการใช้งานเกินความจำเป็นเช่นกัน กล่าวคือ สามารถแปลงสตริงเป็นตัวเลขได้

console.log ( 2 + ' 6 ' * 1 ); // แสดง ผล8 console.log ( 3 * ' 7' ); // 21 console.log ( ' 3' * '7' ); // 21 console.log ( ' hello ' * 'world' ); // แสดงผล NaN

JavaScript รองรับตัวดำเนินการทางคณิตศาสตร์แบบไบนารี ต่อไปนี้ :

JavaScript รองรับตัวดำเนินการทางคณิตศาสตร์แบบเอกภาค ต่อไปนี้ :

let x = 1 ; console.log ( ++ x ); // x กลายเป็น 2; แสดงผล 2 console.log ( x ++ ) ; // แสดง ผล2; x กลายเป็น 3 console.log ( x ); // x คือ 3 ; แสดงผล 3 console.log ( x-- ) ; // แสดงผล 3 ; x กลายเป็น 2 console.log ( x ) ; // แสดงผล 2; x คือ 2 console.log ( -- x ); // x กลายเป็น 1; แสดงผล 1

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

const x = 17 ; console.log ( x % 5 ); // แสดงผล2 console.log ( x % 6 ); // แสดงผล 5 console.log ( -x % 5 ); // แสดง ผล-2 console.log ( -x % -5 ) ; // แสดง ผล-2 console.log ( x % -5 ) ; // แสดงผล2

เพื่อให้ได้ผลลัพธ์เป็นจำนวนที่ไม่ติดลบเสมอ ผู้ใช้สามารถเพิ่มค่าโมดูลัสกลับเข้าไปใหม่และใช้ตัวดำเนินการโมดูลัสอีกครั้งได้:

const x = 17 ; console.log ( ( - x % 5 + 5 ) % 5 ); // แสดงผล 3

ผู้ใช้ยังสามารถทำสิ่งต่อไปนี้ได้:

const x = 17 ; console.log ( Math.abs ( -x % 5 ) ) ; // also 3​

การกำหนดประเภทพื้นฐาน

let x = 9 ; x += 1 ; console . log ( x ); // แสดงผล: 10 x *= 30 ; console . log ( x ); // แสดงผล: 300 x /= 6 ; console . log ( x ); // แสดงผล: 50 x -= 3 ; console . log ( x ); // แสดงผล: 47 x %= 7 ; console . log ( x ); // แสดงผล: 5

การกำหนดประเภทของวัตถุ

/** * เพื่อเรียนรู้เกี่ยวกับอ็อบเจ็กต์ใน JavaScript... */ const object_1 = { a : 1 }; // กำหนดค่าอ้างอิงของอ็อบเจ็กต์ที่สร้างขึ้นใหม่ให้กับ object_1 let object_2 = { a : 0 }; let object_3 = object_2 ; // object_3 อ้างอิงถึงอ็อบเจ็กต์เดียวกันกับที่ object_2 อ้างอิงobject_3 . a = 2 ; message (); // แสดงผล 1 2 2 object_2 = object_1 ; // ตอนนี้ object_2 อ้างอิงถึงอ็อบเจ็กต์เดียวกันกับ object_1 // object_3 ยังคงอ้างอิงถึงสิ่งที่ object_2 อ้างอิงอยู่ก่อนหน้านี้message (); // แสดงผล 1 1 2 object_2 . a = 7 ; // แก้ไขค่าของ object_1 message (); // แสดงผล 7 7 2object_3.a = 5 ; // object_3 ไม่เปลี่ยนแปลง object_2 message ( ); // แสดง ผล7 7 5object_3 = object_2 ; object_3.a = 4 ; // object_3 เปลี่ยนค่า object_1 และ object_2 message ( ); // แสดง 4 4 4/** * พิมพ์ข้อความ console.log */ function message () { console . log ( object_1 . a + " " + object_2 . a + " " + object_3 . a ); }

ใน JavaScript ของ Mozilla ตั้งแต่เวอร์ชัน 1.7 เป็นต้นมา การกำหนดค่าแบบแยกส่วน (destructuring assignment) อนุญาตให้กำหนดค่าส่วนต่างๆ ของโครงสร้างข้อมูลให้กับตัวแปรหลายตัวพร้อมกันได้ ด้านซ้ายของการกำหนดค่าคือรูปแบบที่คล้ายกับออบเจ็กต์/อาร์เรย์แบบซ้อนกันโดยพลการ ซึ่งมีค่า l-l ค่าอยู่ที่ส่วนปลายสุดที่จะรับโครงสร้างย่อยของค่าที่ถูกกำหนด

let a , b , c , d , e ; [ a , b , c ] = [ 3 , 4 , 5 ]; console . log ( ` ${ a } , ${ b } , ${ c } ` ); // แสดงผล: 3,4,5 e = { foo : 5 , bar : 6 , baz : [ 'Baz' , 'Content' ]}; const arr = []; ({ baz : [ arr [ 0 ], arr [ 3 ]], foo : a , bar : b } = e ); console . log ( ` ${ a } , ${ b } , ${ arr } ` ); // แสดงผล: 5,6,Baz,,,Content [ a , b ] = [ b , a ]; // สลับเนื้อหาของ a และ b console . log ( a + ',' + b ); // แสดงผล: 6,5[ a , b , c ] = [ 3 , 4 , 5 ]; // การเรียงสับเปลี่ยน[ a , b , c ] = [ b , c , a ]; console . log ( ` ${ a } , ${ b } , ${ c } ` ); // แสดงผล: 4,5,3

มาตรฐาน ECMAScript 2015 ได้แนะนำ...ตัวดำเนินการอาร์เรย์ " " สำหรับแนวคิดที่เกี่ยวข้องของ "ไวยากรณ์การกระจาย" ^{[ 16 ]}และ "พารามิเตอร์ส่วนที่เหลือ" ^{[ 17 ]}การกระจายวัตถุถูกเพิ่มใน ECMAScript 2018

ไวยากรณ์แบบ Spreadเป็นอีกวิธีหนึ่งในการแยกโครงสร้างอาร์เรย์และอ็อบเจ็กต์ สำหรับอาร์เรย์ จะระบุว่าองค์ประกอบต่างๆ ควรใช้เป็นพารามิเตอร์ในการเรียกใช้ฟังก์ชัน หรือเป็นรายการในอาร์เรย์ลิเทอรัล สำหรับอ็อบเจ็กต์ สามารถใช้เพื่อรวมอ็อบเจ็กต์เข้าด้วยกัน หรือเขียนทับคุณสมบัติได้

กล่าวอีกนัยหนึ่ง " ..." แปลง " [...foo]" เป็น " [foo[0], foo[1], foo[2]]" และ " this.bar(...foo);" เป็น " this.bar(foo[0], foo[1], foo[2]);" และ " { ...bar }" เป็น{ prop: bar.prop, prop2: bar.prop2 }"

const a = [ 1 , 2 , 3 , 4 ];// สามารถใช้ได้หลายครั้งในนิพจน์เดียวกันconst b = [... a , ... a ]; // b = [1, 2, 3, 4, 1, 2, 3, 4];// สามารถใช้ร่วมกับสิ่งของที่ไม่ต้องกระจายตัวได้const c = [ 5 , 6 , ... a , 7 , 9 ]; // c = [5, 6, 1, 2, 3, 4, 7, 9];// เพื่อเปรียบเทียบ การทำเช่นนี้โดยไม่ใช้ตัวดำเนินการกระจาย (spread operator)// สร้างอาร์เรย์ซ้อนกันconst d = [ a , a ]; // d = [[1, 2, 3, 4], [1, 2, 3, 4]]// การทำงานแบบเดียวกันกับการเรียกใช้ฟังก์ชันฟังก์ชันfoo ( arg1 , arg2 , arg3 ) {console.log ( ` $ { arg1 } : ${ arg2 } : ${ arg3 } ` ) ;}// ผู้ใช้สามารถใช้งานได้แม้ว่าจะส่งพารามิเตอร์มากกว่าที่ฟังก์ชันจะใช้ก็ตามฟู(... ก); // "1:2:3" → foo(a[0], a[1], a[2], a[3]);// ผู้ใช้สามารถผสมผสานกับพารามิเตอร์ที่ไม่กระจายได้ฟู( 5 , ... ก, 6 ); // "5:1:2" → foo(5, a[0], a[1], a[2], a[3], 6);// เพื่อเปรียบเทียบ การทำเช่นนี้โดยไม่ใช้ตัวดำเนินการกระจาย (spread operator)// กำหนดค่าอาร์เรย์ให้กับ arg1 และไม่กำหนดค่าใดๆ ให้กับพารามิเตอร์อื่นๆfoo ( a ); // "1,2,3,4:undefined:undefined"const bar = { a : 1 , b : 2 , c : 3 };// คำสั่งนี้จะคัดลอกวัตถุconst copy = { ... bar }; // copy = { a: 1, b: 2, c: 3 };// ค่า "b" จะถูกแทนที่ในที่นี้const override = { ... bar , b : 4 }; // override = { a: 1, c: 3, b: 4 }