কার্যভারের বাম দিকে জাভাস্ক্রিপ্ট অবজেক্ট বন্ধনীর চিহ্ন ({নেভিগেশন} =)

Question

আমি এই সিনট্যাক্সটি আগে দেখিনি এবং আমি কী ভাবছি তা নিয়ে ভাবছি।

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

বামে বন্ধনীগুলি একটি সিনট্যাক্স ত্রুটি নিক্ষেপ করছে:

অপ্রত্যাশিত প্রতীক {

আমি নিশ্চিত নই যে ওয়েবপ্যাক কনফিগারেশনের কোন অংশটি রূপান্তর করছে বা সিনট্যাক্সের উদ্দেশ্য কী। এটা কি সম্প্রীতি জিনিস? কেউ কি আমাকে আলোকিত করতে পারে?

Comments

আপনার webpack.config.jsআপনি সম্ভবত আছে jsx-loaderসঙ্গে harmonyপতাকা সক্ষম

— পাওলো Moretti

Answer 1

একে ডেস্ট্রাকচারিং অ্যাসাইনমেন্ট বলা হয় এবং এটি ES2015 স্ট্যান্ডার্ডের অংশ ।

ডেস্ট্রাকচারিং অ্যাসাইনমেন্ট সিনট্যাক্স হ'ল একটি জাভাস্ক্রিপ্ট এক্সপ্রেশন যা অ্যারে এবং অবজেক্ট ল্যাটারালগুলির নির্মাণের আয়না তৈরি করে এমন একটি সিনট্যাক্স ব্যবহার করে অ্যারে বা অবজেক্ট থেকে ডেটা বের করা সম্ভব করে।

উত্স: MDN- এ কার্যনির্বাহী রেফারেন্স Dest

অবজেক্ট ডেস্ট্রাকচারিং

 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

ধন্যবাদ। আমি এটি গ্রহণ করতে যাচ্ছি এবং অন্য একটি প্রশ্ন উত্থাপন করছি। এখন আমি জানি যে সিনট্যাক্সটি কী তা আমার প্রকল্পে এটি এখনও সংকলন করছে না তা খুঁজে বের করতে হবে।

— অধিনায়ক

ওয়েবপ্যাক এসক্রিমা ব্যবহার করে এবং এসপ্রিমা ২.০ প্রকাশিত হওয়ার সাথে এসএস for এর জন্য সমর্থন থাকবে । ততক্ষণে আপনি এস -6-লোডারগুলির মধ্যে একটি ব্যবহার করতে পারেন যা এটিকে এস 5 এ সংকলন করে: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shama/es6-loader

— জোহানেস

আমি এই সমাধানটিকে অগ্রাহ্য করেছিলাম কারণ তিনি যে উদাহরণ দিয়েছিলেন তা সমাধান করতে ব্যর্থ হয়েছে যা সমাধানে প্রদর্শিত হয়নি। প্রথম উদাহরণটিতে দেখা যায় যে কোনও বস্তু আক্ষরিকভাবে নির্মিত হচ্ছে। দ্বিতীয়টি দেখায় যে একটি অ্যারে ধ্বংস করা হচ্ছে। তবে যে প্রশ্নটি করা হচ্ছে তা হ'ল: var {নেভিগেশন} = প্রয়োজন ('রিএ্যাক্ট-রাউটার'); তদুপরি, তিনি যে উদাহরণ দিয়েছিলেন, বন্ধনীগুলি অপ্রয়োজনীয়।

— অ্যান্ড্রয়েড ডেভ

@ অ্যান্ড্রয়েড ডেভ আপনি একটি সম্পাদনার পরামর্শ দিতে স্বাগত জানাই; ওপি অবশ্যই উত্তরটি সন্তোষজনক বলে মনে করেছে।

— ম্যাট বল

কোনও ধারণা কেন [পুনরায়] নামকরণটি "পিছনের দিকে"? এটি হ'ল 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

এটি সরাসরি জিজ্ঞাসিত প্রশ্নের উত্তর দেয় এবং তাই সম্ভবত প্রথমে পড়ার সর্বোত্তম উত্তর, তবে পূর্ববর্তী কয়েকটি উত্তর আরও গভীরতায় যায়।

— ম্যালরি-এরিক

আরও সংক্ষিপ্ত ... হ্যাঁ আরও পাঠযোগ্য - সত্যই নয় not পরবর্তী উদাহরণটি আরও বেশি মৌলিক নির্মাণ ব্যবহার করে আরও স্পষ্ট, তত বেশি পাঠযোগ্য - তবে একটি বিশেষজ্ঞের জন্য, প্রাক্তনটি আরও দক্ষ।

— ব্রায়ান

Answer 4

এটি ES6 এর নতুন বৈশিষ্ট্যগুলি অবজেক্ট অব ডেস্ট্রাকচার করার জন্য।

যেহেতু আমরা সবাই জানি যে এখানে একটি অ্যাসাইনমেন্ট অপারেশন চলছে, যার অর্থ ডান পাশের মানটি বাম পাশের ভেরিয়েবলকে বরাদ্দ করা হচ্ছে।

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

এই ক্ষেত্রে require('react-router')পদ্ধতিটি কী মান জোড় দিয়ে কোনও জিনিসকে কিছু দেয় object

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

এবং আমরা যে ফিরে বস্তুর বলে এক চাবি গ্রহণ করতে চাই যদি Navigationএকটি পরিবর্তনশীল আমরা ব্যবহার করতে অবজেক্ট destructing যে জন্য।

এটি কেবলমাত্র তখনই সম্ভব যখন আমাদের কাছে কী কী অন্তর্ভুক্ত থাকবে।

সুতরাং, অ্যাসাইনমেন্ট স্টেটমেন্ট পরে, স্থানীয় ভেরিয়েবল Navigationথাকবেfunction a(){}

আর একটি উদাহরণ এরকম দেখাচ্ছে।

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