Petua parameter_javascript lalai fungsi ECMAScript6

Setiap ciri baharu yang ditambah semasa kemas kini bahasa diekstrak daripada keperluan berjuta-juta pembangun Penggunaan Standard boleh mengurangkan kesakitan pengaturcara dan membawa kemudahan.

Kami sering menulis begini

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

Ringkasnya, x dan y memberikan nilai lalai 0. Apabila tidak diluluskan, x dan y dikira dengan nilai 0. Setelah lulus, nilai sebenar akan digunakan untuk pengiraan.

Contoh lain ialah mentakrifkan ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

Fungsi ajax ringkas yang dirangkumkan dengan JS asli.

Contoh lain ialah mentakrifkan kelas segi empat tepat

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

Tanpa melepasi sebarang parameter apabila baharu, segi empat tepat dengan lebar dan ketinggian lalai 200*300 akan dibuat.

Sama ada kelas calc, ajax atau Rectangle, kita semua perlu mengendalikan nilai lalai dalam badan fungsi, bukankah lebih baik jika bahasa mengendalikannya dengan sendirinya? ES6 menyediakan ciri ini (Parameter Lalai Yang berikut ialah calc, ajax, dan Rectangle yang ditulis semula dengan ciri baharu ES6.

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

Seperti yang anda lihat, ES6 mengalihkan bahagian nilai lalai daripada kurungan ke kurungan, dan turut mengurangkan operasi "||" dan badan fungsi telah dikecilkan. Nilai lalai parameter harus berada di tempat di mana parameter ditentukan, yang kelihatan lebih mudah. O(∩_∩)O

Parameter lalai boleh ditakrifkan pada sebarang kedudukan, seperti mentakrifkan

di tengah

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

mentakrifkan parameter lalai async, url dan kejayaan diperlukan Dalam kes ini, anda perlu menetapkan parameter tengah kepada undefined

ajax('../user.action', undefined, function() {
   
})

Perhatikan, jangan ambil mudah dan tukar undefined kepada null Walaupun null == undefined, selepas melepasi null, async dalam badan fungsi akan menjadi batal dan tidak benar.

Perkara berikut perlu diberi perhatian:

1. Selepas mentakrifkan parameter lalai, atribut panjang fungsi akan dikurangkan, iaitu beberapa parameter lalai tidak termasuk dalam pengiraan panjang

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. Let dan const tidak boleh digunakan untuk mengisytiharkan nilai lalai sekali lagi, var boleh menjadi

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

Satu lagi perkara yang menarik ialah: parameter lalai tidak boleh menjadi jenis nilai, ia boleh menjadi panggilan fungsi

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

Anda boleh melihat bahawa parameter kejayaan di sini ialah panggilan fungsi Jika parameter ketiga tidak diluluskan semasa memanggil ajax, fungsi getCallback akan dilaksanakan, yang mengembalikan fungsi baharu yang diberikan kepada kejayaan. Ini adalah fungsi yang sangat berkuasa yang memberikan pengaturcara banyak ruang untuk imaginasi.

Sebagai contoh, anda boleh menggunakan ciri ini untuk memaksa parameter tertentu diluluskan, jika tidak, ralat akan dilaporkan

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.