使用for或for遍历对象数组

时间：2019-01-08 06:30:31

标签： javascript arrays object

请如何遍历像这样的对象数组 使用“ for each”或“ for in或还有另一种方式

{
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

我需要将输出作为数组中的每个对象 也可以说我想使用“ id”参数进行迭代。我该怎么做

7 个答案:

答案 0 :(得分：0)

每次尝试

let k={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

k.cards.forEach(a=>{
console.log(a.imgSrc)
console.log(a.des)
console.log(a.cardName)
})

答案 1 :(得分：0)

当然-最简单的方法是Array.prototype.forEach()：

ArrayFloat.D4 tempArr = (ArrayFloat.D4) v.read();
 

答案 2 :(得分：0)

有两种方法：

let cards =[
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer1.png",
        "id": 1
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "tom-jagger.jpg",
        "id": 2
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer3.png",
        "id": 3
    }
];

... ... 

for(var i in cards){
    console.log(cards[i]);
}

或

cards.map(function(each_item, index_key){
    console.log(each_item);
});

答案 3 :(得分：0)

这取决于您是否要遍历并返回。

您可以执行以下操作来修改迭代过程中的响应，或者仅在循环中返回每个对象：

  

地图：array.map将返回https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 

array.map(item => console.log(item));
  

Foreach：方法对每个数组元素执行一次提供的函数。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});

答案 4 :(得分：0)

您有许多选择可用于遍历像这样的数据。更常见的方法是：

通过Array#forEach()进行迭代：

data.cards.forEach(function(card) {
  console.log(card);
});

使用for-of结构通过迭代器进行迭代：

for(const card of data.cards) {
  console.log(card);
};

使用for-in结构通过迭代器进行迭代：

for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};

以下是有效的代码段，显示了这些代码的作用：

var data = {
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
};

// Array.forEach method
data.cards.forEach(function(card) {
  console.log(card);
});

// for-of loop
for(const card of data.cards) {
  console.log(card);
};

// for-in loop
for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};

答案 5 :(得分：0)

let data={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}
function match(data,id){
return data.cards.filter(a=>id==a.id)
}
console.log(match(data,1))

答案 6 :(得分：0)

除了使用forEach和forIn。您可以使用javascript映射功能。还可以使用第三方模块（例如Lodash），该模块提供了许多有用的帮助程序功能。这是链接Lodash Documentation 

var _= require('lodash');
const cards = [
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer1.png",
    "id": 1
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "tom-jagger.jpg",
    "id": 2
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer3.png",
    "id": 3
  }
]

_.forEach(cards,item => {

  console.log("cards has:",item)
})
相关问题
最新问题