Artikel yang menjelaskan parameter dalam fungsi JavaScript secara detail

fungsi foo(a, b) {
    konsol.log([a, b]);
}

foo(1, 2); //

fungsi foo(a, b) {
    let a = 1; // Error, a telah dideklarasikan const b = 1; // Error, b telah dideklarasikan}

function add(num) {
    nomor pengembalian + 1;
}

misalkan hitung = 5;
let result = add(count); // Proses melewati parameter di sini dapat dianggap sebagai num = count

konsol.log(hitungan); // 5
console.log(hasil); // 6

function setName(obj) {
    obj.nama = "Xiao Ming";
}

biarkan orang = {};

setName(person); // Proses passing parameter disini dapat dilihat sebagai obj = person;
console.log(person); // {name: "Xiao Ming"}

fungsi foo(a, b) {
	console.log(argumen[0]);
    console.log(argumen[1]);
    console.log(argumen.panjang);
}

foo(10, 20); // Output 10, 20, 2 secara berurutan.

fungsi foo() {
	console.log(argumen[0]);
    console.log(argumen[1]);
}

foo(10, 20); // Output 10 dan 20 secara berurutan.

fungsi foo(a) {
	argumen[0]++;
    konsol.log(a);
}

foo(10); // Keluaran 11
//--------------------------
fungsi foo2(a) {
	a++;
    console.log(argumen[0]);
}

foo2(10); // Output 11

function foo(a,b) {
    argumen[1] = 2;
    konsol.log(b);
}

foo(1); // Keluaran tidak terdefinisi

foo(1, undefinisi); //

biarkan foo = () => {
    console.log(argumen[0]);
}foo(); // Kesalahan, argumen tidak terdefinisi.

function fn1(){.
    misalkan fn2 = () => {
    	console.log(argumen[0]);
    }
    
    fn2();
}fn1(5);

fungsi foo(obj) {
    console.log(obj.name, obj.sex, obj.age);
}

foo({ jenis kelamin: 'Laki-laki', usia: 18, nama: 'Xiao Ming' }); // Xiao Ming adalah laki-laki 18

function sayHi(name) {
    nama = nama ||. 'semua orang';
    
	console.log('Halo '+nama+'!');
}

sayHi(); // Keluarkan 'Halo semuanya!'

// pernyataan if menentukan fungsi sayHi(name) {.
	if (nama === tidak ditentukan) {
		nama = 'semuanya';
	}
    
	console.log('Halo '+nama+'!');
}

//Fungsi penilaian ekspresi ternary sayHi(nama) {
	nama = (nama !== tidak terdefinisi) ? nama : 'semua orang';
	
    console.log('Halo '+nama+'!');
}

function sayHi(name = 'everyone') { // Saat mendefinisikan suatu fungsi, tetapkan nilai secara langsung ke parameter formal console.log( 'Halo' + nama + '!');
}

sayHi(); // Keluaran 'Halo semuanya!' 
sayHi('Tony'); // Keluaran 'Halo Tony!' 
sayHi(undefinisi); // Keluaran 'Halo semuanya!'

function sayHi(name = 'every'+'one') {
	console.log('Halo '+nama+'!');
}

sayHi(); // Keluaran 'Halo semuanya!' 
//---------------------------
fungsi foo() {
    console.log('Memanggil foo');
    kembalikan 'Tony';
}

fungsi sayHi(nama = foo()) {
	console.log('Halo '+nama+'!');
}
		  
sayHi(); // Keluaran 'panggilan foo'
         // Keluaran 'Halo Tony!' 

sayHi(tidak terdefinisi); // Keluaran 'panggilan foo'
                  // Keluaran 'Halo Tony!' 

sayHi('John'); // Output 'Hello John!'

Biasanya kita menetapkan nilai default untuk parameter sehingga kita dapat menghilangkan parameter dengan tepat saat memanggil fungsi. Yang perlu diperhatikan di sini adalah ketika ada beberapa parameter, jika parameter dengan nilai default tidak ditempatkan di akhir, itu sebenarnya tidak mungkin untuk dihilangkan.

 fungsi fn(x = 1, y) {
	konsol.log([x, y]);
}

