在一个循环中组合来自 2 个数组的 2 个对象？

Question

我正在通过使用 javascript 组合一组花色对象和一组卡片对象来创建一副卡片（一组卡片对象）。

我正在使用 forEach 循环来循环花色，并且嵌套的是卡片的地图循环。

console.log 正在返回正确的对象以推送到新数组，但是 .push() 仅使用最后一个花色和最后一张牌附加一个组合对象。

我在哪里做错了？

我尝试了多种不同的循环和方法来追加到一个新数组，但没有运气。 Console.log() 返回正确的值，但我无法将正确的组合对象推送到新数组。

  // Deck of Cards
var suits = [
  { suit: "clubs", color: "black" },
  { suit: "spades", color: "black" },
  { suit: "hearts", color: "red" },
  { suit: "diamonds", color: "red" }
];

var family = [
  { name: "2", value: 2 },
  { name: "3", value: 3 },
  { name: "4", value: 4 },
  { name: "5", value: 5 },
  { name: "6", value: 6 },
  { name: "7", value: 7 },
  { name: "8", value: 8 },
  { name: "9", value: 9 },
  { name: "10", value: 10 },
  { name: "J", value: 10 },
  { name: "Q", value: 10 },
  { name: "K", value: 10 },
  { name: "A", value: 1 },
];

var deck = new Array();

suits.forEach(function (x) {
  var arr = family.map((y) => {
    var obj = Object.assign(x, y);
    console.log(obj);
    deck.push(obj);
    return obj;
  });
  
  console.log(arr);
});

console.log(deck);

Answer 1

尝试Object.assign({}, x, y) 而不是Object.assign(x, y)。目前，您正在通过向其添加 y 的所有属性来操作 x 对象。

// Deck of Cards
var suits = [
    {suit: "clubs",color: "black"},
    {suit: "spades",color: "black"},
    {suit: "hearts",color: "red"},
    {suit: "diamonds",color: "red"}    
];

var family = [
    {name: "2",value: 2},
    {name: "3",value: 3},
    {name: "4",value: 4},
    {name: "5",value: 5},
    {name: "6",value: 6},
    {name: "7",value: 7},
    {name: "8",value: 8},
    {name: "9",value: 9},
    {name: "10",value: 10},
    {name: "J",value: 10},
    {name: "Q",value: 10},
    {name: "K",value: 10},
    {name: "A",value: 1},
];

var deck = new Array();

suits.forEach(function(x){

    var arr = family.map( (y) => {
        var obj = Object.assign({}, x, y); 
        deck.push(obj);
        return obj; 
    });

});

console.log(deck);

Answer 2

Object.assign(x,y) 会将y 的值放到x 上。您想单独留下x，因此使用Object.assign({}, x,y) 将您的属性存储在一个新对象中。考虑下面的演示：

var suits = [
    {suit: "clubs",color: "black"},
    {suit: "spades",color: "black"},
    {suit: "hearts",color: "red"},
    {suit: "diamonds",color: "red"}    
];

var family = [
    {name: "2",value: 2},
    {name: "3",value: 3},
    {name: "4",value: 4},
    {name: "5",value: 5},
    {name: "6",value: 6},
    {name: "7",value: 7},
    {name: "8",value: 8},
    {name: "9",value: 9},
    {name: "10",value: 10},
    {name: "J",value: 10},
    {name: "Q",value: 10},
    {name: "K",value: 10},
    {name: "A",value: 1},
];

const tmp = suits.reduce((acc, s) => {
  return acc.concat(family.map(f => {
    return Object.assign({}, f, s);
  }));
}, []);

const pre = document.createElement("pre");
pre.innerHTML = JSON.stringify(tmp, null, 4);
document.body.appendChild(pre);

Answer 3

如果you can use flatmap，那么它可以变得更简单：

const suits = [{ suit: "clubs", color: "black" }, { suit: "spades", color: "black" }, { suit: "hearts", color: "red" }, { suit: "diamonds", color: "red" }]
const family = [{ name: "2", value: 2 }, { name: "3", value: 3 }, { name: "4", value: 4 }, { name: "5", value: 5 }, { name: "6", value: 6 }, { name: "7", value: 7 }, { name: "8", value: 8 }, { name: "9", value: 9 }, { name: "10", value: 10 }, { name: "J", value: 10 }, { name: "Q", value: 10 }, { name: "K", value: 10 }, { name: "A", value: 1 }]

const deck = suits.flatMap(s => family.map(f => ({...s, ...f})))

console.log(deck)

附带说明，订购花色梅花/钻石/红心/黑桃似乎有一种强烈的惯例（可能来自 Bridge）。英文很容易记住，因为它们是字母。）