할당 왼쪽의 자바 개체 대괄호 표기법 ({Navigation} =)

할당 왼쪽의 자바 개체 대괄호 표기법 ({Navigation} =)

---

나는이 구문을 전에 본 적이 있는지 그것이 무엇에 관한 것인지 궁금합니다.

var { Navigation } = require('react-router');

왼쪽의 괄호는 구문 오류를 발생합니다.

없는 토큰 {

웹팩 구성의 어떤 부분이 변환 또는 구문의 목적이 무엇인지 잘 모르겠습니다. 하모니인가요? 누군가 나를 깨달을 수 있습니까?

---

구조화 할당 이라고 되며 ES2015 표준 의 일부입니다 .

비 구조화 할당 구문은 배열 및 개체 리터럴의 구성을 사용하는 구문을 사용하여 배열 또는 개체에서 데이터를 추출 할 수있게 해주는 JavaScript 식입니다.

출처 : MDN의 구조 분해 할당 참조

응집 분해

 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

배열 분해

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;

---

이것은 구조화 할당 입니다. ECMAScript 2015의 새로운 기능입니다.

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

다음과 달라집니다.

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

---

var { Navigation } = require('react-router');

... 비 구조화를 사용하여 ...

var Navigation = require('react-router').Navigation;

...하지만 더 읽을 수 있습니다.

---

객체를 해체하는 ES6의 새로운 기능입니다.

우리 모두 알고 있는지 여기에서 할당 작업이 발생합니다. 즉, 오른쪽 값이 할당 된 변수에 할당됩니다.

var { Navigation } = require('react-router');

이 경우 require('react-router')메소드는 다음과 같은 키 값 쌍을 가진 객체를 반환합니다.

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

그리고 우리가 반환 된 객체에서 하나 의 키를 가져오고 싶다면 ,는 우리 Navigation그것을 위해 객체가 자폭 을 사용할 수 있습니다 .

이 우리가 열쇠를 가지고있을 때만 가능할 것입니다.

따라서 대 입문 지역 변수 Navigation는function a(){}

또 다른 예는 다음과 가변적입니다.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;

참고 URL : https://stackoverflow.com/questions/26999820/javascript-object-bracket-notation-navigation-on-left-side-of-assign