108

Bu sözdizimini daha önce görmedim ve ne hakkında olduğunu merak ediyorum.

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

Soldaki parantezler bir sözdizimi hatası veriyor:

Beklenmedik belirteç {

Web paketi yapılandırmasının hangi kısmının dönüştüğünden veya sözdiziminin amacının ne olduğundan emin değilim. Harmony şey mi? Biri beni aydınlatabilir mi?

javascript webpack ecmascript-6

— Kaptanill
kaynak

Gözlerinde farklı webpack.config.jsmuhtemelen var jsx-loaderolan harmonybayrak etkin

— Paolo Moretti

112

Buna yıkıcı görev denir ve ES2015 standardının bir parçasıdır .

Yıkıcı atama sözdizimi, dizi ve nesne değişmezlerinin yapısını yansıtan bir sözdizimi kullanarak dizilerden veya nesnelerden veri çıkarmayı mümkün kılan bir JavaScript ifadesidir.

Kaynak: MDN'de tahrip atama referansı

Nesne yok etme

 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

Dizi yıkıcı

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
kaynak

4

Teşekkürler. Bunu kabul edip başka bir soru soracağım. Artık sözdiziminin ne olduğunu bildiğime göre, projemde hala neyi derlemediğini bulmalıyım.

— captainill

Webpack Esprima'yı kullanır ve Esprima 2.0 yayınlandığında es6 desteği alacaktır . O zamana kadar, es5'e derleyen es6-loader'lardan birini kullanabilirsiniz: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shama/es6-loader

— Johannes Ewald

2

Çözümde gösterilmeyen verdiği örneği ele alamadığı için bu çözüme olumsuz oy verdim. İlk örnek, bir nesnenin gerçek anlamda yok edildiğini göstermektedir. İkincisi, yıkılan bir diziyi gösterir. Ancak sorgulanan örnek şudur: var {Navigation} = require ('react-router'); Ayrıca verdiği örnekte korseler gereksizdir.

— AndroidDev

2

@AndroidDev bir düzenleme önerebilirsiniz; OP, cevabı kesinlikle tatmin edici bulmuş görünüyordu.

— Matt Ball

1

[Yeniden] adlandırmanın neden "geriye doğru" olduğuna dair bir fikriniz var mı? Yani, ya da var {newVarName: oldVarName} = varSource;gibi görünüyor , ama bunlar açıkça yanlış. Sayfasının sol tarafında eski / mevcut isimlerin bulunmasının pratik bir nedeni var mı ? { newVarName: varSource.oldVarName }scope.newVarName = varSource.oldVarName;:

— 2017

114

Bu yıkıcı bir görev . ECMAScript 2015'in yeni bir özelliğidir.

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

Eşdeğeri:

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

— Rudolf Manusachi
kaynak

17

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

... aynı şeyi elde etmek için yıkıcı kullanır ...

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

... ama çok daha okunaklı.

— Cliff Hall
kaynak

3

Bu, sorulan soruyu doğrudan yanıtlar ve bu nedenle muhtemelen ilk okunacak en iyi yanıttır, önceki yanıtların bazıları daha derinlere iner.

— Mallory-Erik

3

Daha özlü ... evet. Daha okunaklı - gerçekten değil. İkinci örnek, daha temel yapıları kullanarak daha açıktır, bu nedenle daha okunabilir - ancak bir uzman için, birincisi daha etkilidir.

— Brian

5

Nesneleri yok etmek için ES6'daki yeni bir özellik.

Hepimizin bildiği gibi burada gerçekleşen bir atama işlemi var, bu da sağ taraf değerinin sol taraf değişkenine atanması anlamına geliyor.

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

Bu durumda require('react-router')yöntem, anahtar değer çiftine sahip bir nesne döndürür.

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

Ve döndürülen nesnede bir anahtar almak Navigationistersek, bir değişkene söyleyin , bunun için Nesne yok etmeyi kullanabiliriz.

Bu ancak anahtarın bizde olması durumunda mümkün olacaktır.

Dolayısıyla, atama ifadesinden sonra yerel değişken Navigationşunları içerecektirfunction a(){}

Başka bir örnek buna benzer.

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

— Rajendra Kumar Vankadari
kaynak

Atamanın sol tarafında Javascript nesne parantez gösterimi ({Gezinme} =)

Nesne yok etme

Dizi yıkıcı