map.getにから配列が入る理由がわかりません。

Question

前提・実現したいこと

連想配列から同じ日付のものだけ取り出して新しい配列を作りたい。

該当のソースコード

data: {
todos: [
        {task: '1', date: '2020/9/1'},
        {task: '2', date: '2020/9/1'},
        {task: '3', date: '2020/9/2'},
        {task: '4', date: '2020/9/2'},
        {task: '5', date: '2020/9/2'},
        {task: '6', date: '2020/9/2'},
        {task: '7', date: '2020/9/3'},
        {task: '8', date: '2020/9/3'},
        {task: '9', date: '2020/9/3'},
      ],
}

computed:{
        item() {

 const groupingMap = this.todos.reduce(
 (map, e) => map.set(e.date,  [ ...(map.get(e.date) || []), e] ), new Map())
                
 return [...groupingMap].filter(([date, array]) => array.length > 1 )
      
          },
}

試したこと

dateをキーとしてtaskの配列へのMapを作っていると思うのですが、map.getのあとのから配列とその後のeの意味がわからないです。

補足情報（FW/ツールのバージョンなど）

Comments

[equal-l2]

`endTask`の定義がわからないと回答できません。

[dai987]

申し訳ありません。
todosをendTaskと誤って書いていました。

Answer 1

[ ...(map.get(e.date) || []), e]
わからないのはこの部分ということですね。

...はspread syntaxと呼ばれるもので、配列の要素を取り出して並べるのと同じ効果を持ちます。
例えば、[...[1, 2], 3]は[1, 2, 3]と同じになります。

spread syntaxは要素を取り出す対象の配列を要求するわけですが、map.get(e.date)はundefinedを返す場合があります。この場合undefinedは配列ではないのでエラーになってしまいます。
map.get(e.date) || []とすることで、undefinedが返ってきた際に空配列を代わりに使うことができます。

これによって、この式は「map.get(e.date)の末尾にeを付け加えた配列」(ただしmap.get(e.date)がundefinedの時は[e])を返すことになります。