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

时间:2019-05-24 08:00:17

标签: javascript arrays object ecmascript-6 destructuring

我正在使用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之外使用时应该有优化的空间。

2 个答案:

答案 0 :(得分:2)

如果要删除变量option的键,则需要带有虚拟变量的计算属性。

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

答案 1 :(得分:1)

您需要使用计算出的属性名称:

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