Kod Bersih dengan Parameter Lalai ES6 & Harta Shorthands

mata teras

Parameter lalai ES6 membenarkan nilai lalai dimulakan untuk fungsi, dan digunakan apabila parameter ditinggalkan atau tidak ditentukan. Ciri ini memudahkan kod dan menjadikannya lebih ringkas dan mudah dibaca kerana ia mengurangkan keperluan jika kenyataan dan cek lain.
ES6 Property Singkatan menyediakan cara untuk menjadikan kod lebih ringkas dan mudah dibaca, terutama ketika berurusan dengan objek konfigurasi yang besar. Tanpa menulis tugasan atribut lengkap, anda boleh memberikan nilai kepada atribut dengan nama yang sama dengan pembolehubah mereka menggunakan singkatan.
Parameter lalai dan singkatan atribut dalam ES6 boleh membuat kaedah lebih teratur dan dalam beberapa kes, lebih pendek. Mereka boleh membantu pemaju memberi tumpuan lebih kepada penggunaan praktikal kaedah tanpa terganggu oleh banyak persiapan lalai.
Walaupun singkatan atribut lebih banyak ciri penampilan, mereka dapat meningkatkan produktiviti dengan mengurangkan masa yang dihabiskan untuk menulis pembolehubah, mengkonfigurasi objek, dan kata kunci fungsi. Mereka juga boleh digunakan untuk definisi kaedah penggunaan dalam objek untuk mendapatkan kod bersih.

Membuat kaedah juga bermaksud menulis API -sama ada untuk diri sendiri, untuk pemaju lain di pasukan anda, atau untuk pemaju lain menggunakan projek anda. Bergantung pada saiz, kerumitan, dan tujuan fungsi, anda mesti mempertimbangkan tetapan lalai dan API input/output. Parameter fungsi lalai dan singkatan atribut adalah dua ciri mudah ES6 yang dapat membantu anda menulis API.

parameter lalai ES6

Marilah kita mengkaji semula pengetahuan dengan cepat dan kemudian melihat tatabahasa. Parameter lalai membolehkan kami memulakan nilai lalai untuk fungsi tersebut. Gunakan nilai lalai apabila parameter ditinggalkan atau tidak ditentukan - ini bermakna null adalah nilai yang sah. Hujah lalai boleh menjadi apa -apa dari nombor ke fungsi lain.

<code class="language-javascript">// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]</code>

Contoh praktikal

Mari lihat fungsi asas dan tunjukkan bagaimana parameter lalai dapat mempercepat perkembangan anda dan menjadikan kod anda lebih teratur. Kaedah contoh kami dipanggil CreateElement (). Ia menerima beberapa parameter konfigurasi dan mengembalikan elemen HTML. API kelihatan seperti ini:

<code class="language-javascript">// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 </p>
<p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div></code>

Pelaksanaan kaedah ini tidak akan mempunyai banyak logik, tetapi ia mungkin menjadi agak besar kerana liputan lalainya.

<code class="language-javascript">// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Setakat ini, semuanya berjalan lancar. Apa yang berlaku di sini? Kami melakukan perkara berikut:

Tetapkan nilai lalai untuk tag parameter kami dan konfigurasi sekiranya mereka tidak diluluskan (
1. Perhatikan bahawa beberapa pemeriksa kod tidak suka penugasan parameter )
Buat pemalar menggunakan kandungan sebenar (dan nilai lalai)
periksa jika nama kelas ditakrifkan, dan jika tidak, berikan array lalai
membuat dan mengubah suai elemen sebelum mengembalikannya

mari kita gunakan fungsi ini dan mengoptimumkannya untuk menjadikannya lebih mudah, lebih cepat untuk menulis, dan menunjukkan tujuannya dengan lebih jelas:

<code class="language-javascript">// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]</code>

Daripada menyentuh logik fungsi, kami memadamkan semua pemprosesan lalai dari badan fungsi. Tandatangan fungsi kini mengandungi semua nilai lalai. Biar saya jelaskan bahagian lebih jauh, yang mungkin sedikit mengelirukan:

<code class="language-javascript">// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 </p>
<p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div></code>

Kami bukan sahaja mengisytiharkan parameter objek lalai, tetapi juga mengisytiharkan atribut objek lalai . Ini menjadikan konfigurasi lalai kelihatan lebih jelas, dan bukan hanya mengisytiharkan objek lalai (mis. Config = {}) dan kemudian menetapkan sifat lalai kemudian. Ia mungkin mengambil masa tambahan untuk membiasakannya, tetapi akhirnya ia akan meningkatkan aliran kerja anda. Sudah tentu, untuk konfigurasi yang lebih besar, kita masih boleh berhujah bahawa ia boleh mewujudkan lebih banyak overhead, dan lebih mudah untuk mengekalkan pemprosesan lalai dalam badan fungsi.

Jika kaedah menerima objek konfigurasi besar sebagai parameter, kod anda mungkin menjadi agak besar. Amalan biasa adalah untuk menyediakan beberapa pembolehubah dan menambahnya ke objek. Singkatan atribut adalah gula sintaks

, yang boleh menjadikan langkah ini lebih pendek dan lebih mudah dibaca:

Memudahkan API anda

<code class="language-javascript">// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Baiklah, mari kita kembali ke contoh lain yang lebih umum. Fungsi berikut mengambil beberapa data, mengubahnya dan memanggil kaedah lain:

kita sering menamakan pembolehubah dan objek atribut nama yang sama. Menggunakan singkatan atribut yang digabungkan dengan dekonstruksi, kita sebenarnya boleh memendekkan kod tersebut:

<code class="language-javascript">// 默认所有内容
function createElement(tag = 'div', {
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  const element = document.createElement(tag);
  const text = document.createTextNode(content);

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Sekali lagi, ini mungkin mengambil sedikit masa untuk membiasakan diri. Pada akhirnya, ia adalah salah satu ciri baru dalam JavaScript yang membantu saya menulis kod lebih cepat dan menggunakan fungsi badan yang bersih. Tetapi tunggu, ada lagi! Singkatan atribut juga boleh digunakan untuk definisi penggunaan dalam objek:

<code class="language-javascript">// 这里到底发生了什么？
function createElement({
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  // 函数体
}</code>

Kesimpulan

<code class="language-javascript">const a = 'foo', b = 42, c = function() {};

// 以前我们会像这样使用这些常量。
const alphabet = {
  a: a,
  b: b,
  c: c
};

// 但是使用新的简写，我们现在实际上可以这样做，
// 这与上面相同。
const alphabet = {a, b, c};</code>

Parameter lalai dan singkatan atribut adalah cara terbaik untuk menjadikan kaedah anda lebih teratur dan, dalam beberapa kes, lebih pendek. Secara keseluruhannya, parameter fungsi lalai membantu saya memberi tumpuan lebih kepada penggunaan praktikal kaedah tanpa terganggu oleh banyak penyediaan lalai dan jika pernyataan. Singkatan atribut sememangnya lebih banyak ciri penampilan, tetapi saya mendapati diri saya lebih produktif dan menghabiskan lebih sedikit masa menulis semua pembolehubah, objek konfigurasi, dan kata kunci fungsi. Adakah anda sudah menggunakan parameter lalai dan singkatan atribut? Artikel ini disemak semula oleh Sebastian Seitz. Terima kasih kepada semua pengulas rakan sebaya untuk membuat kandungan SitePoint sempurna!

FAQ mengenai parameter lalai ES6 (Soalan Lazim)

Apakah kelebihan menggunakan parameter lalai ES6?

Parameter lalai ES6 menyediakan pelbagai kelebihan. Pertama, mereka membantu menjadikan kod anda lebih ringkas dan mudah dibaca. Tanpa memeriksa sama ada parameter tidak ditentukan dan kemudian memberikan nilai lalai, anda boleh melakukan segala -galanya dalam satu baris. Ini mengurangkan jumlah kod yang perlu anda tulis dan memudahkan orang lain memahami kod anda. Kedua, mereka membantu mencegah kesilapan. Sekiranya fungsi menjangkakan parameter tertentu tetapi tidak disediakan, ia mungkin mengakibatkan keputusan atau kesilapan yang tidak dijangka. Dengan menetapkan parameter lalai, anda boleh memastikan fungsi anda mempunyai semua parameter yang diperlukan untuk berfungsi dengan baik.

Bolehkah saya menggunakan parameter lalai ES6 dengan tugasan yang dibina semula?

Ya, anda boleh menggunakan parameter lalai ES6 dengan tugasan yang dibina semula. Ini adalah ciri kuat ES6 yang membolehkan anda membongkar nilai dalam tatasusunan atau sifat dalam objek ke dalam pembolehubah yang berbeza. Apabila digunakan bersamaan dengan parameter lalai, anda boleh mengekstrak nilai dari objek atau tatasusunan dan memberikan nilai lalai apabila nilai yang diekstrak tidak ditakrifkan.

Bagaimana parameter lalai ES6 berbeza daripada objek Argumen dalam JavaScript?

Objek argumen

adalah objek seperti array yang mengandungi semua parameter yang diserahkan kepada fungsi. Walau bagaimanapun, ia tidak mempunyai semua kaedah mempunyai tatasusunan dan tidak fleksibel seperti parameter lalai ES6. Dengan parameter lalai, anda boleh menetapkan nilai lalai untuk mana -mana parameter yang tidak ditentukan, yang tidak mungkin dalam objek Argumen.

Bolehkah saya menggunakan parameter lalai ES6 dalam pembina?

Ya, anda boleh menggunakan parameter lalai ES6 dalam pembina. Ini amat berguna apabila membuat contoh baru kelas. Sekiranya parameter tertentu tidak disediakan semasa membuat contoh baru, parameter lalai digunakan untuk memastikan objek baru mempunyai semua sifat yang diperlukan.

Adakah terdapat kesan prestasi untuk menggunakan parameter lalai ES6?

Secara umum, kesan prestasi menggunakan parameter lalai ES6 adalah kecil dan tidak sepatutnya menjadi masalah. Walau bagaimanapun, seperti mana -mana ciri, ia harus digunakan dengan berhati -hati. Penggunaan parameter lalai yang berlebihan, terutamanya dalam kod prestasi kritikal, boleh menyebabkan masa pelaksanaan yang perlahan. Seperti biasa, pastikan untuk menguji kod anda dan memantau prestasinya.

Bolehkah saya menggunakan parameter lalai ES6 dengan fungsi anak panah?

Ya, anda boleh menggunakan parameter lalai ES6 dengan fungsi anak panah. Fungsi anak panah yang diperkenalkan di ES6 memberikan sintaks ringkas untuk menulis ekspresi fungsi. Mereka amat berguna apabila menggunakan fungsi pesanan tinggi yang mengambil fungsi lain sebagai argumen.

Bagaimanakah nilai null dikendalikan oleh fungsi parameter lalai ES6?

Jika parameter melepasi nilai null, fungsi parameter lalai ES6 tidak akan memberikan nilai lalai. Ini kerana Null dianggap nilai dalam JavaScript, tidak seperti Undefined. Jika anda ingin memberikan nilai lalai apabila parameter itu batal, anda perlu menangani kes ini secara berasingan dalam kod anda.

Bolehkah saya menggunakan parameter lalai ES6 dalam fungsi rekursif?

Ya, anda boleh menggunakan parameter lalai ES6 dalam fungsi rekursif. Ini amat berguna apabila anda ingin menyediakan kes asas untuk fungsi rekursif tetapi tidak mahu meminta pemanggil untuk sentiasa memberikannya.

Bolehkah saya menggunakan parameter lalai ES6 dengan parameter yang tinggal?

Ya, anda boleh menggunakan parameter lalai ES6 dengan parameter yang tinggal. Walau bagaimanapun, ingat bahawa parameter yang selebihnya mestilah parameter terakhir dalam definisi fungsi. Di samping itu, anda tidak boleh memberikan nilai lalai kepada parameter yang tinggal sendiri, tetapi anda boleh memberikan nilai lalai kepada parameter individu untuk sebahagian daripada parameter yang tinggal.

Bolehkah saya menggunakan parameter lalai ES6 dengan pengendali lanjutan?

Ya, anda boleh menggunakan parameter lalai ES6 dengan pengendali lanjutan. Pengendali lanjutan membolehkan anda mengembangkan objek yang boleh dimakan seperti array kepada elemen individu. Apabila digunakan dengan parameter lalai, anda boleh lulus satu set nilai ke fungsi dan memberikan nilai lalai kepada mana -mana parameter yang tidak ditentukan.

Atas ialah kandungan terperinci Kod Bersih dengan Parameter Lalai ES6 & Harta Shorthands. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!