fn(); // keluaran[1, tidak ditentukan]
fn(2); //keluaran[2, tidak ditentukan]
fn(, 2); // Kesalahan, kesalahan sintaksis (slot kosong seperti array tidak didukung di sini)
fn(tidak terdefinisi, 2); // Output [1, 2] (Lebih baik meneruskan 1 demi kenyamanan!)

Dalam contoh di atas, nilai default yang ditetapkan untuk parameter formal x tampaknya tidak ada artinya. Oleh karena itu, yang terbaik adalah meletakkan parameter dengan nilai default di akhir:

 fungsi fn(x, y = 2) {
	konsol.log([x, y]);
}

fn(); // keluaran[tidak ditentukan, 2]
fn(1); //keluaran[1, 2]
fn(1, 1) //keluaran[1, 1]

Ketika beberapa parameter memiliki nilai default yang ditetapkan, masalah muncul lagi. Anda tidak dapat menghilangkan parameter sebelumnya dan hanya meneruskan parameter aktual ke parameter terakhir.

 fungsi fn(x, y = 2, z = 3) {
	konsol.log([x, y, z]);
}

fn(1, , 10) // Laporkan kesalahan

Kita telah mengetahui sebelumnya bahwa kita dapat menghindari pembatasan urutan parameter dengan meneruskan objek. Bagaimana cara menerapkan nilai default parameter? Menggunakan || . , pernyataan if atau ekspresi ternary untuk menilai juga merupakan solusi, tetapi ini tampaknya agak terbelakang. Selanjutnya adalah dua metode baru lainnya di ES6.

Nilai default parameter digunakan bersama dengan Object.assign()

 fungsi fn(obj = {}) {
    biarkan defaultObj = {
        x: tidak terdefinisi,
        kamu: 2,
        z: 3
    }
    
    biarkan hasil = Objek.tugaskan(defaultObj, obj);
    
	console.log([hasil.x, hasil.y, hasil.z]);
}

fn(); // keluaran [tidak ditentukan, 2, 3]
fn({ x: 1, z: 10 }); // Keluaran [1, 2, 10]

Dalam contoh di atas, objek defaultObj didefinisikan dalam fungsi, dan properti di dalamnya digunakan sebagai nilai default parameter. Kemudian Object.assagin() digunakan untuk menggabungkan objek masuk dan objek default tersebut properti di defaultObj akan menjadi Atribut obj yang sama akan diganti. Jika ada atribut lain di obj, atribut tersebut akan ditetapkan ke defaultObj. Di sini variabel digunakan untuk menerima objek gabungan yang dikembalikan.

Pada saat yang sama, nilai default parameter formal obj juga disetel ke objek kosong untuk mencegah tidak ada parameter yang diteruskan saat fungsi dipanggil, karena ini akan menyebabkan parameter kedua yang diterima oleh Object.assign() menjadi undefined , mengakibatkan kesalahan.

Nilai default parameter dan penetapan strukturisasi digunakan bersama-sama

Ketika suatu fungsi dipanggil, pencocokan parameter aktual dan parameter formal sebenarnya merupakan proses penugasan implisit. Oleh karena itu, penerusan parameter juga dapat didekonstruksi dan ditetapkan:

 fungsi fn({ x, y = 2, z = 3 }) {
    konsol.log([x, y, z]);
}

fn({}); // Keluaran [tidak ditentukan, 2, 3]
fn({ x: 1, z: 10 }); // Keluaran [1, 2, 10]

Dalam contoh ini, hanya nilai default dari penetapan strukturisasi objek yang digunakan, dan nilai default parameter fungsi tidak digunakan. Jika tidak ada parameter yang diteruskan saat fungsi dipanggil, kesalahan juga akan dilaporkan, karena hal ini akan menyebabkan tugas destrukturisasi gagal selama inisialisasi parameter, yang setara dengan mengeksekusi kode seperti {x, y = 2, z = 3} = undefined .

