如何理解这种语法？ var {...} = React; [重复]

This question already has an answer here:

这个问题在这里已有答案：

What does curly brackets in the `var { … } = …` statements do? 3 answers
`var {...} = ...`语句中的花括号是做什么的？ 3个答案

in react native example: https://github.com/facebook/react-native

反应本机示例：https：//github.com/facebook/react-native

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

what is this syntax mean?

这个语法是什么意思？

var { ScrollView, TouchableHighlight, Text } = React;

I typed it in nodejs console cause syntax error. Is this special Javascripts syntax only for React Native?

我在nodejs控制台中键入它会导致语法错误。这种特殊的Javascripts语法仅适用于React Native吗？

Thanks

谢谢

2 个解决方案

#1

That is Destructuring, an ECMAScript 6 feature. As far as I know it is not included in any version of node.js or iojs yet, but there may be a command line flag you can use to enable it.

这就是Destruct，一个ECMAScript 6功能。据我所知，它还没有包含在任何版本的node.js或iojs中，但可能有一个命令行标志可用于启用它。

#2

This document describes the JavaScript environment which is supported by React Native.

本文档描述了React Native支持的JavaScript环境。

ES5

ES5

Reserved Words: promise.catch(function() { });

保留字：promise.catch（function（）{}）;

ES6

ES6

Arrow function: <C onPress={() => this.setState({pressed: true})}

箭头功能： this.setState（{pressed：true}）}

Call spread: Math.max(...array);

呼叫传播：Math.max（...数组）;

Class: class C extends React.Component { render() { return <View />; } }

类：C类扩展React.Component {render（）{return ; }}

Destructuring: var {isActive, style} = this.props;

解构：var {isActive，style} = this.props;

Iteration: for (var element of array) { }

迭代：for（数组的var元素）{}

Computed Properties: var key = 'abc'; var obj = {[key]: 10};

计算属性：var key ='abc'; var obj = {[key]：10};

Object Consise Method: var obj = { method() { return 10; } };

对象构成方法：var obj = {method（）{return 10; }};

Object Short Notation: var name = 'vjeux'; var obj = { name };

对象短符号：var name ='vjeux'; var obj = {name};

Rest Params: function(type, ...args) { }

Rest Params：function（type，... args）{}

Template: var who = 'world'; var str = `Hello ${who};`

模板：var who ='world'; var str =`Hello $ {who};`

ES7

ES7

Object Spread: var extended = { ...obj, a: 10 };

对象传播：var extended = {... obj，a：10};

Function Trailing Comma: function f(a, b, c,) { }

函数尾随逗号：函数f（a，b，c，）{}

#1