พารามิเตอร์ฟังก์ชัน JavaScript

สารบัญ

JavaScript function ไม่ได้ทำการตรวจสอบใดๆ ค่าพารามิเตอร์ (อาร์กิวเมนต์)

พารามิเตอร์ฟังก์ชันและอาร์กิวเมนต์

ก่อนหน้านี้ในบทช่วยสอนนี้ คุณได้เรียนรู้ว่าฟังก์ชันต่างๆ สามารถมี ได้ พารามิเตอร์:

function functionName(parameter1, parameter2, parameter3) {
    // code to be executed
}

ฟังก์ชัน พารามิเตอร์ คือ ชื่อ ที่แสดงอยู่ในรายการ คำจำกัดความของฟังก์ชัน

ฟังก์ชัน อาร์กิวเมนต์ คือ ค่า ที่แท้จริง ส่งผ่านไปยัง (และรับโดย) ฟังก์ชัน

กฎพารามิเตอร์

คำจำกัดความฟังก์ชัน JavaScript ไม่ได้ระบุประเภทข้อมูลสำหรับ พารามิเตอร์

ฟังก์ชัน JavaScript จะไม่ทำการตรวจสอบประเภทของการส่งผ่าน ข้อโต้แย้ง

ฟังก์ชัน JavaScript ไม่ได้ตรวจสอบจำนวนอาร์กิวเมนต์ที่ได้รับ

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

หากเรียกใช้ฟังก์ชันโดยมี อาร์กิวเมนต์ที่หายไป (น้อยกว่าที่ประกาศ) ค่าที่หายไปจะถูกตั้งค่าเป็น <รหัส class="w3-codespan">ไม่ได้กำหนด.

บางครั้งก็เป็นที่ยอมรับ แต่บางครั้งก็เป็นการดีกว่าที่จะกำหนดค่าเริ่มต้น ค่าของพารามิเตอร์:

ตัวอย่าง

function myFunction(x, y) {
    if (y === undefined) {
    y = 2;
     }

}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 2;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

ค่าพารามิเตอร์เริ่มต้น

ES6 อนุญาตให้พารามิเตอร์ฟังก์ชันมีค่าเริ่มต้น

ตัวอย่าง

ถ้า y ไม่ผ่านหรือไม่ได้กำหนด ดังนั้น y=10

function myFunction(x, y = 10) {	  return x + y;
}
myFunction(5);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน

พารามิเตอร์ส่วนที่เหลือ (...) อนุญาตให้ฟังก์ชันปฏิบัติต่ออาร์กิวเมนต์จำนวนไม่ จำกัด ในรูปแบบอาร์เรย์:

ตัวอย่าง

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

<p id="demo"></p>

<script>
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

วัตถุอาร์กิวเมนต์

ฟังก์ชัน JavaScript มีวัตถุในตัวที่เรียกว่าอาร์กิวเมนต์ วัตถุ.

วัตถุอาร์กิวเมนต์ประกอบด้วยอาร์เรย์ของอาร์กิวเมนต์ที่ใช้เมื่อฟังก์ชัน ถูกเรียก (ถูกเรียก)

วิธีนี้คุณสามารถใช้ฟังก์ชันเพื่อค้นหา (ตัวอย่าง) ค่าสูงสุดได้ ค่าในรายการตัวเลข:

ตัวอย่าง

x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
  let max = -Infinity;
    for (let i = 0; i < arguments.length; i++) {
      if (arguments[i] > max) {
      max = arguments[i];
      }
    }
    return max;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Finding the largest number.</p>
<p id="demo"></p>

<script>
function findMax() {
  let max = -Infinity;
  for(let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
} 
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

</body>
</html>

หรือสร้างฟังก์ชันเพื่อรวมค่าอินพุตทั้งหมด:

ตัวอย่าง

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
    }
    return sum;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Sum of all arguments:</p>
<p id="demo"></p>

<script>
function sumAll() {
  let sum = 0;
  for(let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
document.getElementById("demo").innerHTML = sumAll(1, 123, 500, 115, 44, 88);
</script>

</body>
</html>

หากฟังก์ชันถูกเรียกใช้โดยมี อาร์กิวเมนต์มากเกินไป (มากกว่าที่ประกาศ) อาร์กิวเมนต์เหล่านี้สามารถเข้าถึงได้โดยใช้ วัตถุอาร์กิวเมนต์

อาร์กิวเมนต์ถูกส่งผ่านโดยค่า

พารามิเตอร์ในการเรียกใช้ฟังก์ชันคืออาร์กิวเมนต์ของฟังก์ชัน

อาร์กิวเมนต์ JavaScript ถูกส่งผ่านโดย value: ฟังก์ชันเท่านั้น ทำความรู้จักกับค่าต่างๆ ไม่ใช่ตำแหน่งของอาร์กิวเมนต์

หากฟังก์ชันเปลี่ยนค่าของอาร์กิวเมนต์ ก็จะไม่เปลี่ยนพารามิเตอร์ มูลค่าเดิม

การเปลี่ยนแปลงอาร์กิวเมนต์ไม่สามารถมองเห็นได้ (สะท้อนกลับ) ภายนอกฟังก์ชัน

วัตถุถูกส่งผ่านโดยการอ้างอิง

ใน JavaScript การอ้างอิงวัตถุคือค่า

ด้วยเหตุนี้ วัตถุจะทำงานเหมือนกับว่าถูกส่งผ่านโดย การอ้างอิง:

หากฟังก์ชันเปลี่ยนคุณสมบัติของวัตถุ ค่าเดิมจะเปลี่ยนไปด้วย

การเปลี่ยนแปลงคุณสมบัติของวัตถุสามารถมองเห็นได้ (สะท้อนกลับ) ภายนอกฟังก์ชัน