Demikian pula, Anda dapat menggunakan sintaks nilai default parameter untuk menyetel objek destrukturisasi default untuk {x, y = 2, z = 3} , sehingga fungsi tanpa meneruskan parameter dapat dijalankan dengan lancar:

 fungsi fn({ x, y = 2, z = 3 } = {}) {
    konsol.log([x, y, z]);
}

fn(); // keluaran [tidak ditentukan, 2, 3]

Ada nilai default ganda di sini, yang mungkin sedikit membingungkan. Jadi gunakan kode semu untuk menjelaskan proses inisialisasi parameter di atas:

 if(parameter aktual=== {...}) { // kapan fn({...});     
    { x, y = 2, z = 3 } = {...};
                        
} else if (parameter sebenarnya === tidak terdefinisi ){ // kapan fn();
    { x, y = 2, z = 3 } = {};

}

Ada satu detail yang memerlukan perhatian khusus pada nilai default ganda, yaitu perbedaan antara nilai default tugas destrukturisasi dan nilai default parameter fungsi.

 fungsi fn ({ x = 1 } = {}, { y } = { y: 2 }){
    konsol.log(x, y);
}

fn(); // Keluaran 1 2
fn({ x: 10 }, { y: 20 }); // Keluaran 10 20
fn({},{}); // 1 tidak terdefinisi

Dalam fungsi ini, ada dua set parameter yang menggunakan penugasan destrukturisasi. Tampaknya x dan y memiliki nilai default yang ditetapkan. Meskipun keduanya merupakan bentuk yang berbeda, hasilnya jelas tidak sama di setiap kasus. Jika parameter yang diteruskan adalah {} , y tidak mendapatkan nilai default 2. Mengapa demikian? Dikombinasikan dengan contoh pseudocode sebelumnya:

 fn({ x: 10 }, { y: 20 }); // Selama inisialisasi: { x = 1 } = { x: 10 }, { y } = { y: 20 }

fn({},{}); // Selama inisialisasi: { x = 1 } = {}, { y } = {}

Jika parameter yang diteruskan adalah {} , parameter fungsi tidak hilang atau undefined , sehingga nilai default parameter fungsi tidak berpengaruh. Pada saat yang sama, tidak ada nilai yang sesuai untuk x dan y di {} . 1 yang diperoleh x adalah nilai default dari tugas destrukturisasi, dan y tidak memiliki nilai default untuk tugas destrukturisasi, jadi defaultnya adalah undefined .

Cakupan dan zona mati sementara dari nilai default parameter

Ada detail kecil lainnya. Setelah parameter disetel ke nilai default, parameter tersebut akan membentuk cakupannya sendiri (dibungkus dalam (...) ), sehingga variabel dalam badan fungsi tidak dapat direferensikan:

 fungsi foo(a = b) {
    misalkan b = 1;
}

foo(); // Kesalahan, b tidak terdefinisi

Namun cakupan ini hanya bersifat sementara. Setelah parameter diinisialisasi, cakupan ini tidak akan ada lagi.

Ini juga mengikuti aturan lingkup biasa:

 misalkan b = 2;

fungsi foo(a = b) {
    misalkan b = 1;
    kembalikan a;
}

foo(); // 2

Pada contoh diatas, terdapat variabel global b, maka parameter formal a akan mendapatkan nilai dari variabel global b.

Tentu saja, jika ada parameter formal b dalam cakupan parameter formal, maka ia akan memperoleh cakupan saat ini terlebih dahulu:

 misalkan b = 2;

fungsi foo(b = 3,a = b) {
    kembalikan a;
}

foo(); // 3

Tetapkan nilai default untuk beberapa parameter, parameter tersebut akan diinisialisasi secara berurutan, mengikuti aturan "zona mati sementara", yaitu parameter sebelumnya tidak dapat merujuk ke parameter selanjutnya:

 fungsi foo(a = b, b = 2) {
    kembalikan a+b;
}

foo(); // Kesalahan, b tidak dapat diakses sebelum inisialisasi

6. Pengumpulan dan perluasan parameter

