在JSX中用花括号声明const

问题描述

我刚刚开始使用React Native并习惯了JSX语法.这就是我在说的吗?还是我在谈论TypeScript?还是... ES6?反正...

I'm just getting started with React Native and getting used to JSX syntax. Is that what I'm talking about? Or am I talking about TypeScript? Or... ES6? Anyway...

我已经看到了:

const { foo } = this.props;

在类函数中.花括号的目的是什么?使用和不使用花括号有什么区别?

Inside a class function. What is the purpose of the curly braces and what's the difference between using them and not using them?

推荐答案

它是解构分配

示例(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:

also for developers familiar with Python language it can be interesting to compare with Python unpacking syntax.Python2.7:

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

借助Python3的新功能，例如 PEP 3132 ，您还可以以下:

With new feature of Python3, like PEP 3132 you can also do following:

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

添加了示例，因为从其他语言了解已经很相似的方法，您可以更快地掌握JS的想法.

Examples are added, because knowing already similar approach from other languages you can grasp JS idea more quicker.

这篇关于在JSX中用花括号声明const的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！