Notasi kurungan segi empat sama untuk objek JavaScript: menggunakan tugasan di sebelah kiri ({ Navigasi } =)

Question

Saya tidak pernah melihat sintaks ini sebelum ini dan ingin mengetahui maksudnya.

var { Navigasi } = memerlukan('react-router');

Tanda kurung kerinting di sebelah kiri

token yang tidak dijangka {

Saya tidak pasti bahagian mana dalam konfigurasi pek web melakukan penukaran atau tujuan sintaks ini. Adakah ini perkara Harmoni? Bolehkah seseorang menjelaskan perkara ini kepada saya?

Answer 1

Ini adalah memusnahkan tugasan. Ia adalah ciri baharu ECMAScript 2015.

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

bersamaan dengan:

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

Answer 2

Ia dipanggil Destructuring Assignment dan merupakan sebahagian daripada ES2015 standard.

Memusnahkan objek

var o = {p: 42, q: true};
 var {p, q} = o;

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

 // 分配新的变量名
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

Pemusnahan susunan

var foo = ["one", "two", "three"];

// 不使用解构
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;