如何基于动态定义的变量来解构对象

时间:2019-01-06 18:59:08

标签: javascript ecmascript-6 destructuring object-destructuring

我正在处理一个不可变对象,我需要添加一个从中减去值的数组。

我知道可以通过以下方式使用ES6进行销毁。

const {countries, remainder} = someObj // {countries:...,languages:..., ...keys};

这将结束我的工作,剩下的就是没有国家/地区密钥的新对象。

因此,我发现我可以在数组上使用reduce来遍历并删除对象中的所有值,最后使用默认参数(即原始对象)返回一个新对象。

但是,我不确定该怎么做,因为键的名称是在数组中定义的。

arrayToRemove.reduce((total, value) => {
  const { extractValue: [value], ...remainder } = total
  return remainder;
}, { ...originalObj });

arrayToRemove.reduce((total, value) => {
  const { [extractValue], ...remainder } = total
  return remainder;
}, { ...originalObj });

我希望最终得到一个新的Object,而没有包含在名为arrayToRemove的数组中的键。

我需要在保持不变性的同时执行此操作,因此我不能仅遍历原始对象并将其从中删除,因此我认为以上内容将是解决该问题的一个聪明方法。

感谢您的帮助。

2 个答案:

答案 0 :(得分:5)

您可以使用带有虚拟对象的computed property names作为目标属性。

在此处了解更多信息:object property assignment pattern [YDKJS: ES6 & Beyond]

var originalObj = { foo: 1, bar: 2, baz: 3, },
    arrayToRemove = ['foo', 'bar'],
    result = arrayToRemove.reduce((total, key) => {
        const { [key]: dummy, ...remainder } = total;
        return remainder;
    }, originalObj);


console.log(result);

答案 1 :(得分:1)

arrayToRemove.reduce((obj, key) => {
  const { [key]: value, ...remainder } = obj
  return remainder
}, originalObj)