如何在ES6中将结构化为动态命名的变量？

Question

我们假设我有以下对象:

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

而我只想要id和fullName.

我会做以下事情:

const { id, fullName } = user

轻松,对吧？

现在让我们假设我想根据另一个变量的值来进行解构fields.

const fields = [ 'id', 'fullName' ]

现在我的问题是:我如何根据一系列密钥进行解构？

我无耻地尝试了以下但没有成功:

let {[{...fields}]} = user和let {[...fields]} = user.有什么办法可以做到这一点吗？

谢谢

Answer 1

使用动态密钥进行结构化并非不可能.为了防止创建动态变量的问题(如Ginden所提到的),您需要提供别名.

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

const fields = [ 'id', 'fullName' ];
const object = {};

const {[fields[0]]: id, [fields[1]]: fullName} = user;

console.log(id); // 42
console.log(fullName); // { firstName: "John", lastName: "Doe" }

要解决必须为动态值定义静态别名的问题,可以分配给对象的动态属性.在这个简单的例子中,这与恢复整个解构相同,但:)

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

const fields = [ 'id', 'fullName' ];
const object = {};

({[fields[0]]: object[fields[0]], [fields[1]]: object[fields[1]]} = user);

console.log(object.id); // 42
console.log(object.fullName); // { firstName: "John", lastName: "Doe" }

来源:

• https://twitter.com/ydkjs/status/699845396084846592

• https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#not-just-declarations

Answer 2

如前所述，不使用 eval 就无法在 JavaScript 中分解为动态命名的变量。

但是您可以使用 reduce 函数动态获取对象的子集，如下所示：

const destruct = (obj, ...keys) => 
  keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const object = { 
  color: 'red',
  size: 'big',
  amount: 10,
};

const subset1 = destruct(object, 'color');
const subset2 = destruct(object, 'color', 'amount', 'size');
console.log(subset1);
console.log(subset2);

Answer 3

Paul Kögel 的回答很好，但我想举一个更简单的例子，说明当您只需要动态字段的值但不需要将其分配给动态键时。

let obj = {x: 3, y: 6};
let dynamicField = 'x';

let {[dynamicField]: value} = obj;

console.log(value);

Answer 4

简短的回答：这是不可能的，而且不可能。

其背后的原因：它将在块范围内引入新的动态命名变量，实际上是动态的eval，从而禁用任何性能优化。eval可以动态修改范围的动态始终被视为极其危险，因此已从ES5严格模式中删除。

而且，这将是代码的味道-引用未定义的变量throws ReferenceError，因此您将需要更多样板代码来安全地处理这种动态范围。

Answer 5

如果不知道键的名称或使用命名变量的别名，则无法进行破坏

// you know the name of the keys
const { id, fullName } = user;

// use an alias for named variables
const { [fields[0]]: id, [fields[1]]: fullName } = user; 

解决方案是使用Array.reduce()动态键创建一个对象，如下所示：

// you know the name of the keys
const { id, fullName } = user;

// use an alias for named variables
const { [fields[0]]: id, [fields[1]]: fullName } = user;