如何使用擴展語法有效地從關聯數組中刪除項目

Question

我正在使用jQuery和KendoUI for jQuery進行項目，我需要制定一種通過更新元素來刪除元素的方法，而不是實際對對象進行變異。

我得出的結論是，我應該使用傳播語法來識別和刪除作為參數接收的對象/選項，然后將新列表設置為其余的對象/選項。

我想做些類似的事情，但是我不確定如何在不運行循環的情況下確定要刪除的對象的確切含義，並且需要有關如何執行此“最佳實踐”的建議。

deleteOption: option => {
                const { option, ...rest } = P.Order.Payment.get("paymentMethods");
                P.Order.Payment.set("paymentMethods", rest);
              }

我的數組包含由uid屬性唯一標識的對象。

數組中的對象是這樣創建的：

addNewCard: () => {
                P.Order.Payment.addOption(
                    {
                      paymentName: "Kort",
                      type: "CC",
                      value: 0,
                      class: "form-control",
                      icon: "fal fa-credit-card",
                      validated: true,
                      uid: this.uid,
                      update: (values) => {
                        P.Order.Payment.updateOption(this, values);
                      },
                      rmItem: function(){
                        P.Order.Payment.subtractValue(this.uid);
                        P.Order.Payment.deleteOption(this);
                      }
                    }
                );
              },

解：

ALMOST下面的建議將我帶到了我需要的地方，但是由於我收到的參數是一個對象，而不是字符串，因此我需要一個字符串標識符來使用它們。 盡管我可以使用索引作為標識符，但就我而言，該對象始終是索引數組的一部分，因此我還必須調整set方法以正確合並其余索引數組，而又不影響包含Kendo函數的數組的關聯部分。

deleteOption:  option => {
  const index = P.Order.Payment.get("paymentMethods").indexOf(option);
  let { [index]: _, ...rest } = P.Order.Payment.get("paymentMethods");
  rest = Array.from(rest).filter(entry => entry === undefined || null);
  P.Order.Payment.set("paymentMethods", [ ...rest ]);
},

這個解決方案解決了我的問題，我認為它很干凈，但是在KendoUI之外使用時應該有優化的空間。

Answer 1

如果要刪除變量option的鍵，則需要帶有虛擬變量的計算屬性。

deleteOption: option => {
    const { [option]:_, ...rest } = P.Order.Payment.get("paymentMethods");
    P.Order.Payment.set("paymentMethods", rest);
}

Answer 2

您需要使用計算出的屬性名稱：

deleteOption: option => {
    const { [option]: option, ...rest } = P.Order.Payment.get("paymentMethods");
    P.Order.Payment.set("paymentMethods", rest);
}