从 JavaScript 数组中返回具有默认值的对象

Question

考虑：

    const fields = ['email', 'password'];

    const objFields = {};
    fields.forEach(value => {
      objFields[value] = '';
    });

    console.log(objFields);
// Outputs {email: "", password: ""}

我想获得相同的结果，但不必初始化一个空对象。

实际上，我的情况是我想设置 React 组件的初始状态。

class App extends Component {
  fields = ['email', 'password'];

  state = {

    fields: // The one liner code here that should return the object created from fields array,

  };
  ...

预期结果是

// state = {fields: {email: "", password: ""}}

Answer 1

每当您寻求将一组值减少为一个值时，您都在寻找.reduce()：

state = {
  fields: fields.reduce((acc, key) => ({...acc, [key]: ''}), {}),
};

Answer 2

在现代浏览器中，或者通过使用 polyfills，您可以使用Object.fromEntries()数组的值作为键/属性从数组创建对象，并使用默认值填充对象的值。

const fields = ['email', 'password'];

const result = Object.fromEntries(fields.map(value => [value, '']));

结果是{email: "", password: ""}。

Answer 3

您可以映射对象并将所有对象分配给单个对象。

const
    fields = ['email', 'password'],
    object = Object.assign({}, ...fields.map(key => ({ [key]: '' })));

console.log(object);