react-jsx – 在JSX中使用Curly Braces声明Const

发布时间：2020-12-15 20:50:24 所属栏目：百科来源：网络整理

导读：我刚刚开始使用React Native并习惯了JSX语法.这就是我在说什么？或者我在谈论TypeScript？或者…… ES6？无论如何… 我见过这个： const { foo } = this.props; 里面有一个类功能.花括号的目的是什么,使用它们和不使用它们之间的区别是什么？这是 destructu

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

我见过这个：

const { foo } = this.props;

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

这是 destructuring assignment.

The destructuring assignment syntax is a JavaScript expression that
makes it possible to unpack values from arrays,or properties from
objects,into distinct variables.

示例(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,c)
(1,3)

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!