es6 {[a]:b}解构意味着什么？

Question

这里有一些解构:

const { [a]: b } = this.props

但是,做了[a]: b什么:带冒号的括号是做什么的？在我的情况下,a作为一个带有字符串值的道具提供.

Answer 1

[a]是计算属性名称

...允许您将表达式放在方括号 [] 中，该表达式将被计算并用作属性名称

{ [a]: b }是一个解构赋值，使用计算属性名称分配给新变量名称

属性可以从对象中解包并分配给与对象属性名称不同的变量

因此，您最终会b在当前作用域中得到一个包含以下值的变量this.props[a]

例子

this.props = {foo : 1, bar: 2};

let p1 = 'foo';
let p2 = 'bar';

let { [p1]: b } = this.props;

console.log(b); // 1

let { [p2]: c } = this.props;

console.log(c); // 2