【问题标题】:Return object with default values from array in Javascript从Javascript中的数组返回具有默认值的对象
【发布时间】:2019-01-16 13:57:45
【问题描述】:
    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: ""}}

【问题讨论】:

  • fields 将只有两个值?
  • fields.reduce((acc,k) => (acc[k] = "", acc), {})
  • @brk 这只是为了简单起见

标签: javascript ecmascript-6


【解决方案1】:

每当您想将一组值减少为一个值时,您就是在寻找.reduce()

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

【讨论】:

    【解决方案2】:

    modern browsersusing polyfills 中,您可以使用Object.fromEntries() 从数组创建对象,使用数组的值作为键/属性,并使用默认值填充对象的值。

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

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

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

        【解决方案4】:

        您需要将包含键的数组转换为真实对象。

        要做到这一点,你有很多可能,但你还是得做点什么,没有什么神奇的技巧。

        我最喜欢的解决方案是使用一个函数插入到你的实用程序类中。因此它易于阅读和重复使用。


        数字 1:函数

        function initializeKeys(keys, initialValue, object) {
          return keys.reduce((tmp, x) => {
            tmp[x] = initialValue;
        
            return tmp;
          }, object);
        }
        
        const objFields = initializeKeys(['email', 'password'], '', {
          otherKey: 'a',
        });
        
        console.log(objFields);

        数字 2:forEach

        const fields = ['email', 'password'];
        
        const objFields = {};
        
        fields.forEach(value => {
          objFields[value] = '';
        });
        
        console.log(objFields);

        数字 3 : 减少

        const fields = ['email', 'password'];
        
        const objFields = {
          ...fields.reduce((tmp, x) => {
            tmp[x] = '';
        
            return tmp;
          }, {}),
        };
        
        console.log(objFields);

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-12-22
          • 2013-09-28
          • 1970-01-01
          • 2011-04-05
          • 1970-01-01
          • 2014-05-20
          • 2020-08-06
          • 2022-01-07
          相关资源
          最近更新 更多