时间戳

首页 > 解决方案 > 如何获取 JSON 数组中的第一个密钥对？

javascript - 如何获取 JSON 数组中的第一个密钥对？

问题描述

目前，我有我的 JSON 和一个循环遍历结果然后遍历 URL 的函数。我试图只获取第一个类型值，即详细信息。我尝试寻找获得第一个值的方法，发现 using[0]在某些情况下可以工作，但不是这种情况。我索引不正确吗？有没有更简洁的方法来编码这个嵌套的 for 循环？

const data = {
  "data": {
    "results": [{
      "name": "Deadpool",
      "urls": [{
          "type": "detail",
          "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "wiki",
          "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "comiclink",
          "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        }
      ]
    }]
  }
};

function test(data) {
  const dataArr = data.data['results'];
  for (let i = 0; i < dataArr.length; i++) {
    console.log(dataArr[i].urls);
    const urlArr = dataArr[i].urls
    for (let j = 0; j < urlArr.length; j++) {
      console.log(urlArr[j].type[0]);
    }
  }
}

test(data);

标签： javascriptecmascript-6

解决方案

一种功能性的方法...

您的问题似乎有点含糊，但我认为您正在寻找每个数组type中第一项的值。urls

const data = {
    "data": {
        "results": [{
            "name": "Deadpool",
            "urls": [{
                "type": "detail",
                "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "wiki",
                "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "comiclink",
                 "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            }]
        }]
    }
};

const types = data.data.results.map(({ urls: [first, ...rest] }) => first.type);
console.log(types);

让我们分解一下...

data.data.results.map(...)

Array.prototype.map将返回一个新数组，其中包含对数组中每个元素调用提供的函数的结果results。

({ urls: ... })

这称为解构。它定义了一个新变量 ，当我们遍历项目时urls，它被分配了属性的值。urlsresults

({ urls: [first, ...rest] })

我们定义的变量的值urls将是一个数组。我们只关心数组中的第一项，因此我们将展开数组，定义一个名为的新变量，该变量first分配第一项的值，以及一个变量 ，rest它将是其余项的数组。基本上，占据阵列的头部。这些操作分别称为spread和rest。

({  urls: [first, ...rest] }) => first.type

最后，type从第一urls项返回属性的值。

如果我完全错了

并且您想要每个urls数组中的“详细信息”项，然后稍作更改就足够了：

const data = {
    "data": {
        "results": [{
            "name": "Deadpool",
            "urls": [{
                "type": "detail",
                "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "wiki",
                "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "comiclink",
                 "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            }]
        }]
    }
};

const urls = data.data.results.map(({ urls }) => 
    urls.find(({ type }) => type === 'detail')
);
console.log(urls);

如果您想了解更多关于函数式编程的知识，Eric Elliott 写了一组关于 JavaScript 函数式编程的优秀文章。这是第一个。

推荐阅读