在数组内有条件地添加对象

Question

我想在对象数组中添加一个条件对象。如果条件不满足，我希望该对象根本不存在，而其他对象保持原样。 考虑以下几点：

const CardBuildingBlock: FC = () => {
    const type = 'typeA';

    const typesOfCards = [
      {name: 'Card A'
      size: 'Medium'
      action: 'make'},

      {name: 'Card B'
      size: 'Small'
      action: 'break'},

      {name: 'Card C'
      size: 'Large'
      action: 'build'},

//我尝试了以下操作，但没有成功

      type == 'typeA' ? null : {
      name: 'Card A'
      size: 'Medium'
      action: 'make'},
    ];


    return(
      typeOfCards.map(({name, size, action}) => (
        <BuildCard 
          name = {name}
          size = {size}
          action = {action}
        />
    )
)};

请帮忙！！！！

感谢您的帮助。

Answer 1

据我了解，您希望在给定条件的情况下过滤掉数组的所有元素。我要做的是向对象添加一个新键，指定是否应该显示它，然后过滤和映射。

const typesOfCards = [
  { name: "Card A", size: "Medium", action: "make", type: "typeA" },
  ...
];

return typesOfCards.filter(card => card.type === "typeA").map(({ name, size, action }) => (
    <BuildCard name={name} size={size} action={action} />
  ));

Answer 2

这里最简单的方法是将concat 新元素添加到数组中。如果条件为真，您将连接新元素。考虑这个例子：

// using if statement
const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },
  { name: "Card C", size: "Large", action: "build" },
];

if (type === "typeA") {
  typesOfCards = typesOfCards.concat(additionalCardOfTypeA);
}

// using ternary operator
const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },
  { name: "Card C", size: "Large", action: "build" },
].concat(
  type === "typeA"
    ? additionalCardOfTypeA 
    : []
);

编辑

要在特定位置插入新元素，您必须创建额外的数组。首先，为您的元素找到一个位置。然后，创建一个包含原始索引之前的所有内容的数组，以及包含从索引到结尾的所有内容的数组。然后将开始、新元素和结束连接到最终数组中。

const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },

  { name: "Card C", size: "Large", action: "build" },
];

if (type === "typeA") {
  let indexForNewElement = getSomehowIndex();
  // Getting everything before index
  let head = typesOfCards.slice(0, indexForNewElement);
  // Getting everything after index
  let tail = typesOfCards.slice(indexForNewElement);
  typesOfCards = head.concat(additionalCardOfTypeA).concat(tail);
}

Answer 3

在这种情况下，推送可能会很有用：

type === 'typeA' && typesOfCards.push({
      name: 'Card A'
      size: 'Medium'
      action: 'make'}
)

也许你可能想在一个函数中包含它，它应该返回 typesOfCards 数组