web-dev-qa-db-ja.com

コンストラクトx = x ||とは何ですかどういう意味？

JavaScriptをデバッグしていますが、この||が何をするのか説明できませんか？

function (title, msg) {
  var title = title || 'Error';
  var msg   = msg || 'Error on Request';
}

この男がvar title = title || 'ERROR'を使用している理由を教えてください。 var宣言なしでも表示されることがあります。

javascriptparametersoptional-parametersor-operator
221
opHASnoNAME

これは、title引数がオプションであることを意味します。したがって、引数なしでメソッドを呼び出すと、"Error"のデフォルト値が使用されます。

書くの略です：

if (!title) {
  title = "Error";
}

ブール式を使用したこの種の略記法は、Perlでも一般的です。次の式で：

a OR b

trueまたはaがbの場合、trueと評価されます。したがって、aがtrueの場合、bをチェックする必要はありません。これは、短絡ブール評価と呼ばれます。

var title = title || "Error";

基本的に、titleがfalseと評価されるかどうかを確認します。存在する場合、"Error"を「返します」、そうでない場合、titleを返します。

190
cletus

ダブルパイプ演算子（||）とは何ですか？

ダブルパイプ演算子（||）はlogical OR operatorです。 ほとんどの言語では、次のように機能します：

  • 最初の値がfalseの場合、2番目の値をチェックします。 trueの場合、trueを返し、falseの場合、falseを返します。
  • 最初の値がtrueの場合、2番目の値が何であっても、常にtrueを返します。

したがって、基本的には次の関数のように機能します。

function or(x, y) {
  if (x) {
    return true;
  } else if (y) {
    return true;
  } else {
    return false;
  }
}

それでも理解できない場合は、次の表をご覧ください。

      | true   false  
------+---------------
true  | true   true   
false | true   false

つまり、両方の値がfalseの場合にのみfalseになります。

JavaScriptではどう違いますか？

JavaScriptはloosely typed languageであるため、少し異なります。この場合、ブール値以外の値で||演算子を使用できることを意味します。意味はありませんが、たとえば、関数とオブジェクトでこの演算子を使用できます。

(function(){}) || {}

そこで何が起きますか？

値がブール値でない場合、JavaScriptはブール値への暗黙の会話を作成します。値がfalsey（例：0、""、null、undefined（ JavaScriptのすべてのfalsey値 を参照）の場合、falseとして扱われます。それ以外の場合は、trueとして扱われます。

したがって、空の関数は真実なので、上記の例ではtrueを指定する必要があります。そうではありません。空の関数を返します。これは、JavaScriptの||演算子が最初に書いたように機能しないためです。次のように機能します。

  • 最初の値がfalseyの場合、2番目の値を返します。
  • 最初の値がtruthyの場合、最初の値を返します。

びっくりした？実際、従来の||演算子と「互換」です。次の関数として記述できます。

function or(x, y) {
  if (x) {
    return x;
  } else {
    return y;
  }
}

真実の値をxとして渡すと、x、つまり真実の値を返します。したがって、後でif節で使用する場合：

(function(x, y) {
  var eitherXorY = x || y;
  if (eitherXorY) {
    console.log("Either x or y is truthy.");
  } else {
    console.log("Neither x nor y is truthy");
  }
}(true/*, undefined*/));

"Either x or y is truthy."を取得します。

xがfalseyの場合、eitherXorYはyになります。この場合、yが真実であれば"Either x or y is truthy."を取得します。そうでなければ、"Neither x nor y is truthy"を取得します。

実際の質問

さて、||演算子がどのように機能するかを知っていれば、おそらくx = x || yの意味を自分で確認できます。 xが真である場合、xがxに割り当てられるため、実際には何も起こりません。そうでない場合は、yがxに割り当てられます。通常、関数のデフォルトパラメータを定義するために使用されます。ただし、偽の値（必ずしもundefinedまたはnullとは限りません）をパラメーターとして渡すことができないため、悪いプログラミング手法と見なされることがよくあります。次の例を検討してください。

