JavaScript中如何遍历嵌套数组

Question

我正在尝试迭代嵌套数组并且在提取正确值方面遇到了困难。

我的Json文件

var regions = [
{
    "id": 265592,
    "longName": "Amsterdam 1",
    "name": "ams01",
    "statusId": 2,
    "regions": [
        {
            "description": "AMS01 - Amsterdam",
            "keyname": "AMSTERDAM",
            "sortOrder": 0
        }
    ]
},
{
    "id": 814994,
    "longName": "Amsterdam 3",
    "name": "ams03",
    "statusId": 2,
    "regions": [
        {
            "description": "AMS03 - Amsterdam",
            "keyname": "AMSTERDAM03",
            "sortOrder": 26
        }
    ]
},
{
    "id": 1004997,
    "longName": "Chennai 1",
    "name": "che01",
    "statusId": 2,
    "regions": [
        {
            "description": "CHE01 - Chennai ",
            "keyname": "CHENNAI",
            "sortOrder": 30
        }
    ]
},

我想从区域数组中提取仅键名，并放入一个数组中。

我的代码很好用，可以给我输出结果：

const regions3 = []
for (let i = 0; i < regions.length; i++) {
    const element = regions[i]; 
    const regions1 = (element.regions)
    for (let j = 0; j < regions1.length; j++) {
        const element1 = regions1[j];
        const element2 = element1.keyname;
        regions3.push(element2)
        console.log(regions3)
    }
}

输出

AMSTERDAM
AMSTERDAM03
CHENNAI

我想知道是否有比运行两个for循环更快的迭代方法？谢谢。

- anish anil

---

Anish，从下面一个答案的评论中可以看出，内部的“regions”数组是否可以包含多个对象并不清楚。也许你可以在问题或示例数据中澄清一下。 - Mark

@MarkMeyer 这个问题很明确。请提出您自己的问题，而不是试图将自己的数据结构和要求叠加到这个现有问题中。 - guest271314

@MarkMeyer 目前的问题是清晰明了的。你故意忽略了实际问题中的数据结构、使用的语言和预期输出。 - guest271314

Answer 1

你可以使用 Array.flatMap()（不支持IE/Edge浏览器）和 Array.map()：

const regions = [{"id":265592,"longName":"Amsterdam 1","name":"ams01","statusId":2,"regions":[{"description":"AMS01 - Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam 3","name":"ams03","statusId":2,"regions":[{"description":"AMS03 - Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai 1","name":"che01","statusId":2,"regions":[{"description":"CHE01 - Chennai ","keyname":"CHENNAI","sortOrder":30}]}]

const result = regions.flatMap(o =>
  o.regions.map(p => p.keyname)
)

console.log(result)

如果您无法使用Array.flatMap()，则可以使用外部的Array.map()并将结果spread到Array.concat()中：

const regions = [{"id":265592,"longName":"Amsterdam 1","name":"ams01","statusId":2,"regions":[{"description":"AMS01 - Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam 3","name":"ams03","statusId":2,"regions":[{"description":"AMS03 - Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai 1","name":"che01","statusId":2,"regions":[{"description":"CHE01 - Chennai ","keyname":"CHENNAI","sortOrder":30}]}]

const result = [].concat(...regions.map(o =>
  o.regions.map(p => p.keyname)
))

console.log(result)

- Ori Drori

---

执行时出错：const result = regions.flatMap(o => ^TypeError: regions.flatMap 不是一个函数 - anish anil

这是因为IE/Edge（以及其他旧版本的其他浏览器）不支持它。这就是为什么我添加了第二个解决方案的原因。 - Ori Drori

Answer 2

你可以使用.map()和解构赋值。最初的回答。

var regions = [{"id":265592,"longName":"Amsterdam 1","name":"ams01","statusId":2,"regions":[{"description":"AMS01 - Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam 3","name":"ams03","statusId":2,"regions":[{"description":"AMS03 - Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai 1","name":"che01","statusId":2,"regions":[{"description":"CHE01 - Chennai ","keyname":"CHENNAI","sortOrder":30}]}];

let res = regions.map(({regions: [{keyname}]}) => keyname);

console.log(res);

- guest271314

---

评论不适合进行长时间的讨论；此对话已被移至聊天室。 - Cody Gray

@guest271314，非常感谢，这个方法很有效。您能否解释一下它的实际工作原理呢？我尝试了map函数并理解了语法。let newArr = oldArr.map((val, index, arr) => { // return element to new Array}); 我还能够使用以下代码显示id和Longname。let newArr = regions.map((val, i, arr) => { console.log(val.id); console.log(val.longName) });但说实话，在这里我无法弄清楚region和Keyname被显示的逻辑。您能否为此提供一些指导呢？ - anish anil

@anishanil 目标是数组对象中名为“regions”的属性，该属性的值是一个对象数组，其中“keyname”是解构的属性值，类似于regions[0]['regions'][0]['keyname']，请参阅 Destructuring assignment。 - guest271314

Answer 3

另一个解决方法是使用 Array::reduce() ：最初的回答。

var regions = [{"id":265592,"longName":"Amsterdam1","name":"ams01","statusId":2,"regions":[{"description":"AMS01-Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam3","name":"ams03","statusId":2,"regions":[{"description":"AMS03-Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai1","name":"che01","statusId":2,"regions":[{"description":"CHE01-Chennai","keyname":"CHENNAI","sortOrder":30}]}];

let res = regions.reduce(
    (acc, curr) => (curr.regions.forEach(x => acc.push(x.keyname)), acc),
    []
);

console.log(res);

- Shidersz

Answer 4

虽然基本上是相同的事情，但是在JavaScript中使用forEach方法或者数组类型可以节省一些时间。下面是一个例子。

const regions3 = [];
        regions.forEach(function(region){
            region.regions.forEach(function(subRegion){
                regions3.push(subRegion.keyname);
                console.log(subRegion.keyname);
            })
        });

forEach函数执行一个匿名函数，将数组中的每个元素作为参数传递给该匿名函数

- Saad Siddiqui