如何使用扩展语法有效地从关联数组中删除项目

Question

我正在为 jQuery 使用 jQuery 和 KendoUI 的项目，我需要创建一个通过更新而不是然后删除元素的方法实际上改变了对象。

我已经得出结论，我应该使用传播语法来识别和删除我收到的作为参数的 object/option，然后将我的新列表设置为剩余的 objects/options.

我想做一些与此类似的事情，但我不太确定如何在没有运行循环的情况下识别我想要删除的对象 - 并且需要有关如何执行此操作的建议 'best practice'.

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);
                      }
                    }
                );
              },

解决方案：

下面的建议几乎让我到达了我需要的地方，但由于我收到的参数是一个对象，而不是一个字符串，我需要一个字符串标识符才能使用它们。由于我的对象始终是索引数组的一部分，尽管我可以使用索引作为我的标识符，我还必须调整我的 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);
}

如何使用扩展语法有效地从关联数组中删除项目

How to efficiently remove items from an associative array using spread syntax

javascript

arrays

object

destructuring

ecmascript-6