如何根據具有ids的另一個陣列從物件陣列中查找值

我正在嘗試根據 id 過濾電影的流派名稱。所以如果 id 匹配，我會得到那個名字。

const genres = [
  { id: 28, name: "Action" },
  { id: 12, name: "Adventure" },
  { id: 16, name: "Animation" },
  { id: 35, name: "Comedy" },
  { id: 80, name: "Crime" },
  { id: 99, name: "Documentary" },
  { id: 18, name: "Drama" },
  { id: 10751, name: "Family" },
  { id: 14, name: "Fantasy" },
  { id: 36, name: "History" },
  { id: 27, name: "Horror" },
  { id: 10402, name: "Music" },
  { id: 9648, name: "Mystery" },
  { id: 10749, name: "Romance" },
  { id: 878, name: "Science Fiction" },
  { id: 10770, name: "TV Movie" },
  { id: 53, name: "Thriller" },
  { id: 10752, name: "War" },
  { id: 37, name: "Western" },
];

const genre_ids = [10752, 10770, 18, 12]

uj5u.com熱心網友回復：

您可以使用過濾器genres然后genre_ids映射特定值

function filterGenres(genres, ids) {
    return genres
        .filter((genre) => ids.indexOf(genre.id) != -1)
        .map((genre) => genre.name)
}

或者使用該reduce功能

function filterGenres(genres, ids) {
    return genres.reduce((results, genre) => {
        if(ids.indexOf(genre.id) != -1) {
            results.push(genre.name);
        }
        return results;
    }, []);
}

uj5u.com熱心網友回復：

以下可能是實作預期目標的一種可能解決方案。

代碼片段

const getNames = (ids, objects) => (
  ids.map(el => (
    objects.find(
      ({id}) => id === el
    )?.name
  ))
);

// below will be better in performance
// but the names returned will be ordered based on 'genres' array
//  objects.filter(({id}) => ids.some(el => el === id))
//  .map(({name}) => name)


const genres = [
  { id: 28, name: "Action" },
  { id: 12, name: "Adventure" },
  { id: 16, name: "Animation" },
  { id: 35, name: "Comedy" },
  { id: 80, name: "Crime" },
  { id: 99, name: "Documentary" },
  { id: 18, name: "Drama" },
  { id: 10751, name: "Family" },
  { id: 14, name: "Fantasy" },
  { id: 36, name: "History" },
  { id: 27, name: "Horror" },
  { id: 10402, name: "Music" },
  { id: 9648, name: "Mystery" },
  { id: 10749, name: "Romance" },
  { id: 878, name: "Science Fiction" },
  { id: 10770, name: "TV Movie" },
  { id: 53, name: "Thriller" },
  { id: 10752, name: "War" },
  { id: 37, name: "Western" },
];

const genre_ids = [10752, 10770, 18, 12];

console.log(getNames(genre_ids, genres));

解釋

• 一種新的方法getNames用于獲得結果
• 對于genre_ids陣列中的每個 id
• 查找是否有條目genres（通過匹配id道具）
• 如果找到，則從匹配的元素回傳name道具genres
• 并回傳結果陣列（隱式）

注釋掉的方法：

• 過濾genres和解構以獲得剛剛的id
• 檢查陣列id中是否存在genre_ids
• 如果是，請使用.map僅解構name
• 并且這個結果陣列names 被回傳（隱式）

此方法以不同的順序回傳（基于genres陣列）。

uj5u.com熱心網友回復：

你在嘗試這樣的事情嗎 -

let genre_names = new Array();
for(let i=0; i<genre_ids.length; i  ) {
   var a = genres.find(x=>x.id == genre_ids[i]);
   if (!!a)
     genre_names.push(a.name);
}
console.log(genre_names);

結果是[戰爭，電視電影，戲劇，冒險]？

uj5u.com熱心網友回復：

您可以通過使用Array.filter()和Array.map()來簡單地實作這一點。

const genres = [
  { id: 28, name: "Action" },
  { id: 12, name: "Adventure" },
  { id: 16, name: "Animation" },
  { id: 35, name: "Comedy" },
  { id: 80, name: "Crime" },
  { id: 99, name: "Documentary" },
  { id: 18, name: "Drama" },
  { id: 10751, name: "Family" },
  { id: 14, name: "Fantasy" },
  { id: 36, name: "History" },
  { id: 27, name: "Horror" },
  { id: 10402, name: "Music" },
  { id: 9648, name: "Mystery" },
  { id: 10749, name: "Romance" },
  { id: 878, name: "Science Fiction" },
  { id: 10770, name: "TV Movie" },
  { id: 53, name: "Thriller" },
  { id: 10752, name: "War" },
  { id: 37, name: "Western" },
];

const genre_ids = [10752, 10770, 18, 12];

const res = genres.filter((obj) => {
    return genre_ids.indexOf(obj.id) !== -1
}).map((filteredObj) => filteredObj.name);

console.log(res);

標籤：javascript 数组

上一篇：Reactrouterdom渲染一個空白頁面

下一篇：選擇選項后關閉選單