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

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

您可以使用 Object.fromEntries() 和 .map()，如果您可以对每个值使用相同的 handler 引用...（sn-p 控制台输出显示处理程序方法如何与每个值，这就是为什么它看起来有点奇怪）：

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

Answer 2

您可以创建一个通用函数并传递一个键数组并循环通过keyArr 并为每个键放置值

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

let value = "some value"
const object = { someKey: 'value'};

let dynamicSetValues = (keyArr, value) => {
  keyArr.forEach(key => {
    object[key] = value
  })
}

dynamicSetValues(['SHOW_PAYMENT_DIALOG','SHOW_BUSINESS_DIALOG'], value)

console.log(object)

注意：- 这会改变原始对象，如果您想要不变性，您可以复制对象并将值放在所需的键上，每次从功能