假设我有一个对象:

elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};

我想用它的属性子集创建一个新对象。

 // pseudo code
 subset = elmo.slice('color', 'height')

 //=> { color: 'red', height: 'unknown' }

我怎样才能做到呢?


当前回答

打印稿的解决方案:

function pick<T extends object, U extends keyof T>(
  obj: T,
  paths: Array<U>
): Pick<T, U> {
  const ret = Object.create(null);
  for (const k of paths) {
    ret[k] = obj[k];
  }
  return ret;
}

输入信息甚至允许自动补全:

Credit to definitelytyping for U extends keyof T trick!

打印稿操场

其他回答

在这个问题中,解构为动态命名的变量在JavaScript中是不可能的。

要动态设置键,可以使用reduce函数而不改变对象,如下所示:

const get子集= (obj,…keys) =>个key。Reduce ((a, c) =>({…A, [c]: obj[c]}), {}); Const elmo = { 颜色:红色, 讨厌:没错, 高度:“未知”, Meta: {1: '1', 2: '2'} } const子集= get子集(elmo, 'color', '烦人') console.log(子集)

应该注意的是,你是在每次迭代中创建一个新对象,而不是更新一个克隆。——mpen

下面是一个使用reduce和单个克隆的版本(更新传入的初始值以reduce)。

const get子集= (obj,…keys) =>个key。Reduce ((acc, curr) => { Acc [curr] = obj[curr] 返回acc }, {}) Const elmo = { 颜色:红色, 讨厌:没错, 高度:“未知”, Meta: {1: '1', 2: '2'} } const子集= get子集(elmo, '烦人','height', 'meta') console.log(子集)

你可以使用逗号操作符

const elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};

const subset = ({color , height} = elmo , {color , height});
// {color: 'red', height: 'unknown'}

对象数组

const aListOfObjects = [{
    prop1: 50,
    prop2: "Nothing",
    prop3: "hello",
    prop4: "What's up",
  },
  {
    prop1: 88,
    prop2: "Whatever",
    prop3: "world",
    prop4: "You get it",
  },
]

创建一个或多个对象的子集可以通过这种方式解构对象来实现。

const sections = aListOfObjects.map(({prop1, prop2}) => ({prop1, prop2}));

这适用于我在Chrome控制台。有什么问题吗?

var { color, height } = elmo
var subelmo = { color, height }
console.log(subelmo) // {color: "red", height: "unknown"}

两种Array.prototype.reduce:

const selectable = {a: null, b: null};
const v = {a: true, b: 'yes', c: 4};

const r = Object.keys(selectable).reduce((a, b) => {
  return (a[b] = v[b]), a;
}, {});

console.log(r);

这个答案使用了神奇的逗号运算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

如果你想要更花哨,这个更紧凑:

const r = Object.keys(selectable).reduce((a, b) => (a[b] = v[b], a), {});

把所有这些放到一个可重用的函数中:

const getSelectable = function (selectable, original) {
  return Object.keys(selectable).reduce((a, b) => (a[b] = original[b], a), {})
};

const r = getSelectable(selectable, v);
console.log(r);