如何使用reduce、map或filter創建一個函式來顯示和統計陣列物件的每個值？

如何創建一個回傳每個品種數量的函式？

const dogs = [
    {
        name:"Cherry",
        breed:["Shiba", "Poodle"]
    },
    {
        name:"Bolt",
        breed:["Shiba"]
    },
    {
        name:"Pumpkin",
        breed:["Chihuahua", "Poodle"]
    },
    {
        name:"Happy",
        breed:["Poodle"]
    },
    {
        name:"Tofu",
        breed:["German Shepherd"]
    }
];

我想列印每個品種及其數量，如下所示。

{
German Shepherd: 1,
Shiba: 2,
Poodle: 3,
Chihuahua:1
}

編輯：另外，我如何將特定品種作為引數傳遞并僅列印該品種及其數量？

我開始了解一些概念和功能，但將多個不同的概念結合起來對我來說仍然具有挑戰性。

uj5u.com熱心網友回復：

您可以reduce在嵌套陣列上使用并重復該操作：

const dogs = [{name:"Cherry",breed:["Shiba", "Poodle"]},{name:"Bolt",breed:["Shiba"]},{name:"Pumpkin",breed:["Chihuahua", "Poodle"]},{name:"Happy",breed:["Poodle"]}, {name:"Tofu",breed:["German Shepherd"]}];

const result = dogs.reduce((acc, {breed}) => 
    breed.reduce((acc, name) => {
        acc[name] = (acc[name] ?? 0)   1;
        return acc;
    }, acc)
, {});

console.log(result);

或者，您可以先將資料展平為字串陣列，然后減少：

const dogs = [{name:"Cherry",breed:["Shiba", "Poodle"]},{name:"Bolt",breed:["Shiba"]},{name:"Pumpkin",breed:["Chihuahua", "Poodle"]},{name:"Happy",breed:["Poodle"]}, {name:"Tofu",breed:["German Shepherd"]}];

const result = dogs.flatMap(({breed}) => breed).reduce((acc, name) => {
    acc[name] = (acc[name] ?? 0)   1;
    return acc;
}, {});

console.log(result);

uj5u.com熱心網友回復：

這里沒有真正需要reduce, filter, 或map。

1. 創建一個物件以按品種對分數進行分組。
2. 遍歷dogs陣列，然后遍歷每只狗的品種陣列。如果物件上尚不存在品種，則創建它并將值設定為零。
3. 將品種值加一。

為了回答您關于傳入單獨的品種引數以獲得該品種的總數的評論，只需稍微修改函式即可。

const dogs=[{name:"Cherry",breed:["Shiba","Poodle"]},{name:"Bolt",breed:["Shiba"]},{name:"Pumpkin",breed:["Chihuahua","Poodle"]},{name:"Happy",breed:["Poodle"]},{name:"Tofu",breed:["German Shepherd"]}];

// Pass in the dogs array
// and an optional query string
function getBreedCount(dogs, query) {

  // Grouping object
  const obj = {};

  // Iterate over the dogs, and the breeds
  // updating the grouping object as we go
  for (const dog of dogs) {
    for (breed of dog.breed) {
      obj[breed] ??= 0;
        obj[breed];
    }
  }

  // If there is a query argument...
  if (query) {

    // ...and the query string is a key on the object
    // Return a string: `<breed>: <value>`...
    if (obj[query]) return `${query}: ${obj[query]}`;

    // ...otherwise return a message that
    // the breed doesn't exist
    return `${query} doesn't exist`;

  }

  // If there is no query argument
  // return the complete object
  return obj;

}

console.log(getBreedCount(dogs));
console.log(getBreedCount(dogs, 'Poodle'));
console.log(getBreedCount(dogs, 'Shiba'));
console.log(getBreedCount(dogs, 'Bobby Davro'));

附加檔案

• 模板/字串文字

uj5u.com熱心網友回復：

你可以這樣做。首先，使用map(breed) 提取所需的密鑰。

function getBreed (dog) {
  return dog.breed;
}

console.log(dogs.map(getBreed))
// [Array(2), Array(1), Array(2), Array(1), Array(1)]

您還可以使用arrow function

const breeds = dogs.map(dog => dog.breed)
console.log(breeds)
// The same output
// [Array(2), Array(1), Array(2), Array(1), Array(1)]

reduce然后，您可以使用和將所有陣列合并為一個一維陣列concat。

const flatten = breeds.reduce((arr, breed) => arr.concat(breed), [])
console.log(flatten)
// ['Shiba', 'Poodle', 'Shiba', 'Chihuahua', 'Poodle', 'Poodle', 'German Shepherd']

最后，您可以使用reduce

function count(counter, breed) {
    if (breed in counter)
        counter[breed]  ;
    else
        counter[breed] = 1;
    return counter
}
console.log(flatten.reduce(count, {}))
// {Shiba: 2, Poodle: 3, Chihuahua: 1, German Shepherd: 1}

如果您想知道這里發生了什么，您可以查看檔案，但簡而言之，首先 ?The counter 是一個空{}物件??。然后在第 1 步中，它變成了{Shiba:1}因為Sheba不在柜臺中。在第 2 步中，{Shiba:1,Poodle:1}出于同樣的原因。在第 3 步中Sheba增加和計數器變為{Shiba:2,Poodle:1}因為Sheba之前的計數器中存在等等。

標籤：javascript

上一篇：反應js：兒童風格不顯示

下一篇：嘗試在json檔案路徑中使用變數-javascript