使用條件迭代數組對象

Question

我想用 ES6 方式從對象數組中獲取數據。

我有數組對象。

const data = [
  {
    title: 'first',
    description: "some desc",
    url: firstUrl,
  },
  {
    title: 'second',
    description: "some desc",
    url: secondUrl,
  },
];

我試圖檢查是否有title === 'second'然后返回它的 url 否則返回firstUrl

我知道我可以用 for 循環做到這一點。 但是，我想要 ES6 的方式。 任何幫助將不勝感激。

我試過：

let text = data.map((val) => { val.title === 'second' ? val.url : val.url });

但是，不工作，我知道這不是好方法。

Answer 1

 const secondItem = data.find(item => item.title === 'second') const url = secondItem ? secondItem.url || firstUrl

像這樣保持簡單

Answer 2

您可以獲取一個對象並將所需的鍵分配給該對象。 對於其他默認名稱，請使用default 。

要獲得結果，請使用想要的密鑰或默認值。

 const data = [{ title: 'first', description: "some desc", url: 'firstUrl' }, { title: 'second', description: "some desc", url: 'secondUrl' }], temp = data.reduce((r, { title, url }) => { r[title === 'second' ? title : 'default'] = url; return r; }, {}); console.log(temp.second || temp.default);

Answer 3

你可以這樣做，你檢查你的數組中是否有第二個項目（條件title === 'second' ），然后你要么使用它，要么回退到第一個。 如果第一個（或第二個） undefined您將在行 (*) 中得到一個Undefinded reference

 const data = [ { title: 'first', description: "some desc", url: 'firstUrl', }, { title: 'second', description: "some desc", url: 'secondUrl', }, ]; // if your order is allways first and second (0 and 1) you can do this // const urlObject = data[1] || data[0] const urlObject = data.find(item => item.title === 'second') || data.find(item => item.title === 'first') // here you have your url console.log(urlObject.url) // line (*)

Answer 4

如果只需要一個計算元素，我會使用reduce而不是其他方法（如 map）。

此外，如果默認值是第一個元素，那么我會從陣列serching第二的端部開始，然后，如果它不存在，我將返回第一。

所以reduceRight似乎是最好的選擇

const data = [
    // ...
];

let text = data.reduceRight((prev, {title, url}, i) => {
    if(prev) {
        return prev
    }
    if(title === 'second' || i === 0) {
        return url
    }
}, null)

Answer 5

假設您只想知道是否有“第二個”對象，否則使用數組的第一個元素，您可以使用.find() 。

const secondItem = data.find(e => e.title === "second"); // secondItem will be undefined if not found
const result = secondItem ? secondItem.url : data[0].url;

您還應該檢查數據可能是空數組的邊緣情況。 上面的代碼在訪問默認情況時會拋出錯誤。

Answer 6

您可以使用三元運算符來檢查second存在。 如果是這樣，獲取它的 URL，否則，回退到first的 URL，如下所示：

兩者兼而有之：您將獲得第二個 URL

 const data = [{ title: 'first', description: "some desc", url: "firstUrl" }, { title: 'second', description: "some desc", url: "secondUrl" } ]; const targetURL = data[1] ? data[1].url : data[0].url; console.log(targetURL);

使用first only，您將獲得first'的 URL:

 const data = [{ title: 'first', description: "some desc", url: "firstUrl" }]; const targetURL = data[1] ? data[1].url : data[0].url; console.log(targetURL);

另請注意，您需要將 URL 值括在引號中，否則它們將被稱為導致錯誤的變量。