javascript - es6 { [a] : b } destructuring mean? 是什么

Question

这里有一些解构:

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

但是，[a]: b 是做什么的:带冒号的方括号是做什么的？在我的例子中，a 作为具有字符串值的 Prop 之一提供。

Answer 1

这种 ES6 解构语法与用于定义具有可变属性名称的对象的新“增强对象文字”非常相似，因此我认为首先了解它很有用:

在 ES6 之前，如果你想给一个属性名可变的对象赋值，你需要这样写

var obj = {};
obj[variable] = value

这是因为虽然点表示法和对象字面量表示法都需要使用实际的属性名称，但 obj[prop] 表示法允许您使用变量名。

ES6 引入了扩展对象字面量语法，which included the ability to write

var obj = { [variable]: value } 

解构中包含相同的语法，这就是您的问题所显示的。

基本的解构允许在给定文字属性名称的情况下分配变量:

首先，分配给一个与对象中已有的属性同名的变量(docs):

var person = {name: "Mary"};
var {name} = person;
/// name = "Mary"

其次，分配一个名称与对象中已有名称不同的变量 (docs):

var person = {name: "Mary"};
var {name: myName} = person;
/// myName = "Mary"

(旁注:如果您认识到，在第一个示例中，var {name} = ... 只是 var {name: name} = 的简写。 ..，你会发现这两个例子在逻辑上更匹配。)

但是，如果您不知道要从 person 那里获得哪个属性怎么办？然后您可以使用上面相同的新计算属性名称对象语法 ( docs ):

var person = {name: "Mary"};
var propName = getPropUserWantToKnowAbout(); // they type in "name"
var {[propName]: value} = person;
/// value = "Mary"