.reduce（）関数でアキュムレータにプッシュした結果を返すことができないのはなぜですか？

Question

単純な例では、配列の配列を返したい。 'peeps'の各名前については、 'hello'という単語の配列をアキュムレータにプッシュしたいと思います。

const peeps = ['sally', 'nick', 'dave']; 

return peeps.reduce((acc, val) => { 
    return acc.push(['hello']) 
    }, []); 

acc.push（）は関数ではありません。

誰かがなぜこれがうまくいかないのか理解してもらえますか？

Answer 1

あなたはArray#push

を使用push()方法は、アレイの端部に一つ以上の要素を追加し、配列の新しい長さを返します。

これは、プッシュした後の配列の長さを返します。次に、累算器の値は配列ではなく数値になります。

return acc.push(['hello']) // 1 

解決策1：プッシュした結果ではなく配列を返します。

const peeps = ['sally', 'nick', 'dave']; 
 

 
console.log(peeps.reduce((acc, val) => { 
 
    acc.push(['hello']); 
 
    return acc; 
 
}, []));

解決方法2：使用Array#concat。

concat()方法は、2つの以上の配列をマージするために使用されます。このメソッドは既存の配列を変更するのではなく、代わりに新しい配列を返します。

プッシュよりも効率が低いので、大量のデータを使用することは避けています。 jsPerf

const peeps = ['sally', 'nick', 'dave']; 
 

 
console.log(peeps.reduce((acc, val) => acc.concat([['hello']]), []));

解決策3：使用Array#map。結果配列の長さが指定された配列と同じである必要がある場合は、これが最適です。

map()方法は、配列の全ての要素に与えられた関数を呼び出した結果、新しい配列を作成します。

const peeps = ['sally', 'nick', 'dave']; 
 

 
console.log(peeps.map(val => ['hello']));

Answer 2

代わりにこれを試してみてください：

const peeps = ['sally', 'nick', 'dave']; 

return peeps.reduce((acc, val) => { 
    acc.push(['hello']); 
    return acc; 
}, []); 

pushは、あなたがそれを手動で行う必要があり、ACCを返しません。

Answer 3

私はあなたがマップを試すべきだと思います。減らす代わりに。

const peeps = ['sally', 'nick', 'dave']; 

return peeps.map((val) => { 
return ['hello'] 
}); 

それは、配列[ ['Hello'],['Hello'],['Hello'] ]

配列から単一の値を取得するために使用される削減を返します。たとえば、数、合計、製品などです。