JavaScript過濾器物件類似于鍵名并推送到arr

這是我的問題：

const arr = [];
const Picture = {
  PictureDescription1: "this is description 1",
  PictureDescription2: "this is description 2",
  PictureDescription3: "this is description 3",
  PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
  PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
  PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg", 
}

我想為一個組創建 url 和 decirption 并推送到 arr。這是我的方式，但我認為它太長了：

if(Picture.PictureUrl1) {
 arr.push({
  url: Picture.PictureUrl1,
  description: Picture.PictUrlDescription1
 })
}

if(Picture.PictureUrl2) {
 arr.push({
  url: Picture.PictureUrl2,
  description: Picture.PictUrlDescription2
 })
}

if(Picture.PictureUrl3) {
 arr.push({
  url: Picture.PictureUrl3,
  description: Picture.PictUrlDescription3
 })
}

有沒有其他方法可以做到這一點？

uj5u.com熱心網友回復：

使用括號符號進行回圈[1, 2, 3]以查找適當的屬性將起作用。

const Picture = {
  PictureDescription1: "this is description 1",
  PictureDescription2: "this is description 2",
  PictureDescription3: "this is description 3",
  PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
  PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
  PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg", 
}

const arr = [1, 2, 3]
  .filter(num => Picture['PictureUrl'   num])
  .map(num => ({
    url: Picture['PictureUrl'   num],
    description: Picture['PictureDescription'   num]
  }));
console.log(arr);

uj5u.com熱心網友回復：

這是另一個版本，可與 中的任意數量的屬性一起使用obj：

const obj = {
  PictureDescription1: "this is description 1",
  PictureDescription2: "this is description 2",
  PictureDescription3: "this is description 3",
  PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
  PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
  PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg", 
}

const arr=Object.keys(obj).filter(k=>k.slice(0,10)=="PictureUrl")
   .map(k=>({url:obj[k], description: obj[k.replace("Url","Description")]}));
console.log(arr);

uj5u.com熱心網友回復：

const Picture = {
  PictureDescription1: "this is description 1",
  PictureDescription2: "this is description 2",
  PictureDescription3: "this is description 3",
  PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
  PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
  PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg", 
}

const urls = Object.keys(Picture).filter(e => e.includes('Url'));

const arr = urls.map((e) => {
    const descriptionKey = 'PictureDescription'   e[e.length - 1];
    const description = Picture[descriptionKey] ?? '';
    return {
        url: Picture[e],
        description: Picture[descriptionKey]
    }
})

console.log(arr);

使用邏輯識別 url 鍵，然后對其進行迭代以檢查與其相關的描述。

uj5u.com熱心網友回復：

Array.reduce執行。

考慮到鍵總是PictureDescription加上PictureUrl一個索引

const Picture = {
    PictureDescription1: "this is description 1",
    PictureDescription2: "this is description 2",
    PictureDescription3: "this is description 3",
    PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
    PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
    PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg", 
}
const arr = Object.entries(Picture).reduce((acc, curr) => {
    const [key, value] = curr;
    if(key.includes('PictureDescription')) {
        const index =  key[key.length - 1];
        acc.push({
            url: Picture[`PictureUrl${index}`],
            description: Picture[`PictureDescription${index}`]
        })
    }
    return acc;
}, []);
console.log(arr);

uj5u.com熱心網友回復：

使用 ES6 語法，你可以做這樣的事情。

[1,2,3].map(item=>({url:Picture[`PictureUrl${item}`],description:Picture[`PictureDescription${item}`]}))

標籤：javascript 目的

上一篇：Babel.js：未捕獲的TypeError：_interopRequireDefault不是函式

下一篇：第二個RxJS`scan'運算子沒有從前一個繼續？