ある条件のときだけ配列・オブジェクトに追加したい
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ ...式 を使う
◆ 条件を満たせば追加したい要素を含んだ配列やオブジェクト
◆ 条件を満たさないときは 空の配列やオブジェクト
◆ 条件を満たせば追加したい要素を含んだ配列やオブジェクト
◆ 条件を満たさないときは 空の配列やオブジェクト
const value = ["abc", "def" if flag]
こういうことがしたいです
2つめの "def" は flag が true のときだけ追加したくて flag が false なら追加したくないです
const value = ["abc", flag ? "def" : null]
と書いても null が入ります
null の代わりに Symbol でも入れておいて filter するか 条件付きの構造でデータを渡して目的のデータを返す関数を作るかになりますが面倒です
そこまでするなら普通に
const value = ["abc"]
if(flag) value.push("def")
if(flag) value.push("def")
でいいことも多いです
ただ やっぱり最初のリテラルでの定義だけで済ませたいですし 別の if 文が出てくる気持ち悪さはあります
一応 ES2015 からの機能で一応
const value = ["abc", ...flag?["def"]:[]]
とすることで一応ひとつの式に出来ます
... の機能は 配列やオブジェクトリテラルの定義の中で ... の後に持ってきた式の中身をそこに展開します
簡単な例
const values = [10, 20]
const result = [5, ...values]
console.log(result)
// [5, 10, 20]
const result = [5, ...values]
console.log(result)
// [5, 10, 20]
... の後は式なので条件演算子を使って flag が true なら埋め込みたい値 false なら空の配列になるようにすれば true のときだけ要素を追加できます
オブジェクトの場合も同じで
const value = {a: 1, b: 2 if flag}
こういうことをしたいなら
const value = {a: 1, ...flag?{b: 2}:{}}
こう書けばできます
やっぱり見た目だけは気になるところで もっといい書き方ないものかと思わざるをえないです
const value = {
a: 1,
...b?{b}:{},
...c?{c}:{},
}
a: 1,
...b?{b}:{},
...c?{c}:{},
}