parameter yang tersisa

ES6 menyediakan sintaks **parameter tersisa (sisanya)** ( ...变量名), yang dapat mengumpulkan parameter aktual fungsi yang berlebihan (yaitu, parameter aktual yang tidak sesuai dengan parameter formal), sehingga tidak ada perlu menggunakan objek arguments . Mengerti. Jika parameter formal digunakan dengan operator ... , parameter tersebut akan menjadi array, dan parameter aktual yang berlebihan akan dimasukkan ke dalam array ini.

Penggunaan dasar parameter yang tersisa:

 fungsi jumlah(a, ...nilai) {
 
    for (biarkan val nilai) {
        sebuah += val;
    }
    
    kembalikan a;
}

jumlah(0, 1, 2, 3); // 6

Dalam contoh di atas, selama inisialisasi parameter, pencocokan pertama-tama dilakukan berdasarkan posisi parameter, 0 ditetapkan ke a, dan kemudian sisa parameter 1, 2, dan 3 akan dimasukkan ke dalam nilai array.

Berikut ini adalah contoh perbandingan penggunaan objek arguments dan parameter yang tersisa untuk mendapatkan parameter:

 // Cara menulis argumen function sortNumbers() {
	return Array.prototype.slice.call(argumen).sort();
}

// Cara menulis parameter yang tersisa const sortNumbers = (...numbers) => {
    mengembalikan angka.sort();
}

Terlihat bahwa parameter lainnya ditulis lebih ringkas. Meskipun arguments adalah objek mirip array dan objek yang dapat diubah, ia bukanlah array. Itu tidak mendukung metode array. Saat kita menggunakan arguments , jika kita ingin memanggil metode array, kita harus menggunakan Array.prototype.slice.call untuk mengubahnya menjadi array terlebih dahulu.

Parameter yang tersisa berbeda dari objek arguments , mereka adalah contoh Array nyata dan dapat dengan mudah menggunakan metode array. Dan fungsi panah juga mendukung parameter lainnya.

Selain itu, penggunaan parameter yang tersisa tidak mempengaruhi fungsionalitas objek arguments , masih dapat mencerminkan parameter yang diteruskan saat memanggil fungsi.

• Posisi parameter lainnya

Parameter yang tersisa harus menjadi parameter formal terakhir, jika tidak, kesalahan akan dilaporkan.

 // Fungsi pelaporan kesalahan fn1(a, ...rest, b) {
	console.log([a, b, istirahat]);
} 

//Cara yang benar untuk menulis fungsi fn2(a, b, ...rest) {
    console.log([a, b, istirahat]);
}

fn2(1, 2, 3, 4) // Keluaran [1, 2, [3, 4]]

Perluas sintaksis

Sebelumnya kita telah mengetahui cara mengumpulkan parameter redundan ke dalam array, namun terkadang kita perlu melakukan hal sebaliknya, seperti meneruskan elemen dalam array ke suatu fungsi secara terpisah alih-alih meneruskan array, seperti ini :

 fungsi jumlah(...nilai) {
    misalkan jumlah = 0;
    
    for (biarkan val nilai) {
        jumlah += val;
    }
    
    jumlah pengembalian;
}

misalkan arr = [1, 2, 3, 4];

jumlah(arr); // "01,2,3,4"

Fungsi pada contoh di atas akan mengakumulasikan semua nilai yang diteruskan. Jika kita meneruskannya ke dalam array secara langsung, kita tidak akan mendapatkan hasil yang kita inginkan.

Dalam contoh, jika sebuah array dilewatkan, nilai dari value akan menjadi [[1, 2, 3, 4]] , sehingga hanya ada satu elemen dalam nilai array, dan tipe elemen ini adalah array . Kemudian nilai kembalian fungsi adalah hasil penjumlahan nilai 0 dan array [1, 2, 3, 4] . Kedua tipe tersebut secara implisit diubah menjadi string, dan kemudian dijumlahkan.

