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

コアポイント

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

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

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

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

// 基本语法
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]

実用的な例

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

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

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

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

// 没有默认参数，它看起来相当臃肿且不必要地庞大。
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;
}

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

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

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

// 基本语法
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]

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

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

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

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

es6属性の略語

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

// 没有默认参数，它看起来相当臃肿且不必要地庞大。
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;
}

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

// 默认所有内容
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;
}

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

const a = 'foo', b = 42, c = function() {};

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

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

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

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

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

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

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

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