JavaScriptでnullまたは未定義の場合、値を置き換えます


128

??JavaScriptにC#演算子を適用する必要がありますが、方法がわかりません。これをC#で検討します。

int i?=null;
int j=i ?? 10;//j is now 10

今私はこれをJavaScriptで設定しています:

var options={
       filters:{
          firstName:'abc'
       } 
    };
var filter=options.filters[0]||'';//should get 'abc' here, it doesn't happen
var filter2=options.filters[1]||'';//should get empty string here, because there is only one filter

どうすれば正しくできますか?

ありがとう。

編集:私は問題の半分を発見しました:オブジェクトに「インデクサー」表記を使用できません(my_object[0])。それをバイパスする方法はありますか?(私は事前にフィルタープロパティの名前を知りませんし、それらを繰り返し処理したくありません)。

回答:


271

JavaScriptでの対応は次のとおりです。

var i = null;
var j = i || 10; //j is now 10

論理演算子||はブール値を返さず、trueに変換できる最初の値を返すことに注意してください。

さらに、単一のオブジェクトの代わりにオブジェクトの配列を使用します。

var options = {
    filters: [
        {
            name: 'firstName',
            value: 'abc'
        }
    ]
};
var filter  = options.filters[0] || '';  // is {name:'firstName', value:'abc'}
var filter2 = options.filters[1] || '';  // is ''

インデックスでアクセスできます。


56
0がiの有効な値である場合、これは機能しないことに注意してください。
jt000 2015

13
何のfalseyが潜在的に有効な入力(ある場合は0false空の文字列)、私の代わりにこのような何かをするだろう:var j = (i === null) ? 10 : i;のみ交換いたしますどのnullむしろfalseに評価できるものよりも、。
DBS 2016

これに相当するものはGroovyにありますか?
user6123723 2018

iが定義されていない場合、これはエラーをスローします。したがって、私には役に立たないようです。.(?)
phil294

@ phil294がvar j = (i != null ? i : 10);あるため、動作するはずundefinedです==nullは、そうi != nullfalse両方のためにnullundefined
ToolmakerSteve

6

問題の半分を発見しました。オブジェクト(my_object [0])に「インデクサー」表記を使用できません。それをバイパスする方法はありますか?

番号; オブジェクトリテラルは、その名前が示すように、配列ではなくオブジェクトであり、プロパティの特定の順序がないため、インデックスに基づいてプロパティを取得することはできません。それらの値を取得する唯一の方法は、特定の名前を使用することです。

var someVar = options.filters.firstName; //Returns 'abc'

または、for ... inループを使用してそれらを反復することによって:

for(var p in options.filters) {
    var someVar = options.filters[p]; //Returns the property being iterated
}

1
@LinusGeffarthこの面白いfor inJSループはオブジェクトリテラルでのみ機能することに注意してください。JS配列(インデックスを与える)とJSマップ(与えるundefined)で無惨に失敗します。あなたがデバッグのサプライズに参加しないように、それを忘れないでください!xP
varun

4

ES2020回答

新しいNullish Coalescing OperatorがJavaScriptで利用可能になりましたが、ブラウザーのサポートは制限されています。からのデータによるとcaniuseブラウザの48.34%のみがサポートされています(2020年4月現在)。

ドキュメントによると、

nullish合体演算子(??)は、左側のオペランドがnullまたは未定義の場合に右側のオペランドを返し、それ以外の場合は左側のオペランドを返す論理演算子です。

const options={
  filters:{
    firstName:'abc'
  } 
};
const filter = options.filters[0] ?? '';
const filter2 = options.filters[1] ?? '';

これは、変数の両方が代替の値になりますことを保証します''場合がfilters[0]たりfilters[1]しているnull、またはundefined

空っぽの合体演算子は、0およびなどの他のタイプの偽の値のデフォルト値を返さないことに注意してください''。すべての偽の値を考慮したい場合は、OR演算子を使用する必要があります||


0

論理的な無効な割り当て、2020 +ソリューション

現在、新しいオペレーターがブラウザーに追加されています??=。これはと同等value = value ?? defaultValueです。

||=そして&&=また来ています、以下のリンク。

これは、左側が未定義かnullかをチェックし、すでに定義されている場合は短絡します。そうでない場合は、左側に右側の値が割り当てられます。

基本的な例

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

// Equivalent to
a = a ?? true

オブジェクト/配列の例

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

機能例

function config(options) {
    options.duration ??= 100
    options.speed ??= 25
    return options
}

config({ duration: 555 })   // { duration: 555, speed: 25 }
config({})                  // { duration: 100, speed: 25 }
config({ duration: null })  // { duration: 100, speed: 25 }

?? = 2020年7月のブラウザーサポート -.03%

?? = Mozillaドキュメント

|| = Mozillaドキュメント

&& = Mozillaドキュメント


0

解体ソリューション

質問内容が変更になった可能性がありますので、徹底的にお答えさせていただきます。

解体により、プロパティを使用してあらゆるものから値を取り出すことができます。null /未定義の場合のデフォルト値と名前のエイリアスを定義することもできます。

const options = {
    filters : {
        firstName : "abc"
    } 
}

const {filters: {firstName = "John", lastName = "Smith"}} = options

// firstName = "abc"
// lastName = "Smith"

注:大文字と小文字が区別されます

配列を操作する場合は、次のようにします。

この場合、名前は配列内の各オブジェクトから抽出され、独自のエイリアスが与えられます。オブジェクトが存在しない可能性があるため、= {}追加されました。

const options = {
    filters: [{
        name: "abc",
        value: "lots"
    }]
}

const {filters:[{name : filter1 = "John"} = {}, {name : filter2 = "Smith"} = {}]} = options

// filter1 = "abc"
// filter2 = "Smith"

より詳細なチュートリアル

ブラウザサポート 92%2020年7月

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.