blocks|key|2720796|text|它被称为destructuring+assignment，是ES2015+standard的一部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2720797|2720798|解构赋值语法是一种JavaScript表达式，它可以使用与数组和对象文字的构造类似的语法从数组或对象中提取数据。|blockquote|2720799|2720800|来源：|2720801|2720802|对象解构|2720803|+var+o+=+{p:+42,+q:+true};
+var+{p,+q}+=+o;

+console.log(p);+//+42
+console.log(q);+//+true+

+//+Assign+new+variable+names
+var+{p:+foo,+q:+bar}+=+o;

+console.log(foo);+//+42
+console.log(bar);+//+true|code-block|syntax|javascript|2720804|数组解构|2720805|var+foo+=+["one",+"two",+"three"];

//+without+destructuring
var+one+++=+foo[0];
var+two+++=+foo[1];
var+three+=+foo[2];

//+with+destructuring
var+[one,+two,+three]+=+foo;|2720806|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment|1|http://www.ecma-international.org/ecma-262/6.0/^0|4|O|0|U|F|1|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1E|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|1G|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1J|8|@]|9|@]|C|$Q|R]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|C|$]]|$1|U|3|V|5|P|7|1L|8|@]|9|@]|C|$Q|R]]|$1|W|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]]]

It's called <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> and it's part of the <a href="http://www.ecma-international.org/ecma-262/6.0/">ES2015 standard</a>.

<blockquote>
 The destructuring assignment syntax is a JavaScript expression that
 makes it possible to extract data from arrays or objects using a
 syntax that mirrors the construction of array and object literals.
 
 Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment reference on MDN</a>
</blockquote>

<h1>Object destructuring</h1>

<pre><code> var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true
</code></pre>

<h1>Array destructuring</h1>

<pre><code>var foo = ["one", "two", "three"];

// without destructuring
var one = foo[0];
var two = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;
</code></pre>

blocks|key|142958|text|这是destructuring+assignment。这是ECMAScript+2015的一个新特性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|142959|var+{
++AppRegistry,
++StyleSheet,
++Text,
++View,
}+=+React;|code-block|syntax|javascript|142960|等同于：|142961|var+AppRegistry+=+React.AppRegistry;
var+StyleSheet+=+React.StyleSheet;
var+Text+=+React.Text;
var+View+=+React.View;|142962|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment^0|2|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

This is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="noreferrer">destructuring assignment</a>. It's a new feature of ECMAScript 2015.

<pre><code>var {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} = React;
</code></pre>

Is the equivalent to:

<pre><code>var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
</code></pre>

blocks|key|2933210|text|这是ES6中解构对象的新特性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2933211|我们都知道这里有一个赋值操作，这意味着右边的值被赋值给左边的变量。|2933212|var+{+Navigation+}+=+require('react-router');|code-block|syntax|javascript|2933213|在本例中，require('react-router')方法返回一个具有键-值对的对象，如下所示：|offset|length|style|CODE|2933214|{+Navigation:+function+a(){},+
Example1:+function+b(){},
+Example2:+function+c(){}
}|2933215|如果我们想要在返回的对象中使用一个键，比如Navigation到一个变量，我们可以使用Object+destructuring。|2933216|只有当我们手中有密钥时，这才是可能的。|2933217|因此，在赋值语句之后，局部变量Navigation将包含function+a(){}|2933218|另一个示例如下所示。|2933219|var+{+p,+q+}+=+{+p:+1,+q:2,+r:3,+s:4+};
console.log(p)+//1;
console.log(q)+//2;|2933220|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment^0|0|0|0|5|N|0|0|L|A|17|K|0|0|0|F|A|S|E|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1F|8|@$K|1G|L|1H|M|N]]|9|@$K|1I|L|1J|1|1K]]|A|$]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1M|8|@$K|1N|L|1O|M|N]|$K|1P|L|1Q|M|N]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|10|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

It's a new feature in ES6 to destructure objects.
As we all know that there is an assignment operation taking place here, which means right side value is getting assigned to left side variable.
<pre><code>var { Navigation } = require('react-router');
</code></pre>
In this case <code>require('react-router')</code> method returns an object with key-value pair, something like:
<pre class="lang-none prettyprint-override"><code>{ Navigation: function a(){}, 
Example1: function b(){},
 Example2: function c(){}
}
</code></pre>
And if we would like to take one key in that returned object say <code>Navigation</code> to a variable we can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="nofollow noreferrer">Object destructuring</a> for that.
This will only be possible only if we have the key in hand.
So after the assignment statement, local variable <code>Navigation</code> will contain <code>function a(){}</code>
Another example looks like this.
<pre><code>var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;
</code></pre>

blocks|key|142979|text|var+{+Navigation+}+=+require('react-router');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|142980|..。使用解构来实现与...|unstyled|142981|var+Navigation+=+require('react-router').Navigation;|142982|..。但可读性要强得多。|142983|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>var { Navigation } = require('react-router');
</code></pre>

... uses destructuring to achieve the same thing as ...

<pre><code>var Navigation = require('react-router').Navigation;
</code></pre>

... but is far more readable.

blocks|key|145247|text|而不是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|145248|const+salary+=+personnel.salary
const+sex+=+personnel.sex
const+age+=+personnel.age|code-block|syntax|javascript|145249|简单地说|145250|const+{salary,+age,+sex}+=+personnel|145251|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

instead of
<pre><code>const salary = personnel.salary
const sex = personnel.sex
const age = personnel.age
</code></pre>
simply
<pre><code>const {salary, age, sex} = personnel
</code></pre>

I haven't seen this syntax before and am wondering what it's all about. 

<pre><code>var { Navigation } = require('react-router');
</code></pre>

The brackets on the left are throwing a syntax error:

<blockquote>
 unexpected token {
</blockquote>

I'm not sure what part of the webpack config is transforming or what the purpose of the syntax is. Is it a Harmony thing? Can someone enlighten me?

Javascript object bracket notation ({ Navigation } =) on left side of assign

我以前没有见过这个语法，我想知道它是关于什么的。var { Navigation } = require('react-router');左边的括号抛出一个语法错误：意外令牌{我不确定webpack配置的哪一部分正在转换，或者语法的目的是什么。这是一个和谐的东西吗？有没有人能开导我？

问赋值左侧的Javascript对象方括号符号({ Navigation } =)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问赋值左侧的Javascript对象方括号符号({ Navigation } =)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问赋值左侧的Javascript对象方括号符号({ Navigation } =)
EN