บทความอธิบายพารามิเตอร์ในฟังก์ชัน JavaScript โดยละเอียด

ฟังก์ชั่น foo(a, b) {
    console.log ([a, b]);
-

foo(1, 2); //

ฟังก์ชั่น foo(a, b) {
    ให้ A = 1

ฟังก์ชั่นเพิ่ม (num) {
    กลับหมายเลข + 1;
-

ให้นับ = 5;
ให้ result = add(count); // กระบวนการของการส่งผ่านพารามิเตอร์ที่นี่ถือได้ว่าเป็น num = count

console.log(นับ); // 5
console.log (ผลลัพธ์); // 6

ฟังก์ชั่น setName (obj) {
    obj.name = "เสี่ยวหมิง";
-

ให้บุคคล = {};

SetName (บุคคล);

บุคคล)

ฟังก์ชัน foo(a, b) {
	console.log(อาร์กิวเมนต์[0]);
    console.log (อาร์กิวเมนต์ [1]);
    console.log (อาร์กิวเมนต์ความยาว);
-

foo(10, 20); // เอาต์พุต 10, 20, 2 ตามลำดับ

ฟังก์ชั่นฟู() {
	console.log(อาร์กิวเมนต์[0]);
    console.log(อาร์กิวเมนต์[1]);
-

foo(10, 20); // เอาต์พุต 10 และ 20 ตามลำดับ

ฟังก์ชัน foo(a) {
	ข้อโต้แย้ง [0]++;
    console.log(ก);
-

foo(10); // เอาต์พุต 11
-
ฟังก์ชั่น foo2 (a) {
	A ++;
    console.log(อาร์กิวเมนต์[0]);
-

10);

ฟังก์ชัน foo (a, b) {
    อาร์กิวเมนต์ [1] = 2;
    console.log(ข);
-

foo(1); // Output undefinition

foo(1, undefinition); //

ให้ foo = () => {
    console.log(อาร์กิวเมนต์[0]);
} foo (

)

    ให้ fn2 = () => {
    	console.log(อาร์กิวเมนต์[0]);
    -
    
    fn2 ();
} FN1 (5);

ฟังก์ชั่น foo (obj) {
    console.log (obj.name, obj.sex, obj.age);
-

18, ชื่อ: 'Xiao Ming'});

เจาะจง
    ชื่อ = ชื่อ ||. 'ทุกคน';
    
	console.log( 'สวัสดี ' + ชื่อ + '!');
-

Sayhi ()

ไม่
	ถ้า (ชื่อ === ไม่ได้กำหนด) {
		ชื่อ = 'ทุกคน';
	-
    
	console.log( 'สวัสดี ' + ชื่อ + '!');
-

// ฟังก์ชั่นการตัดสินการแสดงออกของ Ternary Sayhi (ชื่อ) {
	ชื่อ = (ชื่อ! == ไม่ได้กำหนด) ชื่อ: 'ทุกคน';
	
    console.log ('hello' + name + '!');
}

ฟังก์ชั่น sayhi (name = 'ทุกคน') {// เมื่อกำหนดฟังก์ชันให้กำหนดค่าโดยตรงให้กับพารามิเตอร์ที่เป็นทางการคอนโซล log ( 'สวัสดี' + ชื่อ + '!');
-

Sayhi (); 
Sayhi ('Tony'); 
Sayhi (ไม่ได้กำหนด)

function sayHi(name = 'every'+'one') {
	console.log( 'สวัสดี ' + ชื่อ + '!');
-

sayHi(); // เอาท์พุท 'สวัสดีทุกคน!' 
-
ฟังก์ชั่นฟู() {
    console.log('กำลังโทรหา');
    กลับ 'โทนี่';
-

ฟังก์ชั่น sayHi (ชื่อ = foo()) {
	console.log( 'สวัสดี ' + ชื่อ + '!');
-
		  
sayHi(); // เอาต์พุต 'call foo'
         // เอาท์พุท 'สวัสดีโทนี่!' 

sayHi (ไม่ได้กำหนด); // เอาต์พุต 'call foo'
                  // เอาท์พุท 'สวัสดีโทนี่!' 

Sayhi ('John')

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

 ฟังก์ชั่น fn (x = 1, y) {
	console.log ([x, y]);
-

fn ();
FN (2);
FN (, 2);
FN (ไม่ได้กำหนด, 2);

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

 ฟังก์ชั่น fn (x, y = 2) {
	console.log ([x, y]);
-

fn ();
FN (1);
FN (1, 1) // เอาต์พุต [1, 1]

เมื่อพารามิเตอร์หลายตัวมีค่าเริ่มต้นปัญหาจะเกิดขึ้นอีกครั้ง

 ฟังก์ชั่น fn (x, y = 2, z = 3) {
	console.log ([x, y, z]);
-

FN (1, 10) // รายงานข้อผิดพลาด

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

ค่าเริ่มต้นพารามิเตอร์ใช้ร่วมกับ Object.assign ()

 ฟังก์ชั่น fn (obj = {}) {
    ให้ defaultObj = {
        X: ไม่ได้กำหนด
        y: 2,
        z: 3
    -
    
    ให้ผลลัพธ์ = Object.assign(defaultObj, obj);
    
	console.log ([result.x, result.y, result.z]);
-

fn ();
fn ({x: 1, z: 10});

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

ในเวลาเดียวกันค่าเริ่มต้นของพารามิเตอร์อย่างเป็นทางการ obj ยังถูกตั้งค่าเป็นวัตถุว่างเพื่อป้องกันไม่ให้พารามิเตอร์ใดถูกส่งผ่านเมื่อเรียกใช้ฟังก์ชันเนื่องจากจะ undefined พารามิเตอร์ที่สองที่ได้รับจาก Object.assign () ส่งผลให้เกิดข้อผิดพลาด

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

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

 ฟังก์ชั่น fn ({x, y = 2, z = 3}) {
    console.log ([x, y, z]);
-

fn ({});
fn ({x: 1, z: 10});

ในตัวอย่างนี้จะใช้เฉพาะค่าเริ่มต้นของการกำหนดโครงสร้างการทำลายของวัตถุและไม่ได้ใช้ค่าเริ่มต้นของพารามิเตอร์ฟังก์ชัน หากไม่มีการส่งพารามิเตอร์เมื่อมีการเรียกใช้ฟังก์ชันข้อผิดพลาดจะถูกรายงานเนื่องจากสิ่งนี้จะทำให้การกำหนดโครงสร้างการทำลายล้มเหลวในระหว่างการเริ่มต้นพารามิเตอร์ซึ่งเทียบเท่ากับการเรียกใช้รหัสเช่น {x, y = 2, z = 3} = undefined

ในทำนองเดียวกันคุณสามารถใช้ไวยากรณ์ของค่าเริ่มต้นพารามิเตอร์เพื่อตั้งค่าวัตถุ destructuring เริ่มต้นสำหรับ {x, y = 2, z = 3} ดังนั้นฟังก์ชั่นโดยไม่ต้องผ่านพารามิเตอร์สามารถดำเนินการได้อย่างราบรื่น:

 ฟังก์ชั่น fn ({x, y = 2, z = 3} = {}) {
    console.log ([x, y, z]);
-

fn ();

มีค่าเริ่มต้นสองเท่าที่นี่ ซึ่ง อาจทำให้เกิดความสับสนเล็กน้อย

 if (พารามิเตอร์จริง === {... }) {// เมื่อ fn ({... });     
    {x, y = 2, z = 3} = {... };
                        
} อื่นถ้า (พารามิเตอร์จริง === ไม่ได้กำหนด) {// เมื่อ fn ();
    {x, y = 2, z = 3} = {};

-

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

 ฟังก์ชั่น fn ({x = 1} = {}, {y} = {y: 2}) {
    console.log (x, y);
-

fn ();
fn ({x: 10}, {y: 20});
fn ({}, {});

ในฟังก์ชั่นนี้มีพารามิเตอร์สองชุดที่ใช้การกำหนดโครงสร้าง เมื่อพารามิเตอร์ผ่านคือ {} , y ไม่ได้รับค่าเริ่มต้น 2. ทำไมจึงเป็นเช่นนี้? รวมกับตัวอย่าง pseudocode ก่อนหน้า:

 fn ({x: 10}, {y: 20});

fn ({}, {});

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

ขอบเขตและโซนตายชั่วคราวของค่าเริ่มต้นพารามิเตอร์

มีรายละเอียดเล็ก (...) น้อย ๆ

 ฟังก์ชั่น foo (a = b) {
    ให้ b = 1;
-

foo ();

แต่ขอบเขตนี้เป็นเพียงชั่วคราว

นอกจากนี้ยังเป็นไปตามกฎของขอบเขตธรรมดา:

 ให้ b = 2;

ฟังก์ชั่น foo (a = b) {
    ให้ b = 1;
    กลับ;
-

foo ();

ในตัวอย่างข้างต้นมีตัวแปรส่วนกลาง B จากนั้นพารามิเตอร์อย่างเป็นทางการ A จะได้รับค่าของตัวแปรส่วนกลาง b

แน่นอนถ้ามีพารามิเตอร์อย่างเป็นทางการ B ในขอบเขตพารามิเตอร์ที่เป็นทางการมันจะได้รับขอบเขตปัจจุบันก่อน:

 ให้ b = 2;

ฟังก์ชัน foo (b = 3, a = b) {
    กลับ;
-

foo ();

ตั้งค่าเริ่มต้นสำหรับพารามิเตอร์หลายตัวพวกเขาจะเริ่มต้นตามลำดับตามกฎของ "โซนตายชั่วคราว" นั่นคือพารามิเตอร์ก่อนหน้านี้ไม่สามารถอ้างถึงพารามิเตอร์ในภายหลัง:

 function foo (a = b, b = 2) {
    กลับ + b;
-

foo ();

6. การรวบรวมและขยายพารามิเตอร์

พารามิเตอร์ที่เหลืออยู่

ES6 จัดเตรียมพารามิเตอร์ที่เหลืออยู่ ** (ส่วนที่เหลือ) ** ไวยากรณ์ ( ...变量名) ซึ่งสามารถรวบรวมพารามิเตอร์จริงซ้ำซ้อนของฟังก์ชัน (นั่นคือพารามิเตอร์จริงที่ไม่สอดคล้องกับพารามิเตอร์ที่เป็นทางการ) ต้องใช้วัตถุ arguments หากใช้พารามิเตอร์อย่างเป็นทางการกับตัวดำเนินการ ... มันจะกลายเป็นอาร์เรย์และพารามิเตอร์จริงซ้ำซ้อนจะถูกใส่ลงในอาร์เรย์นี้

การใช้งานขั้นพื้นฐานของพารามิเตอร์ที่เหลืออยู่:

 ฟังก์ชั่นผลรวม (a, ... ค่า) {
 
    สำหรับ (ให้ val ของค่า) {
        a += val;
    -
    
    กลับ;
-

ผลรวม (0, 1, 2, 3);

ในตัวอย่างข้างต้นระหว่างการเริ่มต้นพารามิเตอร์การจับคู่จะดำเนินการก่อนตามตำแหน่งพารามิเตอร์ 0 จะถูกกำหนดให้กับ A จากนั้นพารามิเตอร์ที่เหลือ 1, 2 และ 3 จะถูกใส่ลงในค่าอาร์เรย์

ต่อไปนี้เป็นตัวอย่างการเปรียบเทียบของการใช้วัตถุ arguments และพารามิเตอร์ที่เหลือเพื่อรับพารามิเตอร์:

 // วิธีการเขียนฟังก์ชันอาร์กิวเมนต์ sortNumbers () {
	return array.prototype.slice.call (อาร์กิวเมนต์) .sort ();
-

// วิธีการเขียนพารามิเตอร์ที่เหลือ const sortNumbers = (... ตัวเลข) => {
    return number.sort ();
-

จะเห็นได้ว่าพารามิเตอร์ที่เหลือจะถูกเขียนขึ้นอย่างรัดกุมมากขึ้น แม้ว่า arguments จะเป็นวัตถุคล้ายอาร์เรย์และวัตถุที่วนซ้ำ แต่ก็ไม่ใช่อาร์เรย์หลังจากทั้งหมด Array.prototype.slice.call arguments สนับสนุนวิธีการอาร์เรย์

พารามิเตอร์ที่เหลือแตกต่างจาก Array arguments และฟังก์ชั่นลูกศรยังรองรับพารามิเตอร์ที่เหลืออยู่

นอกจากนี้การใช้พารามิเตอร์ที่เหลือจะไม่ส่งผลกระทบต่อการทำงานของวัตถุ arguments มันยังสามารถสะท้อนพารามิเตอร์ที่ส่งผ่านเมื่อเรียกใช้ฟังก์ชัน

• ตำแหน่งของพารามิเตอร์ที่เหลืออยู่

พารามิเตอร์ที่เหลือจะต้องเป็นพารามิเตอร์ที่เป็นทางการสุดท้ายมิฉะนั้นจะมีการรายงานข้อผิดพลาด

 // ฟังก์ชั่นการรายงานข้อผิดพลาด fn1 (a, ... rest, b) {
	console.log ([a, b, rest]);
- 

// วิธีที่ถูกต้องในการเขียนฟังก์ชั่น fn2 (a, b, ... พักผ่อน) {
    console.log ([a, b, rest]);
-

FN2 (1, 2, 3, 4) // เอาท์พุท [1, 2, [3, 4]]

ขยายไวยากรณ์

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

 ฟังก์ชั่นผลรวม (... ค่า) {
    ให้ผลรวม = 0;
    
    สำหรับ (ให้ val ของค่า) {
        sum += val;
    -
    
    จำนวนเงินที่ส่งคืน;
-

ให้ arr = [1, 2, 3, 4];

ผลรวม (arr);

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

ในตัวอย่างหากอาร์เรย์ถูกส่งผ่านค่าของค่าจะกลายเป็น [[1, 2, 3, 4]] ส่งผลให้มีเพียงองค์ประกอบเดียวในค่าอาร์เรย์และประเภทขององค์ประกอบนี้เป็นอาร์เรย์ . จากนั้นค่าการส่งคืนฟังก์ชั่นเป็นผลมาจากการเพิ่มค่า 0 และอาร์เรย์ [1, 2, 3, 4]

ในการแยกอาร์เรย์ออกไปและส่งผ่านไปยังฟังก์ชั่นมันเป็นไปไม่ได้ที่จะส่งผ่านในพารามิเตอร์ทีละหนึ่ง - sum(arr[0], arr[1], arr[2], arr[3]); เป็นไปไม่ได้เสมอไปคุณจะรู้ว่ามีองค์ประกอบกี่อย่างในอาร์เรย์และอาจมีองค์ประกอบมากมายในอาร์เรย์

เป็นไปได้มากกว่าที่จะใช้วิธีการสมัคร ():

 sum.apply (null, arr);

แต่นี่ยังไม่ใช่ทางออกที่ดีที่สุดดังนั้นนี่คือประเด็นสำคัญ!

ใหม่ ** ขยายไวยากรณ์ (สเปรด) ** ใน ES6 สามารถช่วยเราเผชิญกับสถานการณ์นี้ นอกจากนี้ยังใช้ ...变量名ตัวแปร

เมื่อเรียกใช้ฟังก์ชันแอปพลิเคชันของมันมีดังนี้:

 ผลรวม (... arr);

// เทียบเท่ากับผลรวม (1,2,3,4);

มันสามารถใช้กับค่าปกติตามต้องการไม่มีข้อ จำกัด ในตำแหน่งด้านหน้าและด้านหลังและวัตถุที่ทำซ้ำได้หลายรายการสามารถส่งผ่านในเวลาเดียวกัน:

 ผลรวม (-1, ... arr);
ผลรวม (... arr, 5);
ผลรวม (-1, ... arr, 5);
ผลรวม (-1, ... arr, ... [5, 6, 7]);

ผู้ดำเนินการขยายตัว ... เทียบเท่ากับการดำเนินการของพารามิเตอร์ที่ผ่านด้วยตนเองโดยแยกจากกันสำหรับเรา

แม้ว่าตัวอย่างข้างต้นจะมีไว้สำหรับอาร์เรย์ แต่ไวยากรณ์การขยายตัวสามารถทำอะไรได้มากกว่านั้น

สรุป

• พารามิเตอร์อย่างเป็นทางการเป็นตัวแปรท้องถิ่นที่ประกาศในฟังก์ชัน

• จำนวนพารามิเตอร์ที่เป็นทางการและพารามิเตอร์จริงอาจไม่เท่ากัน:

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

  ●พารามิเตอร์จริงเพิ่มเติมสามารถเข้าถึงได้ผ่านวัตถุ arguments ยกเว้นฟังก์ชั่นลูกศร

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

• ค่าเริ่มต้นพารามิเตอร์ของ ES6 - ค่าเริ่มต้นจะได้รับเฉพาะในกรณีที่ค่าพารามิเตอร์หายไปหรือ undefined เมื่อเรียกใช้ฟังก์ชัน

  ●พารามิเตอร์ที่ตั้งค่าเริ่มต้นสามารถละเว้นได้เฉพาะในกรณีที่วางไว้ในตำแหน่งสุดท้าย

  ●ค่าเริ่มต้นของการตั้งค่าพารามิเตอร์อย่างเป็นทางการไม่สามารถอ้างถึงตัวแปรในตัวแปรฟังก์ชัน แต่สามารถอ้างถึงพารามิเตอร์ที่เป็นทางการก่อนหน้าและตัวแปรภายนอก

  ●การใช้ค่าเริ่มต้นผ่าน object.assign () หรือการกำหนดโครงสร้างการกำหนดสามารถทำให้วิธีการส่งพารามิเตอร์ผ่านความยืดหยุ่นมากขึ้น

• ความแตกต่างที่สำคัญระหว่างพารามิเตอร์ที่เหลือและ arguments :

  ●พารามิเตอร์ที่เหลือมีเฉพาะพารามิเตอร์จริงที่ไม่มีพารามิเตอร์ที่เป็นทางการที่สอดคล้องกันในขณะที่วัตถุ arguments มีพารามิเตอร์จริงทั้งหมดที่ส่งผ่านไปยังฟังก์ชัน

  ●พารามิเตอร์ที่เหลือเป็นอินสแตนซ์ Array จริงในขณะที่ arguments เป็นเพียงวัตถุคล้ายอาร์เรย์

• ทั้งพารามิเตอร์ที่เหลือและไวยากรณ์การขยายใช้ตัวดำเนินการ ... ในสถานการณ์ที่เกี่ยวข้องกับฟังก์ชั่น:

  ●ปรากฏขึ้นที่ส่วนท้ายของรายการพารามิเตอร์ฟังก์ชันและเป็นพารามิเตอร์ที่เหลือ

  ●เกิดขึ้นในการเรียกใช้ฟังก์ชันมันเป็นไวยากรณ์การขยายตัว

ข้างต้นเป็นบทความที่อธิบายรายละเอียดของพารามิเตอร์ในฟังก์ชัน JavaScript