我如何定位对象数组中的属性

Question

我正在用香草 JS 构建一个简单的纸牌游戏。

我有一组卡片对象：

let cards = [
    {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"},
    {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"}
]

如何定位cards中任何索引处的所有cardFace属性，以便可以在 HTML 文档中显示它们？

我希望我说得通。

Answer 1

您可以使用Array.from方法

let cards = [
    {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"},
    {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"}
];

let result = Array.from(cards, card => card.cardFace);
console.log(result);

Answer 2

您可以直接访问它们：

 let cards = [ {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"}, {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"} ] console.log(cards[0].cardFace); console.log(cards[1].cardFace);

您也可以在基于索引的for循环中执行此操作：

 let cards = [ {value: "4", suit: "Hearts", weight: 4, cardFace: "&#127156;"}, {value: "K", suit: "Clubs", weight: 10, cardFace: "&#127199;"} ]; for (let i = 0; i < cards.length; i++) { console.log(cards[i].cardFace); }

另一种选择是for... of循环，它在 imo 中更具可读性。 这一个也使用 ES6' Object 解构：

 let cards = [ {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"}, {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"} ]; for (const { cardFace } of cards) { console.log(cardFace); }

您还可以从只有颜色值的cards创建一个新数组：

 let cards = [ {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"}, {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"} ] const colors = cards.map(card => card.cardFace); console.log(colors); // ["🂴", "🃟"]

Answer 3

您可以访问 object 字段。 像这样：

object.field

在您的情况下，您可以使用：

 let cards = [ {value: "4", suit: "Hearts", weight: 4, cardFace: "🂴"}, {value: "K", suit: "Clubs", weight: 10, cardFace: "🃟"} ] cards.forEach(card => { console.log(card.cardFace); })