JavaScript - 如何使用 reduce 将名称列表映射到指定的键

Question

我想学习javascript的reduce函数。我已经使用不同的解决方案实现了以下内容，但希望通过减少实现相同的效果。

我有一个字母数组和名称数组。

alphabets: ['A','B','C','D','E','F','G','H','I','J','K','L',
        'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

names: [{ name: 'Apple' },{ name: 'Apricot' },{ name: 'Avocados' },{ name: 'Almond' },
        { name: 'Blueberries' }, { name: 'Bing Cherry' },{ name: 'Breadfruit' },{ name: 'Bananas' },
        { name: 'Cherries' },{ name: 'Custard-Apple' },{ name: 'Carrot' },{ name: 'Cranberries' },
        { name: 'Dates' }, { name: 'Dragon Fruit' },{ name: 'Durian' },
        { name: 'Grapefruit' },{ name: 'Grapes' },{ name: 'Gooseberries' },{ name: 'Guava' },],

使用 javascript reduce 功能，我想映射键值对，例如，

A: 'Apple','Apricot','Avocados','Almond'
B: 'Blueberries', 'Bing Cherry', 'Breadfruit', 'Bananas'
C: 'Cherries', 'Custard-Apple', 'Carrot', 'Cranberries'
D: 'Dates', 'Dragon Fruit', 'Durian'

键 A 应包含以 A 开头的水果列表，键 B 应包含以 B 开头的水果列表。请帮我解决这个问题。

Answer 1

您可以使用逻辑空赋值??=运算符将数组分配给 cetrain 属性并推送实际的解构名称。

const 
    names = [{ name: 'Apple' }, { name: 'Apricot' }, { name: 'Avocados' }, { name: 'Almond' }, { name: 'Blueberries' }, { name: 'Bing Cherry' }, { name: 'Breadfruit' }, { name: 'Bananas' }, { name: 'Cherries' }, { name: 'Custard-Apple' }, { name: 'Carrot' }, { name: 'Cranberries' }, { name: 'Dates' }, { name: 'Dragon Fruit' }, { name: 'Durian' }, { name: 'Grapefruit' }, { name: 'Grapes' }, { name: 'Gooseberries' }, { name: 'Guava' }],
    grouped = names.reduce(
        (r, { name }) => ((r[name[0].toUpperCase()] ??= []).push(name), r),
        {}
    );

console.log(grouped);

.as-console-wrapper { max-height: 100% !important; top: 0; }