Notasi braket objek Javascript ({Navigation} =) di sisi kiri assign

108

Saya belum pernah melihat sintaks ini sebelumnya dan saya bertanya-tanya tentang apa itu semua. 

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

Tanda kurung di sebelah kiri menampilkan kesalahan sintaks:

token tak terduga {

Saya tidak yakin bagian mana dari konfigurasi webpack yang berubah atau apa tujuan sintaksnya. Apakah itu hal Harmoni? Bisakah seseorang mencerahkan saya?

javascript webpack ecmascript-6 captainill
sumber
Dalam Anda webpack.config.jsAnda mungkin memiliki jsx-loaderdengan harmonybendera diaktifkan
Paolo Moretti

Jawaban:

112

Ini disebut tugas penghancuran dan itu bagian dari standar ES2015 .

Sintaks tugas penghancuran adalah ekspresi JavaScript yang memungkinkan untuk mengekstrak data dari larik atau objek menggunakan sintaks yang mencerminkan konstruksi larik dan literal objek.

Sumber: Referensi tugas penghancuran di MDN

Perusakan objek

 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

Array destructuring

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;
Matt Ball
sumber
4
Terima kasih. Saya akan menerima ini dan mengajukan pertanyaan lain. Sekarang saya tahu apa sintaksnya, saya harus mencari tahu apa yang masih belum dikompilasi dalam proyek saya.
kaptenill
Webpack menggunakan Esprima dan akan memiliki dukungan untuk es6 saat Esprima 2.0 diterbitkan . Sampai saat itu Anda dapat menggunakan salah satu es6-loader yang mengkompilasinya menjadi es5: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shama/es6-loader
Johannes Ewald
2
Saya menurunkan suara solusi ini karena gagal menangani contoh yang dia berikan yang tidak ditampilkan dalam solusi. Contoh pertama menunjukkan literal objek yang sedang dirusak. Yang kedua menunjukkan array sedang dirusak. Tetapi contoh yang dipertanyakan adalah ini: var {Navigation} = require ('react-router'); Lebih lanjut, dalam contoh yang dia berikan, kawat gigi tidak diperlukan.
AndroidDev
2
@AndroidDev, Anda dipersilakan untuk menyarankan pengeditan; OP pasti menemukan jawaban yang memuaskan.
Matt Ball
1
Adakah yang tahu mengapa penamaan [ulang] itu "mundur"? Artinya, var {newVarName: oldVarName} = varSource;terlihat sangat mirip { newVarName: varSource.oldVarName }atau scope.newVarName = varSource.oldVarName;, tetapi itu jelas salah. Apakah ada alasan praktis untuk memiliki nama lama / yang sudah ada di sebelah kiri :?
ruffin
114

Ini adalah tugas yang merusak . Ini adalah fitur baru ECMAScript 2015.

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

Apakah setara dengan:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
Rudolf Manusachi
sumber
17 
var { Navigation } = require('react-router');

... menggunakan perusakan untuk mencapai hal yang sama seperti ...

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

... tetapi jauh lebih mudah dibaca.

Cliff Hall
sumber
3
Ini secara langsung menjawab pertanyaan seperti yang ditanyakan dan mungkin merupakan jawaban terbaik untuk dibaca terlebih dahulu, sementara beberapa jawaban sebelumnya masuk lebih dalam.
Mallory-Erik
3
Lebih ringkas ... ya. Lebih mudah dibaca - tidak juga. Contoh terakhir lebih eksplisit menggunakan konstruksi yang lebih mendasar, oleh karena itu lebih mudah dibaca - tetapi bagi seorang ahli, yang pertama lebih efisien.
Brian
5

Ini adalah fitur baru di ES6 untuk merusak objek.

Seperti yang kita semua tahu bahwa ada operasi penugasan yang terjadi di sini, Yang berarti nilai sisi kanan ditugaskan ke variabel sisi kiri.

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

Dalam kasus ini require('react-router')metode mengembalikan objek dengan pasangan nilai kunci beberapa hal seperti

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

Dan jika kita ingin mengambil satu kunci di objek yang dikembalikan, katakan Navigation ke variabel, kita bisa menggunakan Object destructing untuk itu.

Ini hanya akan mungkin hanya jika kita memiliki pegangan kunci.

Jadi, setelah pernyataan penugasan, variabel lokal Navigationakan berisifunction a(){}

Contoh lain terlihat seperti ini.

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