Untuk membongkar array dan meneruskannya ke dalam fungsi, pertama-tama tidak mungkin meneruskan parameter satu per satu - sum(arr[0], arr[1], arr[2], arr[3]); , karena itu tidak selalu memungkinkan Anda mengetahui berapa banyak elemen yang ada di dalam array, dan mungkin ada banyak elemen di dalam array. Tidaklah bijaksana untuk meneruskannya secara manual.

Lebih layak menggunakan metode apply():

 jumlah.berlaku(null, arr); // 10

Namun ini belum merupakan solusi optimal, jadi inilah poin kuncinya!

**expand syntaks (spread)** baru di ES6 dapat membantu kita menghadapi situasi ini. Ia juga menggunakan ...变量名. Meskipun sama dengan sintaks parameter lainnya, tujuannya benar-benar berlawanan.

Ketika fungsi tersebut dipanggil, penerapannya adalah sebagai berikut:

 jumlah(...arr); // 10

// Setara dengan jumlah(1,2,3,4);

Ia bahkan dapat digunakan dengan nilai reguler sesuka hati, tidak ada batasan pada posisi depan dan belakang, dan beberapa objek yang dapat diubah dapat diteruskan secara bersamaan:

 jumlah(-1, ...arr); // 9
jumlah(...arr, 5); // 15
jumlah(-1, ...arr, 5); // 14
jumlah(-1, ...arr, ...[5, 6, 7]); // 27

Operator ekspansi ... setara dengan menyelesaikan operasi meneruskan parameter secara manual secara terpisah untuk kita. Fungsi ini hanya mengetahui bahwa parameter aktual yang diterima adalah nilai individual, dan tidak akan memiliki efek lain karena adanya operator ekspansi.

Meskipun semua contoh di atas ditujukan untuk array, sintaks perluasan dapat melakukan lebih dari itu. Objek iterable lainnya seperti string dan objek literal dapat diperluas. Untuk informasi lebih lanjut, silakan lihat → Sintaks Ekspansi

Meringkaskan

• Parameter formal adalah variabel lokal yang dideklarasikan dalam fungsi. Parameter aktual yang diteruskan ke fungsi akan ditetapkan ke parameter formal. Peneruskan parameter fungsi sebenarnya merupakan proses penugasan implisit.

• Jumlah parameter formal dan parameter aktual mungkin tidak sama:

  ● Parameter formal dengan parameter aktual yang hilang akan mendapatkan nilai default undefined .

  ● Parameter aktual tambahan dapat diakses melalui objek arguments , kecuali fungsi panah.

• Anda dapat meneruskan objek sehingga urutan parameter penerusan tidak lagi penting, dan membiarkan properti dalam objek digunakan sebagai parameter sebenarnya.

• Nilai default parameter ES6—nilai default hanya akan diperoleh jika nilai parameter hilang atau undefined saat fungsi dipanggil.

  ● Parameter yang menetapkan nilai default hanya dapat dihilangkan jika ditempatkan di posisi terakhir.

  ● Nilai default pengaturan parameter formal tidak dapat mengacu pada variabel dalam isi fungsi, namun dapat merujuk pada parameter formal sebelumnya dan variabel eksternal.

  ● Menerapkan nilai default melalui Object.assign() atau mendestrukturisasi penugasan dapat membuat metode penerusan parameter menjadi lebih fleksibel.

• Perbedaan utama antara parameter dan arguments yang tersisa:

  ● Parameter selebihnya hanya berisi parameter aktual yang tidak memiliki parameter formal terkait, sedangkan objek arguments berisi semua parameter aktual yang diteruskan ke fungsi.

  ● Parameter selebihnya adalah instance Array nyata, sedangkan arguments hanyalah objek mirip array.

• Parameter yang tersisa dan sintaks perluasan menggunakan ... operator, dalam skenario terkait fungsi:

  ● Muncul di akhir daftar parameter fungsi dan merupakan parameter tersisa.

  ● Terjadi pada pemanggilan fungsi, ini adalah sintaks perluasan.

Di atas adalah artikel yang menjelaskan detail parameter pada fungsi JavaScript. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di website php Cina!