ฟังก์ชั่น

บ่อยครั้งเราจำเป็นต้องดำเนินการที่คล้ายกันในหลาย ๆ ที่ของสคริปต์

ตัวอย่างเช่น เราต้องแสดงข้อความที่ดูดีเมื่อผู้เยี่ยมชมเข้าสู่ระบบ ออกจากระบบ และอาจอยู่ที่อื่น

ฟังก์ชันต่างๆ เป็น "องค์ประกอบหลัก" หลักของโปรแกรม อนุญาตให้เรียกรหัสได้หลายครั้งโดยไม่ต้องทำซ้ำ

เราได้เห็นตัวอย่างของฟังก์ชันในตัวแล้ว เช่น alert(message) , prompt(message, default) และ confirm(question) แต่เราสามารถสร้างฟังก์ชั่นของเราเองได้เช่นกัน

การประกาศฟังก์ชั่น

ในการสร้างฟังก์ชั่นเราสามารถใช้ การประกาศฟังก์ชั่น

ดูเหมือนว่านี้:

 ฟังก์ชั่น showMessage() {
  alert( 'สวัสดีครับทุกท่าน' );
-

คีย์เวิร์ด function ไปก่อน จากนั้นไปที่ ชื่อของฟังก์ชัน จากนั้นไปที่รายการ พารามิเตอร์ ระหว่างวงเล็บ (คั่นด้วยเครื่องหมายจุลภาค ว่างเปล่าในตัวอย่างด้านบน เราจะดูตัวอย่างในภายหลัง) และสุดท้ายคือโค้ดของฟังก์ชันซึ่งมีชื่อเช่นกัน “ตัวฟังก์ชั่น” ระหว่างเครื่องหมายปีกกา

 ชื่อฟังก์ชัน (parameter1, parameter2, ... parameterN) {
 // ร่างกาย
-

ฟังก์ชั่นใหม่ของเราสามารถเรียกได้ด้วยชื่อ: showMessage()

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

 ฟังก์ชั่น showMessage() {
  alert( 'สวัสดีครับทุกท่าน' );
-

แสดงข้อความ();
แสดงข้อความ();

การเรียก showMessage() รันโค้ดของฟังก์ชัน ที่นี่เราจะเห็นข้อความสองครั้ง

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

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

ตัวแปรท้องถิ่น

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

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

 ฟังก์ชั่น showMessage() {
  ให้ข้อความ = "สวัสดี ฉันชื่อ JavaScript!"; // ตัวแปรท้องถิ่น

  แจ้งเตือน( ข้อความ );
-

แสดงข้อความ(); // สวัสดี ฉันชื่อ JavaScript!

แจ้งเตือน( ข้อความ ); // <-- ผิดพลาด! ตัวแปรอยู่ในเครื่องของฟังก์ชัน

ตัวแปรภายนอก

ฟังก์ชันสามารถเข้าถึงตัวแปรภายนอกได้เช่นกัน ตัวอย่างเช่น:

 ให้ชื่อผู้ใช้ = 'จอห์น';

ฟังก์ชั่น showMessage() {
  ให้ข้อความ = 'สวัสดี' + ชื่อผู้ใช้;
  การแจ้งเตือน(ข้อความ);
-

แสดงข้อความ(); //สวัสดีจอห์น

ฟังก์ชันนี้สามารถเข้าถึงตัวแปรภายนอกได้อย่างสมบูรณ์ ก็สามารถปรับเปลี่ยนได้เช่นกัน

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

 ให้ชื่อผู้ใช้ = 'จอห์น';

ฟังก์ชั่น showMessage() {
  ชื่อผู้ใช้ = "บ๊อบ"; // (1) เปลี่ยนตัวแปรภายนอก

  ให้ข้อความ = 'สวัสดี' + ชื่อผู้ใช้;
  การแจ้งเตือน(ข้อความ);
-

การแจ้งเตือน (ชื่อผู้ใช้); // John ก่อนเรียกใช้ฟังก์ชัน

แสดงข้อความ();

การแจ้งเตือน (ชื่อผู้ใช้); // Bob ค่าถูกแก้ไขโดยฟังก์ชัน

ตัวแปรภายนอกจะใช้เฉพาะในกรณีที่ไม่มีตัวแปรในเครื่อง

หากมีการประกาศตัวแปรที่มีชื่อเดียวกันภายในฟังก์ชัน ตัวแปรนั้นจะ บัง ตัวแปรภายนอกไว้ ตัวอย่างเช่น ในโค้ดด้านล่าง ฟังก์ชันจะใช้ userName ในเครื่อง สิ่งภายนอกจะถูกละเว้น:

 ให้ชื่อผู้ใช้ = 'จอห์น';

ฟังก์ชั่น showMessage() {
  ให้ชื่อผู้ใช้ = "บ๊อบ"; // ประกาศตัวแปรท้องถิ่น

  ให้ข้อความ = 'สวัสดี' + ชื่อผู้ใช้; //บ๊อบ
  การแจ้งเตือน(ข้อความ);
-

// ฟังก์ชั่นจะสร้างและใช้ชื่อผู้ใช้ของตัวเอง
แสดงข้อความ();

การแจ้งเตือน (ชื่อผู้ใช้); // John ไม่เปลี่ยนแปลง ฟังก์ชันไม่สามารถเข้าถึงตัวแปรภายนอก

ตัวแปรโกลบอล

ตัวแปรที่ประกาศนอกฟังก์ชันใดๆ เช่น userName ภายนอกในโค้ดด้านบน เรียกว่า global

ตัวแปรโกลบอลสามารถมองเห็นได้จากฟังก์ชันใดๆ (เว้นแต่จะถูกบดบังโดยคนในพื้นที่)

แนวทางปฏิบัติที่ดีในการลดการใช้ตัวแปรร่วมให้เหลือน้อยที่สุด Modern Code มี Global เพียงเล็กน้อยหรือไม่มีเลย ตัวแปรส่วนใหญ่อยู่ในฟังก์ชันของมัน แม้ว่าบางครั้งอาจมีประโยชน์ในการจัดเก็บข้อมูลระดับโครงการ

พารามิเตอร์

เราสามารถส่งข้อมูลโดยพลการไปยังฟังก์ชันโดยใช้พารามิเตอร์

ในตัวอย่างด้านล่าง ฟังก์ชันมีพารามิเตอร์สองตัว: from และ text

 ฟังก์ชัน showMessage(จาก, ข้อความ) { // พารามิเตอร์: จาก, ข้อความ
  การแจ้งเตือน (จาก + ': ' + ข้อความ);
-

showMessage('แอน', 'สวัสดี!'); // แอน: สวัสดี! -
showMessage('แอน', "เป็นไงบ้าง?"); // แอน: ว่าไง? -

เมื่อฟังก์ชันถูกเรียกใช้ในบรรทัด (*) และ (**) ค่าที่กำหนดจะถูกคัดลอกไปยังตัวแปรท้องถิ่น from และ text จากนั้นฟังก์ชันจะใช้มัน

นี่เป็นอีกตัวอย่างหนึ่ง: เรามีตัวแปร from และส่งผ่านไปยังฟังก์ชัน โปรดทราบ: ฟังก์ชันเปลี่ยน from แต่การเปลี่ยนแปลงจะไม่ปรากฏภายนอก เนื่องจากฟังก์ชันจะได้รับสำเนาของค่าเสมอ:

 ฟังก์ชั่น showMessage (จาก, ข้อความ) {

  จาก = '*' + จาก + '*'; // ทำให้ "จาก" ดูดีขึ้น

  การแจ้งเตือน (จาก + ': ' + ข้อความ );
-

ให้ จาก = "แอน";

showMessage(จาก, "สวัสดี"); // *แอน*: สวัสดี

// ค่าของ "จาก" เหมือนกัน ฟังก์ชันแก้ไขสำเนาในเครื่อง
การแจ้งเตือน (จาก ); //แอน

เมื่อค่าถูกส่งผ่านเป็นพารามิเตอร์ของฟังก์ชัน จะเรียกว่า อาร์กิวเมนต์

กล่าวอีกนัยหนึ่ง หากจะอธิบายคำศัพท์เหล่านี้ให้ตรง:

• พารามิเตอร์คือตัวแปรที่อยู่ในวงเล็บในการประกาศฟังก์ชัน (เป็นเงื่อนไขเวลาการประกาศ)

• อาร์กิวเมนต์คือค่าที่ส่งผ่านไปยังฟังก์ชันเมื่อมีการเรียกใช้ (เป็นเงื่อนไขเวลาการโทร)

เราประกาศฟังก์ชันที่แสดงรายการพารามิเตอร์ จากนั้นเรียกว่าฟังก์ชันที่ส่งผ่านอาร์กิวเมนต์

ในตัวอย่างข้างต้นอาจพูดว่า: "ฟังก์ชัน showMessage ได้รับการประกาศด้วยพารามิเตอร์สองตัวจากนั้นจึงเรียกด้วยสองอาร์กิวเมนต์: from และ "Hello" "

ค่าเริ่มต้น

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

ตัวอย่างเช่น ฟังก์ชั่นดังกล่าว showMessage(from, text) สามารถเรียกได้ด้วยอาร์กิวเมนต์เดียว:

 showMessage("แอน");

นั่นไม่ใช่ข้อผิดพลาด การเรียกดังกล่าวจะส่งออก "*Ann*: undefined" เนื่องจากค่าของ text ไม่ได้ถูกส่งผ่าน ค่าดังกล่าวจึงกลายเป็น undefined

เราสามารถระบุค่าที่เรียกว่า “default” (เพื่อใช้หากละไว้) สำหรับพารามิเตอร์ในการประกาศฟังก์ชัน โดยใช้ = :

 ฟังก์ชั่น showMessage (จาก, ข้อความ = "ไม่มีข้อความที่กำหนด") {
  การแจ้งเตือน (จาก + ":" + ข้อความ );
-

showMessage("แอน"); // แอน: ไม่มีข้อความให้

ตอนนี้หากไม่ส่งพารามิเตอร์ text ก็จะได้รับค่า "no text given"

ค่าเริ่มต้นจะกระโดดเข้าไปด้วยหากมีพารามิเตอร์อยู่ แต่เท่ากับ undefined อย่างเคร่งครัด เช่นนี้

 showMessage("แอน", ไม่ได้กำหนด); // แอน: ไม่มีข้อความให้

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

 ฟังก์ชั่น showMessage (จาก, ข้อความ = anotherFunction()) {
  // anotherFunction() จะดำเนินการเฉพาะในกรณีที่ไม่ได้ระบุข้อความไว้
  // ผลลัพธ์ของมันจะกลายเป็นค่าของข้อความ
-

การประเมินพารามิเตอร์เริ่มต้น

ใน JavaScript พารามิเตอร์เริ่มต้นจะถูกประเมินทุกครั้งที่เรียกใช้ฟังก์ชันโดยไม่มีพารามิเตอร์ที่เกี่ยวข้อง

ในตัวอย่างข้างต้น anotherFunction() จะไม่ถูกเรียกเลย หากมีการระบุพารามิเตอร์ text ไว้

ในทางกลับกัน จะถูกเรียกอย่างอิสระทุกครั้งที่ text หายไป

พารามิเตอร์เริ่มต้นในโค้ด JavaScript เก่า

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

ทุกวันนี้เราเจอพวกมันได้ในสคริปต์เก่าๆ

ตัวอย่างเช่น การตรวจสอบอย่างชัดเจนสำหรับ undefined :

 ฟังก์ชั่น showMessage (จาก, ข้อความ) {
  ถ้า (ข้อความ === ไม่ได้กำหนด) {
    text = 'ไม่มีข้อความให้';
  -

  การแจ้งเตือน (จาก + ":" + ข้อความ );
-

…หรือใช้ || ตัวดำเนินการ:

 ฟังก์ชั่น showMessage (จาก, ข้อความ) {
  // หากค่าของข้อความเป็นเท็จ ให้กำหนดค่าเริ่มต้น
  // นี่ถือว่า text == "" เหมือนกับไม่มีข้อความเลย
  ข้อความ = ข้อความ || 'ไม่มีข้อความให้';
  -
-

พารามิเตอร์เริ่มต้นทางเลือก

บางครั้งมันก็สมเหตุสมผลที่จะกำหนดค่าเริ่มต้นสำหรับพารามิเตอร์ในระยะหลังหลังจากการประกาศฟังก์ชัน

เราสามารถตรวจสอบได้ว่าพารามิเตอร์ถูกส่งผ่านระหว่างการทำงานของฟังก์ชันหรือไม่ โดยเปรียบเทียบกับ undefined :

 ฟังก์ชั่น showMessage (ข้อความ) {
  -

  if (ข้อความ === ไม่ได้กำหนด) { // ถ้าพารามิเตอร์หายไป
    text = 'ข้อความว่างเปล่า';
  -

  การแจ้งเตือน (ข้อความ);
-

แสดงข้อความ(); //ข้อความว่างเปล่า

…หรือเราอาจใช้ || ตัวดำเนินการ:

 ฟังก์ชั่น showMessage (ข้อความ) {
  // หากข้อความไม่ได้กำหนดไว้หรือเป็นเท็จ ให้ตั้งค่าเป็น 'ว่างเปล่า'
  ข้อความ = ข้อความ || 'ว่างเปล่า';
  -
-

เอ็นจิ้น JavaScript สมัยใหม่รองรับตัวดำเนินการรวมศูนย์แบบ nullish ?? จะดีกว่าเมื่อค่าเท็จส่วนใหญ่ เช่น 0 ควรถือเป็น "ปกติ":

 ฟังก์ชั่น showCount (นับ) {
  // หากการนับไม่ได้กำหนดหรือเป็นโมฆะ ให้แสดง "ไม่ทราบ"
  การแจ้งเตือน(นับ ?? "ไม่ทราบ");
-

แสดงจำนวน(0); // 0
showCount (โมฆะ); // ไม่ทราบ
showCount(); // ไม่ทราบ

ส่งกลับค่า

ฟังก์ชันสามารถคืนค่ากลับเข้าไปในรหัสการโทรตามผลลัพธ์ได้

ตัวอย่างที่ง่ายที่สุดคือฟังก์ชันที่รวมค่าสองค่าเข้าด้วยกัน:

 ผลรวมฟังก์ชัน (a, b) {
  กลับ + b;
-

ให้ผลลัพธ์ = ผลรวม (1, 2);
การแจ้งเตือน (ผลลัพธ์); // 3

directive return สามารถอยู่ในตำแหน่งใดก็ได้ของฟังก์ชัน เมื่อการดำเนินการถึงจุดนั้น ฟังก์ชันจะหยุด และค่าจะถูกส่งกลับไปยังรหัสการโทร (กำหนดให้กับ result ด้านบน)

อาจมีผล return หลายครั้งในฟังก์ชันเดียว ตัวอย่างเช่น:

 ฟังก์ชั่น checkAge (อายุ) {
  ถ้า (อายุ >= 18) {
    กลับเป็นจริง;
  } อื่น {
    return Confirm('คุณได้รับอนุญาตจากผู้ปกครองหรือไม่?');
  -
-

ให้อายุ = prompt ('คุณอายุเท่าไหร่?', 18);

ถ้า ( ตรวจสอบอายุ(อายุ) ) {
  alert( 'ได้รับสิทธิ์การเข้าถึง' );
} อื่น {
  alert( 'การเข้าถึงถูกปฏิเสธ' );
-

สามารถใช้ return โดยไม่มีค่าได้ ส่งผลให้ฟังก์ชันออกจากการทำงานทันที

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

 ฟังก์ชั่น showMovie (อายุ) {
  ถ้า ( !checkAge(อายุ) ) {
    กลับ;
  -

  alert( "กำลังแสดงภาพยนตร์ให้คุณดู" ); -
  -
-

ในโค้ดด้านบน หาก checkAge(age) ส่งคืน false แสดงว่า showMovie จะไม่ดำเนินการ alert ต่อไป

ฟังก์ชันที่มี return ค่าว่างหรือไม่มีการส่งคืนค่า undefined

หากฟังก์ชันไม่ส่งคืนค่า ก็จะเหมือนกับฟังก์ชันที่ส่งคืน undefined :

 ฟังก์ชั่น doNothing() { /* ว่างเปล่า */ }

การแจ้งเตือน ( ไม่มีอะไรทำ () === ไม่ได้กำหนด ); // จริง

return ที่ว่างเปล่าก็เหมือนกับ return undefined :

 ฟังก์ชัน doNothing() {
  กลับ;
-

การแจ้งเตือน ( ไม่มีอะไรทำ () === ไม่ได้กำหนด ); // จริง

อย่าเพิ่มบรรทัดใหม่ระหว่าง return และค่า

สำหรับการแสดงออกที่ยาวเป็นการ return อาจเป็นการดึงดูดให้แยกบรรทัด เช่นนี้

 กลับ
 (บาง + ยาว + สำนวน + หรือ + อะไรก็ตาม * f(a) + f(b))

วิธีนี้ใช้ไม่ได้ผล เนื่องจาก JavaScript จะใช้เครื่องหมายอัฒภาคหลัง return มันจะทำงานเหมือนกับ:

 กลับ;
 (บาง + ยาว + สำนวน + หรือ + อะไรก็ตาม * f(a) + f(b))

ดังนั้นมันจึงกลายเป็นผลตอบแทนที่ว่างเปล่าอย่างมีประสิทธิภาพ

หากเราต้องการให้นิพจน์ที่ส่งคืนตัดข้ามหลายบรรทัด เราควรเริ่มต้นที่บรรทัดเดียวกับ return หรืออย่างน้อยก็ใส่วงเล็บเปิดไว้ดังนี้:

 กลับ (
  บางส่วน + ยาว + สำนวน
  + หรือ +
  อะไรก็ได้ * f(a) + f(b)
  -

และมันจะได้ผลตามที่เราคาดหวังไว้

การตั้งชื่อฟังก์ชัน

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

เป็นวิธีปฏิบัติที่แพร่หลายในการเริ่มต้นฟังก์ชันด้วยคำนำหน้าด้วยวาจาซึ่งอธิบายการกระทำอย่างคลุมเครือ จะต้องมีข้อตกลงภายในทีมเกี่ยวกับความหมายของคำนำหน้า

ตัวอย่างเช่น ฟังก์ชันที่ขึ้นต้นด้วย "show" มักจะแสดงบางสิ่งบางอย่าง

ฟังก์ชั่นเริ่มต้นด้วย…

• "get…" – ส่งกลับค่า

• "calc…" – คำนวณบางอย่าง

• "create…" – สร้างบางสิ่งบางอย่าง

• "check…" – ตรวจสอบบางอย่างแล้วส่งคืนบูลีน ฯลฯ

ตัวอย่างของชื่อดังกล่าว:

 showMessage(..) // แสดงข้อความ
getAge(..) // ส่งคืนอายุ (เข้าใจแล้ว)
calcSum(..) // คำนวณผลรวมและส่งกลับผลลัพธ์
createForm(..) // สร้างแบบฟอร์ม (และมักจะส่งคืน)
checkPermission(..) // ตรวจสอบสิทธิ์ คืนค่าจริง/เท็จ

เมื่อใส่คำนำหน้าแล้ว การดูชื่อฟังก์ชันจะช่วยให้เข้าใจว่าฟังก์ชันทำงานประเภทใดและส่งคืนค่าประเภทใด

หนึ่งฟังก์ชัน – หนึ่งการกระทำ

ฟังก์ชันควรทำตามที่ชื่อแนะนำทุกประการ ไม่มากไปกว่านี้

การดำเนินการที่เป็นอิสระจากกัน 2 รายการมักจะสมควรได้รับ 2 ฟังก์ชัน แม้ว่าโดยปกติแล้วจะถูกเรียกรวมกันก็ตาม (ในกรณีนี้ เราสามารถสร้างฟังก์ชันที่ 3 ที่เรียกทั้งสองฟังก์ชันได้)

ตัวอย่างบางส่วนของการละเมิดกฎนี้:

• getAge – คงจะแย่ถ้ามันแสดง alert ตามอายุ (ควรได้รับเท่านั้น)

• createForm – คงจะไม่ดีหากแก้ไขเอกสารโดยเพิ่มแบบฟอร์มเข้าไป (ควรสร้างและส่งคืนเท่านั้น)

• checkPermission – คงจะไม่ดีหากแสดงข้อความ access granted/denied (ควรทำการตรวจสอบและส่งคืนผลลัพธ์เท่านั้น)

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

ชื่อฟังก์ชันเกินขีด

ฟังก์ชั่นที่ใช้บ่อย มาก บางครั้งอาจมีชื่อที่สั้นมาก

ตัวอย่างเช่น กรอบงาน jQuery กำหนดฟังก์ชันด้วย $ ไลบรารี Lodash มีฟังก์ชันหลักชื่อ _

สิ่งเหล่านี้เป็นข้อยกเว้น โดยทั่วไปชื่อฟังก์ชันควรกระชับและสื่อความหมาย

ฟังก์ชั่น == ความคิดเห็น

ฟังก์ชั่นควรสั้นและทำสิ่งเดียวเท่านั้น หากสิ่งนั้นมีขนาดใหญ่ บางทีการแบ่งฟังก์ชันออกเป็นฟังก์ชันเล็กๆ น้อยๆ ก็อาจคุ้มค่า บางครั้งการปฏิบัติตามกฎนี้อาจไม่ใช่เรื่องง่าย แต่เป็นสิ่งที่ดีอย่างแน่นอน

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

ตัวอย่างเช่น เปรียบเทียบทั้งสองฟังก์ชัน showPrimes(n) ด้านล่าง แต่ละตัวจะส่งออกจำนวนเฉพาะได้มากถึง n

ตัวแปรแรกใช้ป้ายกำกับ:

 ฟังก์ชั่น showPrimes (n) {
  nextPrime: สำหรับ (ให้ i = 2; i < n; i++) {

    สำหรับ (ให้ j = 2; j < i; j++) {
      ถ้า (i % j == 0) ดำเนินการต่อถัดไปนายกรัฐมนตรี;
    -

    การแจ้งเตือน (ฉัน); // ไพรม์
  -
-

ตัวแปรที่สองใช้ฟังก์ชันเพิ่มเติม isPrime(n) เพื่อทดสอบความเป็นลำดับแรก:

 ฟังก์ชั่น showPrimes (n) {

  สำหรับ (ให้ i = 2; i < n; i++) {
    ถ้า (!isPrime(i)) ดำเนินการต่อ;

    การแจ้งเตือน (ฉัน);  // ไพรม์
  -
-

ฟังก์ชั่น isPrime (n) {
  สำหรับ (ให้ i = 2; i < n; i++) {
    ถ้า ( n % i == 0) ส่งคืนค่าเท็จ;
  -
  กลับเป็นจริง;
-

แบบที่ 2 เข้าใจง่ายกว่าใช่ไหม? แทนที่จะเป็นส่วนของโค้ด เราจะเห็นชื่อของการดำเนินการ ( isPrime ) บางครั้งผู้คนอ้างถึงโค้ดดังกล่าวว่า อธิบายตนเอง

ดังนั้นฟังก์ชันต่างๆ จึงสามารถสร้างขึ้นได้แม้ว่าเราจะไม่ต้องการใช้ฟังก์ชันเหล่านั้นซ้ำก็ตาม พวกเขาจัดโครงสร้างโค้ดและทำให้สามารถอ่านได้

สรุป

การประกาศฟังก์ชันมีลักษณะดังนี้:

 ชื่อฟังก์ชัน (พารามิเตอร์, คั่นด้วย, เครื่องหมายจุลภาค) {
  /* รหัส */
-

• ค่าที่ส่งไปยังฟังก์ชันเป็นพารามิเตอร์จะถูกคัดลอกไปยังตัวแปรในเครื่อง

• ฟังก์ชั่นอาจเข้าถึงตัวแปรภายนอก แต่มันได้ผลจากภายในสู่ภายนอกเท่านั้น รหัสที่อยู่นอกฟังก์ชันไม่เห็นตัวแปรในเครื่อง

• ฟังก์ชันสามารถคืนค่าได้ หากไม่เป็นเช่นนั้น แสดงว่าผลลัพธ์นั้น undefined

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

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

การตั้งชื่อฟังก์ชัน:

• ชื่อควรอธิบายอย่างชัดเจนว่าฟังก์ชันทำอะไร เมื่อเราเห็นการเรียกใช้ฟังก์ชันในโค้ด ชื่อที่ดีจะช่วยให้เราเข้าใจได้ทันทีว่ามันทำอะไรและส่งคืน

• ฟังก์ชันคือการกระทำ ดังนั้นชื่อฟังก์ชันจึงมักเป็นคำพูด

• มีคำนำหน้าฟังก์ชันที่รู้จักกันดีมากมาย เช่น create… , show… , get… , check… และอื่นๆ ใช้พวกมันเพื่อบอกเป็นนัยว่าฟังก์ชันทำอะไร

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

งาน

จำเป็นต้องใช้ "อย่างอื่น" หรือไม่?

ความสำคัญ: 4

ฟังก์ชันต่อไปนี้จะคืนค่า true หาก age ของพารามิเตอร์มากกว่า 18

มิฉะนั้นระบบจะขอการยืนยันและส่งคืนผลลัพธ์:

 ฟังก์ชั่น checkAge (อายุ) {
  ถ้า (อายุ > 18) {
    กลับเป็นจริง;
  } อื่น {
    -
    return ยืนยัน('ผู้ปกครองอนุญาตคุณหรือไม่?');
  -
-

ฟังก์ชั่นจะทำงานแตกต่างออกไปหรือ else หากถูกลบออกไป?

 ฟังก์ชั่น checkAge (อายุ) {
  ถ้า (อายุ > 18) {
    กลับเป็นจริง;
  -
  -
  return ยืนยัน('ผู้ปกครองอนุญาตคุณหรือไม่?');
-

พฤติกรรมของทั้งสองตัวแปรมีความแตกต่างกันหรือไม่?

สารละลาย

ไม่มีความแตกต่าง!

ในทั้งสองกรณี return confirm('Did parents allow you?') จะดำเนินการทุกประการเมื่อเงื่อนไข if เป็นเท็จ

เขียนฟังก์ชันใหม่โดยใช้ '?' หรือ '||'

ความสำคัญ: 4

ฟังก์ชันต่อไปนี้จะคืนค่า true หาก age ของพารามิเตอร์มากกว่า 18

มิฉะนั้นระบบจะขอการยืนยันและส่งคืนผลลัพธ์

 ฟังก์ชั่น checkAge (อายุ) {
  ถ้า (อายุ > 18) {
    กลับเป็นจริง;
  } อื่น {
    return ยืนยัน('ผู้ปกครองอนุญาตคุณหรือไม่?');
  -
-

เขียนใหม่เพื่อดำเนินการเหมือนเดิม แต่ไม่มี if ในบรรทัดเดียว

สร้าง checkAge สองรูปแบบ :

1. ใช้ตัวดำเนินการเครื่องหมายคำถาม ?

2. การใช้ หรือ ||

สารละลาย

การใช้โอเปอเรเตอร์เครื่องหมายคำถาม '?' -

 ฟังก์ชั่น checkAge (อายุ) {
  กลับ (อายุ > 18) ? true : Confirm('พ่อแม่อนุญาตหรือเปล่า?');
-

การใช้ หรือ || (ตัวแปรที่สั้นที่สุด):

 ฟังก์ชั่น checkAge (อายุ) {
  กลับ (อายุ > 18) || ยืนยัน('ผู้ปกครองอนุญาตคุณหรือไม่?');
-

โปรดทราบว่าไม่จำเป็นต้องใช้วงเล็บในช่วง age > 18 ที่นี่ มีอยู่เพื่อให้อ่านง่ายขึ้น

ฟังก์ชั่นขั้นต่ำ(a, b)

ความสำคัญ: 1

เขียนฟังก์ชัน min(a,b) ซึ่งส่งคืนตัวเลขอย่างน้อยสองตัว a และ b

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

 นาที(2, 5) == 2
นาที(3, -1) == -1
นาที(1, 1) == 1

สารละลาย

วิธีแก้ปัญหาโดยใช้ if :

 ฟังก์ชั่น min(a, b) {
  ถ้า (ก <ข) {
    กลับ;
  } อื่น {
    กลับข;
  -
-

วิธีแก้ปัญหาด้วยตัวดำเนินการเครื่องหมายคำถาม '?' -

 ฟังก์ชั่น min(a, b) {
  กลับ <b ? ก : ข;
-

ป.ล. ในกรณีของความเท่าเทียมกัน a == b ไม่สำคัญว่าจะคืนอะไร

ฟังก์ชั่น ธาร(x,n)

ความสำคัญ: 4

เขียนฟังก์ชัน pow(x,n) ที่ส่งคืน x อยู่ในกำลัง n หรืออีกนัยหนึ่ง คูณ x ด้วยตัวมันเอง n ครั้งแล้วส่งกลับผลลัพธ์

 ธาร(3, 2) = 3 * 3 = 9
ธาร(3, 3) = 3 * 3 * 3 = 27
ธาร(1, 100) = 1 * 1 * ...* 1 = 1

สร้างเว็บเพจที่พร้อมท์ให้ใส่ x และ n จากนั้นแสดงผลลัพธ์ของ pow(x,n)

เรียกใช้การสาธิต

PS ในงานนี้ ฟังก์ชันควรสนับสนุนเฉพาะค่าธรรมชาติของ n : จำนวนเต็มตั้งแต่ 1

สารละลาย

 ฟังก์ชั่นธาร(x, n) {
  ให้ผลลัพธ์ = x;

  สำหรับ (ให้ i = 1; i < n; i++) {
    ผลลัพธ์ *= x;
  -

  ส่งคืนผลลัพธ์;
-

ให้ x = prompt("x?", '');
ให้ n = prompt("n?", '');

ถ้า (n < 1) {
  alert(`ไม่รองรับ Power ${n} โปรดใช้จำนวนเต็มบวก`);
} อื่น {
  การแจ้งเตือน ( ธาร(x, n) );
-