Question

由于其松散的语法，我对javascript非常弱，但是特殊字符含义非常严厉。

在react-native-navigation tutorial中有这个代码段

static navigationOptions = ({ navigation }) => {
   const {state, setParams} = navigation;
   const isInfo = state.params.mode === 'info';
   const {user} = state.params;
   return {
     title: isInfo ? `${user}'s Contact Info` : `Chat with 
 ${state.params.user}`,
     headerRight: (
       <Button
         title={isInfo ? 'Done' : `${user}'s info`}
         onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
       />
     ),
   };
 };

最初，我错误地输入第三行： const {isInfo} = state.params.mode === 'info';

我的代码不起作用。

有什么区别： const isInfo = state.params.mode === 'info';

从下一行开始，有大括号{user}

这对我来说非常混乱，但这种小事对于Google来说是非常困难的，所以抱歉并提前感谢！

Answer 1

像你提到的基本上花括号是javascript中的对象。

所以在javascript中制作这样的东西

const user = {
    name: 'bob',
    age: 23,
};

创建一个可以使用的用户对象：user.name将返回bob。

使用ES6，您可以从其他对象制作对象。

const {user} = state.params;
//user will be state.params.user

以上基本上是将对象user中的属性state.params拉入新变量。他们真正做的就是做到这一点，所以你不必每次都写state.params.user，而是可以写user。

使用上述技术还可以做一些其他很酷的事情。您可以将数组和对象“合并”到新的常量中，这非常酷。

const test = {
    ...user,
    anotherProperty: 'value',
};

使用react和redux（如果你正在使用它）你会看到很多这样的：Object.assign({}, state, {});用于创建一个新对象，其中先前属性被新状态覆盖（因为redux需要一个新对象）。这与使用{...state, ...newState}相同。

请有人提醒我这个...Object方法叫什么？

这一行const isInfo = state.params.mode === 'info';是宣布布尔的简写。根据{{1}}。

，isInfo将为真或假

将上述内容翻译成C ++

state.params.mode === 'info'

我不记得C ++中是否存在与JavaScript类似的Object数组，将JavaScript中的对象视为具有已定义键的数组。这样，上面的if (state.params.mode === 'info') { bool isInfo = true; else { bool isInfo = false; }就像是键的'覆盖'。所以

{...state, ...newState}

我认为是这样的吗？

Answer 2

在ES6中，您可以将对象解构为不同的变量。您可以阅读更多相关信息here

解构赋值语法是一个JavaScript表达式可以从数组或属性中解压缩值对象，变成不同的变量。

Answer 3

这是ES6语法，表达式const {user} = state.params;等于const user = state.params.user;，const {isInfo} = state.params.mode === 'info';将导致{isInfo: undefined}。有关详细信息，请参阅here。

javascript：变量名之间的大括号的含义

3 个答案: