ES6デフォルトのパラメーターとプロパティの略記を備えたクリーンコード

コアポイント

• ES6デフォルトパラメーターにより、機能のデフォルト値を初期化し、パラメーターが省略または未定義の場合に使用されます。この機能により、コードが簡素化され、ステートメントやその他のチェックが必要になるため、より簡潔で読みやすくなります。
• ES6プロパティの略語は、特に大規模な構成オブジェクトを扱う場合、コードをより簡潔で読みやすくする方法を提供します。完全な属性割り当てを書くことなく、略語を使用して変数と同じ名前の属性に値を割り当てることができます。
• ES6のデフォルトのパラメーターと属性の略語により、メソッドがより整然と、場合によってはより短くなる可能性があります。開発者は、多くのデフォルトの準備に気を取られることなく、メソッドの実用的な使用にもっと集中するのに役立ちます。
• 属性の略語は外観機能のようなものですが、変数の作成に費やした時間を短縮し、オブジェクトの構成、機能キーワードを減らすことで生産性を向上させることができます。また、クリーナーコードを取得するために、オブジェクト内でメソッド定義を使用するために適用することもできます。

メソッドの作成とは、APIを作成することも意味します。自分のためであれ、チームの他の開発者、またはプロジェクトを使用している他の開発者のために。関数のサイズ、複雑さ、および目的に応じて、デフォルトの設定と入力/出力APIを考慮する必要があります。デフォルトの関数パラメーターと属性の略語は、APIの書き込みに役立つES6の2つの便利な機能です。

es6デフォルトパラメーター

知識をすばやく確認してから、文法を見てみましょう。デフォルトのパラメーターを使用すると、関数のデフォルト値を初期化できます。パラメーターが省略または未定義の場合にデフォルト値を使用します - これは、nullが有効な値であることを意味します。デフォルトの引数は、数字から別の関数までのすべてのものです。

<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>

実用的な例

基本的な関数を見て、デフォルトのパラメーターが開発をスピードアップし、コードをより良く整理する方法を示しましょう。例の方法は、createElement（）と呼ばれます。いくつかの構成パラメーターを受け入れ、HTML要素を返します。 APIは次のようになります：

<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>

このメソッドの実装にはあまり論理はありませんが、デフォルトのカバレッジにより非常に大きくなる可能性があります。

<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>

これまでのところ、すべてがうまくいきました。ここで何が起こっているのですか？次のことをしています：

1. パラメータータグと構成のデフォルト値を設定します。渡されない場合に備えてください（一部のコード検査官は、パラメーターの再割り当てが好きではないことに注意してください））
）
2. 実際のコンテンツ（およびデフォルト値）を使用して定数を作成します
3. クラス名が定義されているかどうかを確認し、そうでない場合は、デフォルトの配列を割り当てます
要素を返す前に
4. 作成して変更します

この関数を使用して、それを最適化して、それをよりシンプルに、より速く書き、その目的をより明確に示すようにしましょう。

<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>

関数のロジックに触れる代わりに、関数本文からすべてのデフォルト処理を削除しました。関数署名には、すべてのデフォルト値が含まれるようになりました。さらに説明しましょう。これは少し混乱するかもしれません：

<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>

デフォルトのオブジェクトパラメーターを宣言するだけでなく、デフォルトのオブジェクト属性を宣言します。これにより、デフォルトのオブジェクト（config = {}など）を宣言し、後でデフォルトのプロパティを設定するだけでなく、デフォルトの構成がより明確に見えるようになります。慣れるには余分な時間がかかるかもしれませんが、最終的にはワークフローが改善されます。もちろん、大規模な構成の場合でも、より多くのオーバーヘッドを作成する可能性があると主張することができ、関数の本体にデフォルトの処理を維持する方が簡単だと主張することができます。

es6属性の略語

メソッドがパラメーターとして大規模な構成オブジェクトを受け入れると、コードが非常に大きくなる可能性があります。通常のプラクティスは、いくつかの変数を準備してオブジェクトに追加することです。属性の略語は

Syntax Sugarです。これにより、このステップが短くて読みやすくなります。

APIを簡素化します

<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>

わかりました、もう1つのより一般的な例に戻りましょう。次の関数はいくつかのデータを採用し、それを変更し、別の方法を呼び出します：

しばしば、変数とオブジェクト属性名を同じ名前にします。解体と組み合わせた属性の略語を使用して、実際にコードを大幅に短縮できます：

<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>

繰り返しますが、これには慣れるまでに時間がかかる場合があります。最終的に、これはJavaScriptの新機能の1つであり、コードをより速く書き、よりクリーンな機能を使用するのに役立ちます。しかし、待って、もっとあります！属性の略語は、オブジェクト内の使用法の定義にも適用できます。

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

結論

<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>

デフォルトのパラメーターと属性の略語は、メソッドをより整理し、場合によっては短くするための優れた方法です。全体として、デフォルトの関数パラメーターは、多くのデフォルトの準備に気を取られることなく、およびステートメントの場合にメソッドの実際の使用にもっと焦点を合わせるのに役立ちました。属性の略語は確かに外観機能のものですが、私は自分自身がより生産的であり、すべての変数、構成オブジェクト、および関数キーワードの書き込みに費やす時間を減らします。すでにデフォルトのパラメーターと属性の略語を使用していますか？ この記事は、セバスチャン・セイツによって査読されました。 SitePointコンテンツを完璧にしてくれたすべてのSitePointピアレビュアーに感謝します！

ES6デフォルトパラメーター（FAQ） についての

FAQ ES6デフォルトパラメーターを使用することの利点は何ですか？

ES6デフォルトパラメーターは複数の利点を提供します。まず、コードをより簡潔で読みやすくするのに役立ちます。パラメーターが未定義であるかどうかを確認してからデフォルト値を割り当てることなく、すべてを1行で実行できます。これにより、記述する必要があるコードの量が減り、他の人がコードを理解しやすくなります。第二に、エラーを防ぐのに役立ちます。関数が特定のパラメーターを予想しているが提供されていない場合、予期しない結果やエラーが発生する可能性があります。デフォルトのパラメーターを設定することにより、機能が適切に機能するために必要なすべてのパラメーターがあることを確認できます。

分解された割り当てでES6デフォルトパラメーターを使用できますか？

はい、分解された割り当てでES6デフォルトパラメーターを使用できます。これはES6の強力な機能であり、オブジェクト内の配列またはプロパティの値を異なる変数に解除できるようにします。デフォルトのパラメーターと組み合わせて使用​​する場合、抽出された値が定義されていない場合に、オブジェクトまたは配列から値を抽出し、デフォルト値を割り当てることができます。

引数オブジェクトは、関数に渡されたすべてのパラメーターを含む配列のようなオブジェクトです。ただし、配列を持つすべての方法はなく、ES6デフォルトパラメーターほど柔軟ではありません。デフォルトのパラメーターを使用すると、引数オブジェクトでは不可能な未定義のパラメーターのデフォルト値を設定できます。

コンストラクターでES6デフォルトパラメーターを使用できますか？

はい、コンストラクターのES6デフォルトパラメーターを使用できます。これは、クラスの新しいインスタンスを作成するときに特に役立ちます。新しいインスタンスを作成するときに特定のパラメーターが提供されていない場合、デフォルトのパラメーターは、新しいオブジェクトに必要なすべてのプロパティがあることを確認するために使用されます。

ES6デフォルトパラメーターの使用にパフォーマンスの影響はありますか？

一般的に言えば、ES6デフォルトパラメーターを使用することのパフォーマンスへの影響は小さく、問題ではありません。ただし、他の機能と同様に、注意して使用する必要があります。特にパフォーマンスクリティカルコードでのデフォルトパラメーターの過度の使用により、実行時間が遅くなる可能性があります。いつものように、必ずコードをテストし、そのパフォーマンスを監視してください。

矢印関数でES6デフォルトパラメーターを使用できますか？

はい、矢印関数を使用してES6デフォルトパラメーターを使用できます。 ES6で導入された矢印関数は、機能式を書き込むための簡潔な構文を提供します。これらは、他の機能を引数として使用する高次関数を使用する場合に特に役立ちます。

ES6のデフォルトパラメーター関数によってヌル値はどのように処理されますか？

パラメーターがnull値を渡す場合、ES6デフォルトパラメーター関数はデフォルト値を割り当てません。これは、Nullが未定義とは異なり、JavaScriptの値と見なされるためです。パラメーターがnullの場合にデフォルト値を割り当てる場合は、このケースをコードで個別に処理する必要があります。

再帰関数でES6デフォルトパラメーターを使用できますか？

はい、再帰関数でES6デフォルトパラメーターを使用できます。これは、再帰機能の基本ケースを提供したいが、発信者に常に提供するように依頼したくない場合に特に便利です。

残りのパラメーターでES6デフォルトパラメーターを使用できますか？

はい、残りのパラメーターでES6デフォルトパラメーターを使用できます。ただし、残りのパラメーターは関数定義の最後のパラメーターでなければならないことを忘れないでください。さらに、残りのパラメーター自体にデフォルト値を割り当てることはできませんが、残りのパラメーターの一部の個々のパラメーターにデフォルト値を割り当てることができます。

拡張機能を使用してES6デフォルトパラメーターを使用できますか？

はい、拡張オペレーターでES6デフォルトパラメーターを使用できます。拡張オペレーターを使用すると、個々の要素への配列などの反復可能なオブジェクトを拡張できます。デフォルトのパラメーターで使用すると、値のセットを関数に渡し、デフォルト値を未定義のパラメーターに割り当てることができます。

以上がES6デフォルトのパラメーターとプロパティの略記を備えたクリーンコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。