ES6 中的简单解构数组/对象答案

【问题标题】：Simple destructuring Array/Object in ES6ES6 中的简单解构数组/对象
【发布时间】：2017-09-05 21:43:30
【问题描述】：

我正在尝试使用选定的键 - reqProps 返回新对象。我设法通过修复 props prop1, prop3 来做到这一点，现在希望能够传递 reqProps 数组值来替换 prop1、prop3。我尝试了函数、字符串文字和一些“黑客”。他们都没有工作

const data = [
  {
    prop1: 1,
    prop2: 2,
    prop3: 3
  },
  {
    prop1: 10,
    prop2: 20,
    prop3: 30
  },
  {
    prop2: 200,
    prop4: 400
  },
  {
    prop3: 3000
  }
];

// to return properties for the following...
const reqProps = ['prop2','prop3','prop4'];

// current implementation fixing return object with prop1, prop3
const obj = data.map(({prop1, prop3}) => {
    return {prop1, prop3};
});

目前obj的结果是

[{"prop1":1,"prop3":3},{"prop1":10,"prop3":30},{},{"prop3":3000}]

我不想使用循环，就像解构的“力量”！ ;)

【问题讨论】：

你想做什么？使用数组中的字符串进行解构？

标签： javascript ecmascript-6 destructuring

【解决方案1】：

如果你坚持解构，你必须使用eval：

const reqProps = ['prop2','prop3','prop4'];

const literalString = '{'+reqProps.join(',')+'}';

const obj = data.map(new Function(literalString, 'return '+literalString));

您确实应该使用循环 - 您也可以将其隐藏在辅助函数中或仅使用 reduce。

【讨论】：

【解决方案2】：

正如@Bergi 建议的那样，您最好以某种方式使用循环。

这是一个带有隐式循环的变体：

data.map(o => reqProps.filter(p => p in o)
                      .reduce((acc, p) => ({...acc, [p]: o[p]}), {}))

【讨论】：