javascript - 动态更新 JavaScript 数组

Question

我有一个这样的 JS 数组。

const PaymentMethods = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];

如您所见，我现在正在对这些进行硬编码。但我想动态更新这个PaymentMethods

例如，将有 2 个复选框。isCredit和isDebit

1. 如果isCredit = true和isDebit = false，我希望PaymentMethods看起来像这样

const PaymentMethods = [
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];

2. 如果isCredit = false和isDebit = true，我们的PaymentMethods应该是

const PaymentMethods = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
  ];

3. 如果isCredit = false和isDebit = false，我们的PaymentMethods应该是

const PaymentMethods = [];

4. 如果isCredit = true和isDebit = true，我们PaymentMethods应该像原来的顶部一样。

有人可以突出我如何做到这一点。我已经搜索了很多，但在这方面还没有找到任何东西。

Answer 1

几个选项供您选择：

您可以拥有一个包含两个条目的主数组，并用于filter为isCredit和isDebit标志的特定值创建过滤版本：

let paymentMethods = AllPaymentMethods.filter(({type}) => type === "CREDIT" && isCredit || type === "DEBIT" && isDebit);

现场示例：

const AllPaymentMethods = [
    {
        type: "DEBIT",
        cardType: "VISA",
    },
    {
        type: "CREDIT",
        cardType: "VISA",
    }
];
const isCredit = Math.random() < 0.5;
const isDebit = Math.random() < 0.5;
let paymentMethods = AllPaymentMethods.filter(({type}) => type === "CREDIT" && isCredit || type === "DEBIT" && isDebit);
console.log(`isCredit: ${isCredit}, isDebit: ${isDebit}, paymentMethods = ${JSON.stringify(paymentMethods)}`);

Run repeatedly to see different values of <code>isCredit</code> and <code>isDebit</code>.

或者您可以拥有单独的条目并使用一对if语句构建数组：

const isDebit = Math.random() < 0.5;
const isCredit = Math.random() < 0.5;
let paymentMethods = [];
if (isCredit) {
    paymentMethods.push(creditOption);
}
if (isDebit) {
    paymentMethods.push(debitOption);
}

现场示例：

const debitOption =
{
    type: "DEBIT",
    cardType: "VISA",
};
const creditOption =
{
    type: "CREDIT",
    cardType: "VISA",
};

const isDebit = Math.random() < 0.5;
const isCredit = Math.random() < 0.5;
let paymentMethods = [];
if (isCredit) {
    paymentMethods.push(creditOption);
}
if (isDebit) {
    paymentMethods.push(debitOption);
}

console.log(`isCredit: ${isCredit}, isDebit: ${isDebit}, paymentMethods = ${JSON.stringify(paymentMethods)}`);

Run repeatedly to see different values of <code>isCredit</code> and <code>isDebit</code>.

Answer 2

我认为您可以filter在Array. 就像下面这样：

const getPaymentMethods = (isCredit, isDebit) => {
  const paymentOptions = [
    {
      type: "DEBIT",
      cardType: "VISA",
    },
    {
      type: "CREDIT",
      cardType: "VISA",
    }
  ];
  
  if (isCredit && isDebit) {
    return paymentOptions;
  } else if (isCredit) {
    return paymentOptions.filter(e => {return e.type === 'CREDIT'});
  } else if (isDebit) {
    return paymentOptions.filter(e => {return e.type === 'DEBIT'});
  }
  
  return [];
}

// test cases:
console.log(getPaymentMethods(true, true));
console.log(getPaymentMethods(false, false));
console.log(getPaymentMethods(true, false));
console.log(getPaymentMethods(false, true));


// usage:
// const PaymentMethods = getPaymentMethods(true, false);

在文档中进一步阅读filter 此处。

Answer 3

这个香草 Javascript 解决方案。

首先是 HTML 代码

<h2>Choose payments</h2>
<input type="checkbox" name="payment" value="CREDIT" checked> CREDIT<br>
<input type="checkbox" name="payment" value="DEBIT"> DEBIT<br>
<hr>
<button onclick="checkout()">checkout</button> 

其次对于Javascript代码

var checkbox =  document.getElementsByTagName('input');

function checkout() {
  const AllPaymentMethods = [];
  for (var i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked) {
      AllPaymentMethods.push({
        type: checkbox[i].value,
        cardType: "VISA"
      });
    }
  }

  console.log(AllPaymentMethods);
}

另外，如果您需要检查它ht​​tps://codepen.io/abhar/pen/ZEEomYj

Answer 4

请将此视为指导。不是功能齐全的代码

  const PaymentMethods = [];
  let debitChecked = false; // varibles to keep checked status
  let creditChecked = false;

  onDebitCheckboxChanged() { // on check state change function
    this.debitChecked =   //TO DO get checkbox status
    this.updatePaymentMethods();
  }

  onCreditCheckboxChanged() { // on check state change function
    this.creditChecked =  //TO DO get checkbox status
    this.updatePaymentMethods();
  }

  updatePaymentMethods() { //update array acordingly
    this.PaymentMethods = [];
    if (debitChecked === true) {
      this.PaymentMethods.push({
        type: "DEBIT",
        cardType: "VISA",
      })
    }

    if (creditChecked === true) {
      this.PaymentMethods.push({
        type: "CREDIT",
        cardType: "VISA",
      })
    }

  }