Question

这里有一些解构：

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

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

Answer 1

这个ES6解构语法与用于定义具有可变属性名称的对象的新“增强对象文字”非常相似，所以我认为首先看到它是有用的：

Pre-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"

Answer 2

[a]是computed property name

...允许你将一个表达式放在方括号[]中，即可计算并用作属性名称

{ [a]: b }是使用计算属性名称destructuring assignment的assigning to new variable names

可以从对象解压缩属性并将其分配给变量使用与对象属性不同的名称

因此，您最终在当前范围内拥有一个变量b，其中包含this.props[a]

的值

示例

＆＃13;
＆＃13;
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
＆＃13;
＆＃13;
＆＃13;

Answer 3

一个例子

var props = {'dynamic': 2}
var dyn = 'dynamic'
const {[dyn]:a} = props
console.log(a);
// logs 2

查看此页面：https://gist.github.com/mikaelbr/9900818

简而言之，如果dyn是一个字符串，并且props有一个属性，该字符串作为名称，可由props[dyn]访问，那么{[dyn]:a} = props将分配{{ 1}}到props[dyn]

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

3 个答案: