असाइनमेंट के बाईं ओर जावास्क्रिप्ट ऑब्जेक्ट ब्रैकेट नोटेशन ({नेविगेशन} =)

Question

मैंने पहले इस वाक्यविन्यास को नहीं देखा है और सोच रहा हूं कि यह सब क्या है।

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

बाईं ओर के कोष्ठक एक सिंटैक्स त्रुटि फेंक रहे हैं:

अप्रत्याशित टोकन {

मुझे यकीन नहीं है कि वेबपैक कॉन्फिगरेशन का कौन सा हिस्सा बदल रहा है या सिंटैक्स का उद्देश्य क्या है। क्या यह सद्भाव वाली बात है? क्या कोई मुझे बता सकता है?

Comments

अपने में webpack.config.jsआप शायद है jsx-loaderसाथ harmonyध्वज सक्षम

— पाओलो मोरेटी

Answer 1

इसे विनाशकारी असाइनमेंट कहा जाता है और यह ES2015 मानक का हिस्सा है ।

विनाशकारी असाइनमेंट सिंटैक्स एक जावास्क्रिप्ट अभिव्यक्ति है जो एरेक्स और ऑब्जेक्ट्स से डेटा निकालने के लिए एक सिंटैक्स का उपयोग करना संभव बनाता है जो सरणी और ऑब्जेक्ट शाब्दिक के निर्माण को प्रतिबिंबित करता है।

स्रोत: एमडीएन पर विनाशकारी असाइनमेंट संदर्भ

वस्तु विनाशकारी

 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;

Comments

धन्यवाद। मैं इसे स्वीकार करने जा रहा हूं और एक और सवाल उठाऊंगा। अब जब मुझे पता है कि मुझे क्या वाक्यविन्यास करना है तो यह पता लगाना होगा कि यह अभी भी मेरी परियोजना में संकलित नहीं है।

— कप्तानी

वेबपैक एस्प्रिमा का उपयोग करता है और एस्प्रिमा 2.0 प्रकाशित होने पर es6 के लिए समर्थन करेगा । तब तक आप es6-loader में से किसी एक का उपयोग कर सकते हैं जो इसे es5 के लिए संकलित करता है: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shamn/es6-loader

— जोहान्स एवलड

मैंने इस समाधान को अस्वीकार कर दिया क्योंकि यह दिए गए उदाहरण को संबोधित करने में विफल रहा जो समाधान में नहीं दिखाया गया है। पहला उदाहरण एक वस्तु शाब्दिक विनाशकारी होने को दर्शाता है। दूसरा एक सरणी को नष्ट होने को दर्शाता है। लेकिन जिस उदाहरण पर सवाल उठाया जा रहा है वह यह है: var {नेविगेशन} = आवश्यकता ('प्रतिक्रिया-राउटर'); इसके अलावा, उन्होंने जो उदाहरण दिया, उसमें ब्रेसिज़ अनावश्यक हैं।

— AndroidDev

@AndroidDev एक संपादन का सुझाव देने के लिए आपका स्वागत है; ओपी निश्चित रूप से उत्तर को संतोषजनक लगता था।

— मैट बॉल

किसी भी विचार क्यों [पुनः] नामकरण "पीछे" है? यह है, या var {newVarName: oldVarName} = varSource;जैसा दिखता है , लेकिन वे स्पष्ट रूप से गलत हैं। क्या पुराने / मौजूदा नामों के बाईं ओर होने का कोई व्यावहारिक कारण है ? { newVarName: varSource.oldVarName }scope.newVarName = varSource.oldVarName;:

— रफिन

Answer 2

यह विनाशकारी कार्य है । यह ECMAScript 2015 की एक नई विशेषता है।

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

के बराबर है:

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

Answer 3

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

... के रूप में एक ही चीज़ को प्राप्त करने के लिए विनाशकारी उपयोग करता है ...

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

... लेकिन कहीं अधिक पठनीय है।

Comments

यह सीधे पूछे गए प्रश्न का उत्तर देता है और इसलिए पहले पढ़ने का सबसे अच्छा उत्तर है, जबकि पहले के कुछ उत्तर अधिक गहराई में जाते हैं।

— मालोरी-एरिक

अधिक संक्षिप्त ... हाँ। अधिक पठनीय - वास्तव में नहीं। उत्तरार्द्ध उदाहरण अधिक मौलिक निर्माणों का उपयोग करके अधिक स्पष्ट है, इसके लिए अधिक पठनीय है - लेकिन एक विशेषज्ञ के लिए, पूर्व अधिक कुशल है।

— ब्रायन

Answer 4

यह वस्तुओं को नष्ट करने के लिए 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;