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

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

解决方案:

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