検索
ホームページウェブフロントエンドjsチュートリアルカンマ演算子の説得力のあるケース

A Compelling Case for the Comma Operator

カンマ演算子は、JavaScript や C++ などの C 系言語ではあまり知られていない演算子の 1 つです。基本的に、一連の式を区切って、最後の式の結果のみを返します。

const a = 1;
const b = 2;
const c = 3;
const result = (a, b, c, 4, 5, 6, true);
console.log(result); // true
if (false, true) console.log('hello'); // hello

そのとき、次の疑問が生じるのは自然です: 複数の式を 1 行に詰め込むのが役立つのはいつですか? さらに、たとえそれが便利だったとしても、なぜカンマで区切られた一連の式を (1 行に詰め込む必要があるのでしょうか)単一行)は、セミコロンで区切られた一連のステートメント(複数行にわたる)よりも読みやすく保守しやすいでしょうか?どちらを優先すべきか?

これらは私が何年も答えられずに苦労してきた質問ですが、今ようやく答えが見つかったと思います。この記事では、カンマ演算子に関する説得力のあるケース (おそらく率直に言って唯一のケース) を紹介します。

やる気を起こさせる例

まず条件付き三項演算子について話しましょう。以下に示すように、条件が真実であれば、値を評価します。それ以外の場合は、別のものを評価します。ブランチは条件が満たされた場合にのみ実行されるため、ここでは「評価」というキーワードが強調されています。

const result = condition ? value : another;

ほとんどの場合、それはきちんとしていて美しいです。ただし、条件値を返すの分岐間で、より複雑なロジックを実行する必要がある場合は、問題が発生します。この時点で、私たちは次のような残念な倒錯に頼ることになります:

let result; // Uninitialized! Yikes!
if (condition) {
    // Do some complex stuff in between...
    doSomething();
    // ...
    result = value; // Actual Assignment
} else {
    // Do other complex stuff in between...
    doAnotherThing();
    // ...
    result = another; // Actual Assignment
}
// Hopefully we didn't forget to initialize `result`!

この定式化には多くの問題があります。

  1. 結果は最初は初期化されていません。これは本質的に悪いことではありませんが、未定義によるバグを回避するための試行済みの簡単な方法は、常に変数を初期化することです。
  2. 結果の初期化は文字通りブランチの最後にあり、その宣言からははるかに切り離されています。
  3. 条件式の終わりまでに、結果が確実に初期化されることを期待します。私たちがそうではないとしても、チームメイトが同様にそれを徹底することを願っています。今はそうではないとしても、将来の開発者もそれを支持することを願っています!

条件付き 3 項式を使用する場合、この制限を回避する方法があります。コードを関数にリファクタリングするだけです。それは確かに言うは易く行うは難しです。このギミックはすぐに古くなってしまいます!

function computeWrappedValue() {
    // ...
    return value;
}

function computeWrappedAnother() {
    // ...
    return another;
}

// How cumbersome!
const result = condition ? computeWrappedValue() : computeWrappedAnother();

式ベースのプログラミング言語 (Rust など) には、より洗練されたソリューションがあります。 if ステートメント を if として再分類することで、各分岐を評価して、後で変数に格納できる値を返すことができます。

// A conditional ternary operator thus looks like this. Each branch
// returns a value, which is captured by the `result` variable.
// We thus ensure that `result` is always initialized by construction.
let result = if condition { value } else { another };
// If we wanted to do something more complex, we use the same syntax.
let result = if condition {
    do_something();
    // In Rust, the last expression without a semicolon is the value
    // that will be "returned" by the overall `if` expression.
    result
} else {
    do_another_thing();
    another
};

これを C に似た言語でエミュレートできますか? あなたはおそらく私がこれでどこへ向かうのかずっと前から予想していたと思いますが、そうです!

説得力のある事例

私たちが望んでいるのは、三項分岐内で値を返すにステートメントを任意に実行する方法です。幸いなことに、これはまさに、カンマ演算子の用途です。

// Parenthesized for clarity.
const result = condition
    ? (doSomething(), value)       // evaluates to `value`
    : (doAnotherThing(), another); // evaluates to `another`

この定式化の優れた点は、分岐式が必要な場合にのみ評価されるという事実です。式ベースのプログラミング言語の動作を効果的にエミュレートします。アドホックなラッパー関数の時代は終わりました!

しかし残念ながら、 このテクニックでは限界までしかできません。十分に大きい n の場合、n 個のステートメントを 1 行に詰め込むと、すでに独自の関数にリファクタリングされ始めることが想像できます。個人的には、n > の時点ですでに再考していると思います。 3. それ以上のものは可読性の点で疑わしい構造です。

// Maybe we should reconsider here?
const result = condition
    ? (x++, thing = hello(), doSomething(), value)
    : (++y, thing = world(), doAnotherThing(), another);
// Okay, stop. Definitely turn back now!
const result = condition
    ? (
        x++,
        thing = hello(),
        doSomething(),
        doMore(y),
        doEvenMore(thing),
        value,
    ) : (
        ++y,
        thing = world(),
        doAnotherThing(),
        doMore(y),
        doEvenMore(thing),
        another,
    );
// Unless, of course, you're fine with this. It kinda does
// look like a Rust `if` expression if you squint hard enough.

結論

最後に、コンマ演算子の説得力のあるケース、つまり複雑な条件付き三項演算を見てきました。カンマ演算子は、分岐が短くて優れている場合には威力を発揮しますが、ステートメントが 3 つインライン化されるとすぐに時代遅れになります。その時点で、コードをリファクタリングしたほうがよいでしょう。

では、カンマ演算子を使用する必要がありますか? 正直に言うと...そうです!読みやすいコードは次の読者のことを念頭に置いたものであるため、カンマチェーンが異常に長くない限り、私はこのコーディング スタイルを受け入れ、さらには奨励します。代替手段 (つまり、初期化されていない変数やリファクタリングされたマイクロ関数) を考慮すると、結局のところ、カンマ演算子はそれほど悪くありません。

実際には、私はすでに自分のコードベースにこれらのおかしな見た目のカンマ演算子を散りばめています。公平を期すために言っておきますが、とにかく複数ステートメントの 3 項条件文が必要になることはほとんどありません。しかし、そのとき、私は自分の意図を簡潔に表現するクールなツールを身に着けています。

そのために、コンマ演算子の説得力のあるケースを取り上げます。

以上がカンマ演算子の説得力のあるケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Java vs JavaScript:開発者向けの詳細な比較Java vs JavaScript:開発者向けの詳細な比較May 16, 2025 am 12:01 AM

Javaandjavascriptaredistinctlanguages:javaisusedforenterpriseandmobileapps、whilejavascriptisforinteractivewebpages.1)javaiscompiled、staticatically、andrunsonjvm.2)javascriptisisterted、dynamsornoded.3)

JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント://および / * *を使用するためのガイドJavaScriptコメント://および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

Python vs. JavaScript:開発者の比較分析Python vs. JavaScript:開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript:ジョブに適したツールを選択するPython vs. JavaScript:ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript:それぞれの強みを理解するPythonとJavaScript:それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア:CまたはCの上に構築されていますか?JavaScriptのコア:CまたはCの上に構築されていますか?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション:フロントエンドからバックエンドまでJavaScriptアプリケーション:フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。