javascript - 使用变量动态设置多个对象属性

Question

我想设置多个对象属性具有相同的值。

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
    return {
        ...state,
        data: payload
    };
  };

const object = {
  [SHOW_BUSINESS_DIALOG]: handler,
  [SHOW_PAYMENT_DIALOG]: handler,
};

如上面的示例，我必须手动为 2 个属性 SHOW_BUSINESS_DIALOG 和 SHOW_PAYMENT_DIALOG 分配处理程序

有没有办法通过 js api 快速动态设置它，但不需要引入新函数来处理这个问题

const object = {
      [SHOW_BUSINESS_DIALOG, SHOW_PAYMENT_DIALOG]: handler,
    };

Answer 1

如果您同意对 handler 使用相同的引用，则可以将 Object.fromEntries() 与 .map() 一起使用每个值...(代码片段控制台输出显示处理程序方法对于每个值都是相同的引用，这就是为什么它看起来有点奇怪):

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
  return {
    ...state,
    data: payload
  };
};

const keys = [SHOW_PAYMENT_DIALOG, SHOW_BUSINESS_DIALOG];
const object = Object.fromEntries(keys.map(k => [k, handler]));

console.log(object);

请注意，.fromEntries() 目前位于 draft mode但是，我认为对于这种情况，使用带有 Set 的通用 if 语句(使用 .has())比使用对象更好:

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
  return {
    ...state,
    data: payload
  };
};

const get_handler = key => {
  const keys = new Set([SHOW_PAYMENT_DIALOG, SHOW_BUSINESS_DIALOG]);
  if(keys.has(key))
    return handler;
}

console.log(get_handler(SHOW_BUSINESS_DIALOG)); // hanlder
console.log(get_handler("foo")); // undefined