根据键名有选择地解构对象

Question

假设我有这个对象：

const someProps = { darkMode: true, underlineMistakes: false, spellingView: (...), grammerView: (...) };

我不一定知道任何道具的名称，除了 1+ 以 'View' 结尾。

我只想解构以 'view' 结尾的键，我想这样做：

const propsEndingInView = Object.keys(someProps).filter(prop => !prop.endsWith('View');
const {
  ...nonViewProps, // darkMode, underlineMistakes
  propsEndingInView // {spellingView: (...), grammerView: (...)}
} = someProps;

我需要以某种方式将两种道具分开，最好是

我想不出如何做到这一点，即使可能。

Answer 1

解构只是获得已知属性的一种方式。你不能用解构来做到这一点。您可以创建一个自定义方法来过滤掉键以获取对象的子集

const someProps = {
  darkMode: true,
  underlineMistakes: false,
  spellingView: 'spellingView',
  grammerView: 'grammerView'
};

const subset = Object.fromEntries(
  Object.entries(someProps).filter(([k]) => k.endsWith('View'))
)

console.log(subset)

Answer 2

这不能通过解构来完成，但您可以编写一些代码来完成。例如：

const extract = (obj, regex) => 
  Object
    .entries(obj)
    .filter(([k]) => (typeof k === 'string') && regex.test(k))
    .reduce((out, [k, v]) => (
      out[k] = v,
      out
    ), {})

const someProps = { darkMode: true, underlineMistakes: false, spellingView: '(...)', grammerView: '(...)' };

const propsEndingInView = extract(someProps, /View$/)
console.log(propsEndingInView)

Answer 3

如果我理解正确的话，您希望得到一个仅包含 someProps 中名称以 View 结尾的属性的对象。你可以这样做：

const viewProps = Object.keys(someProps).reduce((props, propName) => {
  // Here we check whether propName ends in View
  // If it does we add it to the object, if not we leave the object as it is
  return propName.match(/View$/) ? { ...props, [propName]: someProps[propName] } : props;
}, {});

有帮助吗？您可以找到有关 Array.reduce here.

的文档

根据键名有选择地解构对象

Selectively Destructure an object, based on key name

javascript

destructuring

ecmascript-6