在JSX中用Curly Braces声明Const

Question

我刚刚开始使用React Native并习惯了JSX语法.这就是我在说什么？或者我在谈论TypeScript？或者...... ES6？无论如何...

我见过这个:

const { foo } = this.props;

里面有一个类功能.花括号的目的是什么,使用它们和不使用它们之间的区别是什么？

Answer 1

它是解构分配.

解构赋值语法是一种JavaScript表达式,可以将数组中的值或对象的属性解包为不同的变量.

示例(ES6):

var person = {firstname: 'john', lastname: 'doe'};

const firstname = person.firstname;
const lastname = person.lastname;

// same as this
const { firstname, lastname } = person;

您可以在MDN上找到更多信息

编辑:对于熟悉Python语言的开发人员来说,与Python解包语法进行比较会很有趣.Python2.7:

>>> _tuple = (1, 2, 3)
>>> a, b, c = _tuple
>>> print(a, b, c)
(1, 2, 3)

使用Python3的新功能,如PEP 3132,您还可以执行以下操作:

>>> _range = range(5)
>>> a, *b, c = _range
>>> print(a, b, c)
0 [1, 2, 3] 4

添加了一些示例,因为了解其他语言已经有类似的方法,您可以更快地掌握JS的想法.