検索
ホームページウェブフロントエンド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 までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

カスタムGoogle検索APIセットアップチュートリアルカスタムGoogle検索APIセットアップチュートリアルMar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例例JSONファイルの例Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン8見事なjQueryページレイアウトプラグインMar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

' this' JavaScriptで?' this' JavaScriptで?Mar 04, 2025 am 01:15 AM

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

ソースビューアーでjQueryの知識を向上させますソースビューアーでjQueryの知識を向上させますMar 05, 2025 am 12:54 AM

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

モバイル開発用のモバイルチートシート10個モバイル開発用のモバイルチートシート10個Mar 05, 2025 am 12:43 AM

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません! タッチジェスチャーリファレンスガイド(PDF) Desigの貴重なリソース

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)