使用条件迭代数组对象

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 值括在引号中，否则它们将被称为导致错误的变量。