☰

Javascript ES6 スプレッド演算子 (未定義) [重複] 質問する

tag-icon • tag-icon javascript ecmascript-6 javascript-objects spread-syntax
Javascript ES6 スプレッド演算子 (未定義) [重複] 質問する

React アプリを開発しているときに、条件付きプロパティをコンポーネントに送信する必要があったため、どこかでそれを実行するパターンを見つけましたが、私にとっては非常に奇妙に思え、どのように、なぜ機能するのか理解できませんでした。

次のように入力すると:

console.log(...undefined)   // Error 
console.log([...undefined]) // Error
console.log({...undefined}) // Work

undefined でスプレッド演算子がアクティブになるとエラーが発生しますが、undefined がオブジェクト内にある場合は空のオブジェクトが返されます。

この動作には非常に驚いています。これは本当にそうなるはずのものであり、これに頼ってよいものでしょうか。また、これは良い習慣なのでしょうか。

ベストアンサー1

この動作は次のような場合に便利です。オプションのスプレッド:

function foo(options) {
  const bar = {
    baz: 1, 
    ...(options && options.bar) // options and bar can be undefined
  } 
}

そしてさらに良くなるオプションの連鎖、現在Stage 4（そしてすでにTypeScriptで利用可能3.7以降):

function foo(options) {
  const bar = {
    baz: 1, 
    ...options?.bar //options and bar can be undefined
  } 
}

思い: 配列に展開するときにも機能しないのは残念です

おすすめ記事