function badFunction(/* boolean */flagA) {
  flagA = flagA || true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

一見有効です。ただし、falseパラメーターとしてflagAを渡した場合はどうなります（ブール値であるため、つまりtrueまたはfalseになる可能性があるため）？ trueになります。この例では、flagAをfalseに設定する方法はありません。

次のように、flagAがundefinedであるかどうかを明示的にチェックすることをお勧めします。

function goodFunction(/* boolean */flagA) {
  flagA = typeof flagA !== "undefined" ? flagA : true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

長いですが、常に機能し、理解しやすいです。

デフォルトの関数パラメーターのES6構文 を使用することもできますが、古いブラウザー（IEなど）では機能しないことに注意してください。これらのブラウザーをサポートする場合は、 Babel を使用してコードを変換する必要があります。

MDNの論理演算子 も参照してください。

174
Michał Perłakowski

タイトルが設定されていない場合、デフォルト値として「ERROR」を使用します。

より一般的な：

var foobar = foo || default;

読み取り：foobarをfooまたはdefaultに設定します。これを何度も連鎖させることもできます。

var foobar = foo || bar || something || 42;
28
ericteubert

これについてもう少し説明します...

||演算子は、logicalor演算子です。最初の部分がtrueの場合、結果はtrueになり、2番目の部分がtrueであり、両方の部分がtrueの場合、trueになります。わかりやすくするために、ここに表を示します。

 X | Y | X || Y 
---+---+--------
 F | F |   F    
---+---+--------
 F | T |   T    
---+---+--------
 T | F |   T    
---+---+--------
 T | T |   T    
---+---+--------

ここで何か気づきましたか？ Xがtrueの場合、結果は常にtrueです。したがって、Xがtrueであることがわかっている場合は、Yをチェックする必要はまったくありません。したがって、多くの言語は、logical -or（および他の方向から来るlogical -and）の「短絡」評価器を実装します。彼らは最初の要素をチェックし、それが本当なら、彼らはまったく2番目のチェックを気にしません。結果は（論理的には）同じですが、実行に関しては、2番目の要素の計算に費用がかかる場合、大きな違いが生じる可能性があります。

それで、これはあなたの例と何の関係がありますか？

var title   = title || 'Error';

それを見てみましょう。 title要素が関数に渡されます。 JavaScriptでパラメーターを渡さない場合、デフォルトでnull値になります。また、JavaScriptで変数がnull値の場合、論理演算子によってfalseと見なされます。したがって、この関数がタイトルを指定して呼び出された場合、それは偽でない値であり、したがってローカル変数に割り当てられます。ただし、値が指定されていない場合、null値であるためfalseです。その後、logical -or演算子は2番目の式を評価し、代わりに「エラー」を返します。そのため、ローカル変数には値「エラー」が与えられます。

これは、JavaScriptの論理式の実装により機能します。適切なブール値（trueまたはfalse）を返しませんが、代わりにtrueと同等と見なされるものとfalseと同等と見なされるものに関するいくつかのルールの下で与えられた値を返します。 JavaScript参照を調べて、ブール値のコンテキストでJavaScriptがtrueまたはfalseとみなすものを学習します。

14
JUST MY correct OPINION

基本的に、||の前の値がtrueと評価され、はいの場合はこの値を取り、そうでない場合は||の後の値を取ります。

||の後の値を取る値（私が覚えている限りでは）：

  • undefined
  • false
  • ''（ヌルまたはヌル文字列）
7
Morfildur

二重パイプは論理「OR」の略です。これは、「パラメータが設定されていない」場合には当てはまりません。これは、次のようなコードがある場合、厳密にはjavascriptに含まれているためです。

function foo(par) {
}

その後、呼び出します

foo()
foo("")
foo(null)
foo(undefined)
foo(0)

同等ではありません。

ダブルパイプ（||）は最初の引数をブール値にキャストし、結果のブール値がtrueの場合は割り当てを行います。そうでない場合は、正しい部分を割り当てます。

これは、設定されていないパラメーターを確認する場合に重要です。

たとえば、1つのオプションパラメータを持つ関数setSalaryがあるとします。ユーザーがパラメーターを指定しない場合、デフォルト値の10を使用する必要があります。

このようなチェックを行う場合：

function setSalary(dollars) {
    salary = dollars || 10
}

これにより、呼び出し時に予期しない結果が得られます

setSalary(0)

上記のフローに従って引き続き10を設定します。

7
Juriy

私の前に述べたすべてに説明を加えるために、論理的な概念を理解するためにいくつかの例を挙げるべきです。

var name = false || "Mohsen"; # name equals to Mohsen
var family = true || "Alizadeh" # family equals to true

これは、左側が真のステートメントとして評価された場合、終了し、左側が返されて変数に割り当てられることを意味します。それ以外の場合は、右側が返されて割り当てられます。

And演算子は、以下のような逆の構造を持っています。

var name = false && "Mohsen" # name equals to false
var family = true && "Alizadeh" # family equals to Alizadeh
4
Mohsen Alizadeh

ダブルパイプ演算子

この例は便利ですか？

var section = document.getElementById('special');
if(!section){
     section = document.getElementById('main');
}

することもできます

var section = document.getElementById('special') || document.getElementById('main');
4
choise

Cletus 'answer は正しいものの、JavaScriptの「falseに評価する」に関して、さらに詳細を追加する必要があると感じています。

var title = title || 'Error';
var msg   = msg || 'Error on Request';

Title/msgが提供されているかどうかだけでなく、どちらかが falsy であるかどうかもチェックしています。つまり、次のいずれかです。

  • 偽。
  • 0 (zero)
  • ""（空の文字列）
  • ヌル。
  • 未定義。
  • NaN（非数を意味する特別な数値！）

だから行に

var title = title || 'Error';

タイトルが真実である（つまり、偽りではないため、title = "titleMessage"など）場合、ブールOR（||）演算子は1つの 'true'値を見つけました。つまり、trueと評価されます。短絡し、真の値（タイトル）を返します。

タイトルが偽物（つまり上記のリストの1つ）である場合、ブールOR（||）演算子は 'false'値を見つけたため、演算子の他の部分である 'Errorを評価する必要があります'、trueと評価されるため、返されます。

オペレーターの両側がfalseと評価された場合、2番目の 'falsy'オペレーターを返します。

つまり.

return ("" || undefined)

未定義を返します。これは、おそらくデフォルトのタイトル/メッセージを「」にしようとするときに、この質問で尋ねられた動作を使用できるようにするためです。つまり、実行後

var foo = undefined
foo = foo || ""

fooは ""に設定されます

4
Azrantha

引用：「構造x = x || yはどういう意味ですか？」

デフォルト値の割り当て

これは、xがまだ値を待っているがまだ受け取っていないか、デフォルトにフォールバックするために意図的に省略された場合、yのデフォルト値をxに提供するを意味します。

2
Bekim Bacaj