web-dev-qa-db-ja.com

JavaScriptに "null合体"演算子はありますか？

Javascriptにnull合体演算子はありますか？

たとえば、C＃では、これを実行できます。

String someString = null;
var whatIWant = someString ?? "Cookies!";

Javascriptについて私が理解できる最良の近似は、条件演算子を使用することです。

var someString = null;
var whatIWant = someString ? someString : 'Cookies!';

これはちょっと気の遠い私見です。もっとうまくできますか？

javascriptoperatorsnull-coalescing-operatornull-coalescing
1150
Daniel Schaffer

C＃null合体演算子（??）と同等のJavaScriptでは、論理的なOR（||）を使用しています。

var whatIWant = someString || "Cookies!";

動作がC＃の動作と一致しない場合がありますが（これは後に説明します）、これがJavaScriptでデフォルト/代替値を割り当てる一般的で簡潔な方法です。

明確化

最初のオペランドの型に関係なく、それをブール値にキャストした結果がfalseになる場合、代入には2番目のオペランドが使用されます。以下のすべての場合に注意してください。

alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)

これの意味は：

var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"
1826
Ateş Göral
function coalesce() {
    var len = arguments.length;
    for (var i=0; i<len; i++) {
        if (arguments[i] !== null && arguments[i] !== undefined) {
            return arguments[i];
        }
    }
    return null;
}

var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);

// xyz.val now contains 5

このソリューションはSQLの合体関数のように機能し、引数をいくつでも受け入れ、値がない場合はnullを返します。それはC＃のように動作します？ ""、false、および0はNOT NULLと見なされるため、実際の値としてカウントされます。あなたが.netの背景から来ている場合、これは最も自然な気持ちの解決策になります。

64
Brent Larsen

C＃の||の代わりとしての??が空の文字列やゼロを飲み込むのであなたの場合には十分でないなら、あなたはいつでもあなた自身の関数を書くことができます：

 function $N(value, ifnull) {
    if (value === null || value === undefined)
      return ifnull;
    return value;
 }

 var whatIWant = $N(someString, 'Cookies!');
42
sth

はい、もうすぐです。 ここで提案 そして ここで実装状況 。

それはこのように見えます：

x ?? y

例

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false
19
vaughan

ここではNaNの可能性について誰も言及していません。これは - 私にとっては - nullのような値でもあります。だから、私は私が私の2セントを追加すると思いました。

与えられたコードに対して：

var a,
    b = null,
    c = parseInt('Not a number'),
    d = 0,
    e = '',
    f = 1
;

||演算子を使用した場合は、最初のfalse以外の値が返されます。

var result = a || b || c || d || e || f; // result === 1

典型的な合体方法 ここに投稿されたもの を使うと、cが得られます。これは次の値を持ちます：NaN

var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'

どちらも 私の言うとおりではありません。あなたの世界とは異なるかもしれない、合体論理の私自身の小さな世界では、私は未定義、null、そしてNaNをすべて "nullっぽい"と見なします。それで、私は合体メソッドからd（zero）を取り戻すことを期待します。

誰かの頭脳が私のように働いていて、あなたがNaNを除外したいのであれば、このメソッドはそれを達成します：

function coalesce() {
    var i, undefined, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg !== null && arg !== undefined
            && (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
            return arg;
        }
    }
    return null;
}

コードをできるだけ短くし、明瞭さを少し欠いても構わないという人のために、@ impinballで提案されているようにこれを使用することもできます。これは、NaNがNaNと等しくないことを利用しています。あなたはここでそれについてもっと読むことができます： なぜNaNはNaNと等しくないのですか？

function coalesce() {
    var i, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg != null && arg === arg ) { //arg === arg is false for NaN
            return arg;
        }
    }
    return null;
}
12
Kevin Nelson

現時点ではサポートされていませんが、JS標準化プロセスが取り組んでいます： https://github.com/tc39/proposal-optional-chaining

7
Elmar Jansen

javaScript固有のnullの定義に注意してください。 javascriptには「値なし」の定義が2つあります。 1. NULL：変数がNULLの場合、その変数にはデータが含まれていませんが、変数はすでにコード内で定義されています。このような：

var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts

そのような場合、変数の型は実際にはObjectです。試して。

window.alert(typeof myEmptyValue); // prints Object

  1. 未定義：コード内で変数が以前に定義されていない場合、予想どおり、変数に値が含まれていません。このような：

    if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
// alerts

そのような場合、あなたの変数の型は 'undefined'です。

型変換比較演算子（==）を使用すると、JavaScriptはこれらの空の値の両方に対して同等に機能することに注意してください。それらを区別するために、必ず型厳密な比較演算子（===）を使用してください。

4
farzad

説明を読んだ後、@ Ates Goralの答えは、JavaScriptのC＃で行っているのと同じ操作を実行する方法を提供します。

@Gumboの答えは、nullをチェックする最良の方法を提供します。ただし、undefinedの確認の問題に関しては、JavaScriptの==と===の違い、特にに注意することが重要です。および/またはnull。

2つの用語の違いについて、本当に良い記事があります here 。基本的に、==の代わりに===を使用すると、JavaScriptは比較している値を結合しようとし、比較の結果afterこの合体。

3
Tom

JSは現在、null合体演算子を取得しています！現在、ステージ3でステージ4に移行中です。 https://github.com/tc39/proposal-nullish-coalescing

提案の例：

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false
0
Jacob