コードの CLEAR と MAIN を簡単にする簡単なヒント

フロントエンド プログラマーとしての私自身の経験から、コードを柔軟にし、コードの読み取り機能と保守機能を向上させるために、コードを書くときに独自の習慣を身につけることがよくあります。
これらはすべて非常にシンプルですが、非常に役立つヒントなので、一目見ただけで完全に理解できるように共有したいと思います。

テクニック 1: if-else ステートメントの数を減らす

2 つ以上の if-else を使用するものを記述するたびに、コードを記述するより最適な方法があるかどうかを検討する必要があります。簡単な例は次のとおりです:

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

この例では、電話ブランドの価格を取得する関数を作成しています。oppo の電話の価格を追加したい場合は、if-else 分岐を追加するか、電話の価格を変更する必要があります。電話。Xiaomi 携帯電話の位置を見つけるには、一生懸命努力する必要があります。
このようなコードを記述すると、コードが冗長になったり、読みにくくなったり、検索や展開が難しくなったりするなどのエラーが発生しやすくなる可能性があります。
ただし、DRY 原則に違反せずに正しく書く方法を説明しますので、心配しないでください。 if-else-if
チェーンを使用する代わりに、オブジェクトを使用して商品の価格を保存します。

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

上記の改良された例では、コードをより明確に読み取ることができます。また、製品の価格を変更したい場合に、getPrice() 関数のコア ロジックを変更する必要がありません。

手法 2: パイプライン手法により不必要なループ数を削減する

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

これは従来の方法であり、for ループを使用して配列内の各要素をループし、どの要素が条件を満たすかを確認してから結果の配列に追加できます。
上記の方法は間違っていませんが、このようなコードを書くとコードが冗長になり読みにくくなる可能性があります。代わりに、フィルターやマップなどの一般的な関数を使用して、コードを簡潔に保ち、セマンティクスを強化できます。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

テクニック 3: find を使用して重複ループを置換する

上記の電話セグメントの例を続けます。次に、find を使用すると明らかに便利であることがわかります

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

この検索方法を使用すると、指定された条件を満たす配列内の最初の要素をすばやく見つけることができるため、従来のループを使用するよりもコードがはるかに明確になります。

テクニック 4: インクルードを使用して冗長ループを置き換える

配列に特定の値が含まれているかどうかを確認する必要がある場合、配列をループして要素の存在を確認する代わりに、インクルードを使用するとコードを簡素化できます。

例:

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

インクルードを使用するだけです:

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

この方法は、従来のループを使用するより面倒なプロセスに対する洗練されたソリューションを提供します。

この機能は、頻繁にチェックする必要がある配列を扱う場合に特に便利です。

テクニック 5: 固有の結果を返す変数を使用する

私の知る限り、特にコンパクト関数では、返される結果に一貫した変数名を使用できます。これにより、戻り値の出所が明確になり、他の人がコードを読んだ場合に簡単に認識できる標準の変数命名規則が提供されます。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

テクニック 6: オブジェクトの整合性を維持する

バックエンドから返された JSON データを操作する際、キーと値の特定の属性を個別に処理することがよくあります。少数の属性のみを使用するケースが時々ある場合、これはさらに明白になります。 多くのプログラマーは、操作に必要なプロパティのみを抽出する傾向があります。これは人々が最初に考える方法ですが、これは実際的で一時的な方法です。

関数が後で追加の依存関係を必要とするかどうかが不確実な場合は、オブジェクト全体の整合性を維持することをお勧めします。たとえば、関数コンポーネントではアイコンとコンテンツを使用できますが、タイトルや日付は後で使用できる場合があります。個々のプロパティではなくオブジェクト全体を関数コンポーネントに渡すと、props リストの長さが短縮されるだけでなく、コードの可読性と柔軟性も向上します

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

?最終的な結論

上記の JS コーディング手法により、コードのパフォーマンスの品質が向上し、長期的には読みやすく、保守しやすくなります。したがって、これらの簡単なヒントをプロジェクトで試して、改善を直接体験してください。コーディングを楽しんでください!!!

以上がコードの CLEAR と MAIN を簡単にする簡単なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。