रिएक्ट में ये तीन डॉट्स क्या करते हैं?

Question

क्या है ...इस में क्या प्रतिक्रिया (का उपयोग कर JSX) कोड और क्या कहा जाता है?

<Modal {...this.props} title='Modal heading' animation={false}>

Comments

थेरेस एक सरल और समझ में आने वाली बात है, जो कि प्रसार सिंटैक्स पर उपलब्ध है - codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

— गौतम

नोट: ...ऑपरेटर अलग-अलग संदर्भों में अलग-अलग व्यवहार करता है। इस संदर्भ में, यह @ टीजे क्राउडर द्वारा नीचे वर्णित "स्प्रेड" ऑपरेटर है। एक अलग संदर्भ में यह @Tomas Nikodym द्वारा नीचे वर्णित "आराम" ऑपरेटर भी हो सकता है।

— डबलएजैक

Answer 1

वह संपत्ति फैलाव है । इसे ES2018 में जोड़ा गया था (सरणियों / पुनरावृत्तियों के लिए प्रसार पहले, ES2015 था), लेकिन इसे ट्रांसप्लिकेशन ("JSX प्रसार विशेषताओं " के रूप में लंबे समय तक रिएक्ट परियोजनाओं में समर्थित किया गया है, भले ही आप इसे कहीं और भी कर सकते हैं, केवल विशेषताएँ नहीं )।

{...this.props} आपके द्वारा बनाए जा रहे तत्व propsपर असतत गुणों के रूप में "अपने" असंख्य गुणों को फैलाता हैModal । उदाहरण के लिए, यदि this.propsनिहित है a: 1और b: 2, तब

<Modal {...this.props} title='Modal heading' animation={false}>

जैसा होगा वैसा ही होगा

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

लेकिन यह गतिशील है, इसलिए जो भी "स्वयं" गुण propsशामिल हैं।

चूंकि children"खुद की" संपत्ति है props, इसलिए इसमें प्रसार शामिल होगा। इसलिए यदि घटक जहां यह प्रतीत होता है कि इसमें बाल तत्व हैं, तो उन्हें पास कर दिया जाएगा Modal। ओपनिंग टैग के बीच बाल तत्वों को डालना और टैग बंद करने के लिए childrenप्रॉपर्टी शुगर - अच्छी किस्म है । उदाहरण:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

स्प्रेड नोटेशन केवल उस उपयोग के मामले के लिए ही उपयोगी नहीं है, बल्कि किसी मौजूदा ऑब्जेक्ट के गुणों के अधिकांश (या सभी) के साथ एक नई वस्तु बनाने के लिए - जो राज्य को अपडेट करते समय बहुत कुछ सामने आता है, क्योंकि आप राज्य को संशोधित नहीं कर सकते हैं सीधे:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

यह this.state.fooसंपत्ति के fooअलावा सभी समान गुणों के साथ एक नई वस्तु के साथ बदलता है a, जो बन जाता है "updated":

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Comments

क्या उद्घाटन और समापन टैग के बीच एक बाल तत्व डालना संपत्ति को ओवरराइड करता childrenहै या वे संयुक्त होते हैं?

— anddero

@anddero - यह एक बहुत ही दिलचस्प सवाल है। जहाँ तक मैं देख सकता हूँ, यह [के प्रलेखन द्वारा कवर नहीं है children। प्रयोग मुझे बताता है कि आप जिन बच्चों को एक विशेषता के माध्यम से प्रदान करते childrenहैं, वे आपके द्वारा शुरू और अंतिम टैग के बीच निर्दिष्ट होते हैं, लेकिन यदि यह अपरिभाषित व्यवहार है, तो मुझे यकीन है कि इस पर भरोसा नहीं करना चाहिए।

— टीजे क्राउडर

Answer 2

जैसा कि आप जानते ...हैं कि स्प्रेड एट्रिब्यूशन कहा जाता है, जो नाम का प्रतिनिधित्व करता है यह एक अभिव्यक्ति का विस्तार करने की अनुमति देता है।

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

और इस मामले में (मैं इसे सरल बनाने वाला हूँ)।

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

इस:

<Modal {...person} title='Modal heading' animation={false} />

के बराबर है

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

तो संक्षेप में, यह एक साफ शॉर्ट-कट है, हम कह सकते हैं ।

Answer 3

तीन बिंदु ES6 में स्प्रेड ऑपरेटर का प्रतिनिधित्व करते हैं । यह हमें जावास्क्रिप्ट में कुछ चीजें करने की अनुमति देता है:

1. कॉन्टेनेट करें सरणियाँ

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
   var games = [...shooterGames, ...racingGames];
   
   console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

2. एक सरणी को नष्ट करना

     var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
     var [first, ...remaining] = shooterGames;
     console.log(first); //Call of Duty
     console.log(remaining); //['Far Cry', 'Resident Evil']

3. दो वस्तुओं का मेल

   var myCrush = {
     firstname: 'Selena',
     middlename: 'Marie'
   };
   
   var lastname = 'my last name';
   
   var myWife = {
     ...myCrush,
     lastname
   }
   
   console.log(myWife); // {firstname: 'Selena',
                        //   middlename: 'Marie',
                        //   lastname: 'my last name'}

तीन डॉट्स के लिए एक और उपयोग है जिसे रेस्ट पैरामीटर के रूप में जाना जाता है और यह सभी तर्कों को एक सरणी में एक फ़ंक्शन के रूप में लेना संभव बनाता है।

4. सरणी के रूप में फ़ंक्शन तर्क

    function fun1(...params) { 
   
    }  

Comments

यह प्रत्येक उपयोग के मामले के लिए सभी स्पष्ट उदाहरणों के कारण एक शानदार उत्तर है। यह सब लिखने के लिए समय निकालने के लिए धन्यवाद।

— चाड

और अधिक स्पष्टता के लिए उदाहरण से पहले आराम मापदंडों का उल्लेख करें

— ओबीई j

ऊपर देखा, यह वही है जिसकी मैं तलाश कर रहा था

— Csaba

ईमानदारी से यह स्वीकृत उत्तर होना चाहिए। +1

— I_am_learning_now

न केवल सबसे अच्छा जवाब भी सबसे अजीब एक, 'Selana मैरी अपना पहला क्रश: डी'

— Andaç Temel

Answer 4

जावास्क्रिप्ट में तीन डॉट्स फैले हुए हैं / बाकी ऑपरेटर हैं ।

फैला हुआ संचालक

प्रसार वाक्य रचना एक अभिव्यक्ति स्थानों पर जहां कई तर्क उम्मीद कर रहे हैं में विस्तार करने की अनुमति देता है।

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

बाकी पैरामीटर

बाकी पैरामीटर वाक्य रचना तर्कों की चर संख्या के साथ कार्यों के लिए प्रयोग किया जाता है।

function(a, b, ...theArgs) {
  // ...
}

सरणियों के लिए प्रसार / आराम ऑपरेटर ES6 में पेश किया गया था। ऑब्जेक्ट स्प्रेड / रेस्ट प्रॉपर्टीज के लिए स्टेट 2 प्रस्ताव है ।

टाइपस्क्रिप्ट भी प्रसार सिंटैक्स का समर्थन करता है और छोटे मुद्दों के साथ ECMAScript के पुराने संस्करणों में ट्रांसपाइल कर सकता है ।

Comments

स्प्रेड / रेस्ट अब स्टेज 4, समाप्त हो गया है। मैं ES9 में शामिल लगता है / 2018 github.com/tc39/proposal-object-rest-spread/blob/master/...

— SeanMC

Answer 5

यह ES6 की एक विशेषता है, जिसका उपयोग React में भी किया जाता है। नीचे दिए गए उदाहरण को देखें:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

यह तरीका ठीक है अगर हमारे पास अधिकतम 3 पैरामीटर हैं। लेकिन, क्या होगा अगर हमें उदाहरण के लिए 110 मापदंडों को जोड़ना होगा। क्या हमें उन सभी को परिभाषित करना चाहिए और उन्हें एक-एक करके जोड़ना चाहिए?

बेशक ऐसा करने का एक आसान तरीका है, जिसे स्प्रेड कहा जाता है । उन सभी मापदंडों को पारित करने के बजाय जो आप लिखते हैं:

function (...numbers){} 

हमें पता नहीं है कि हमारे पास कितने पैरामीटर हैं, लेकिन हम जानते हैं कि उनमें से ढेर हैं। ES6 के आधार पर, हम उपरोक्त फ़ंक्शन को नीचे के रूप में फिर से लिख सकते हैं और केक के एक टुकड़े के रूप में इसे आसान बनाने के लिए उनके बीच प्रसार और मानचित्रण का उपयोग कर सकते हैं:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45

Answer 6

यह सिर्फ तुम्हारे लिए JSX में एक अलग तरीके से सहारा परिभाषित कर रहा है!

यह ...ES6 में सरणी और ऑब्जेक्ट ऑपरेटर का उपयोग कर रहा है (ऑब्जेक्ट एक पूरी तरह से अभी तक समर्थित नहीं है), इसलिए मूल रूप से यदि आप पहले से ही अपने प्रॉपर को परिभाषित करते हैं, तो आप इसे इस तरह से अपने तत्व को पास कर सकते हैं।

तो आपके मामले में, कोड कुछ इस तरह होना चाहिए:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

इसलिए आपने जो प्रॉपर परिभाषित किया है, अब अलग हो गया है और यदि आवश्यक हो तो पुन: उपयोग किया जा सकता है।

यह बराबर है:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

ये JSX में प्रसार ऑपरेटर के बारे में रिएक्ट टीम के उद्धरण हैं:

JSX स्प्रेड विशेषताएँ यदि आप उन सभी गुणों को जानते हैं जिन्हें आप समय से पहले किसी घटक पर रखना चाहते हैं, तो JSX का उपयोग करना आसान है:

var component = <Component foo={x} bar={y} />;

उत्परिवर्तन
गुण खराब है यदि आप नहीं जानते कि आप कौन से गुण सेट करना चाहते हैं, तो आपको उन्हें बाद में ऑब्जेक्ट पर जोड़ने के लिए लुभाया जा सकता है:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

यह एक एंटी-पैटर्न है क्योंकि इसका मतलब है कि हम बाद में जब तक आप सही प्रोपटीप्स को चेक करने में मदद नहीं कर सकते। इसका मतलब यह है कि आपके प्रोपटीप की त्रुटियां एक क्रिप्टिक स्टैक ट्रेस के साथ समाप्त होती हैं।

प्रॉप्स को अपरिवर्तनीय माना जाना चाहिए। प्रॉप्स ऑब्जेक्ट को कहीं और म्यूट करने से अनपेक्षित परिणाम हो सकते हैं, इसलिए आदर्श रूप से यह इस बिंदु पर एक जमी हुई वस्तु होगी।

स्प्रेड विशेषताएँ
अब आप JSX की एक नई सुविधा का उपयोग कर सकते हैं जिसे स्प्रेड विशेषताएँ कहते हैं:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

ऑब्जेक्ट के गुण जो आप पास करते हैं, घटक के प्रॉपर पर कॉपी किए जाते हैं।

आप इसे कई बार उपयोग कर सकते हैं या इसे अन्य विशेषताओं के साथ जोड़ सकते हैं। विनिर्देश आदेश महत्वपूर्ण है। बाद में विशेषताएँ पिछले वाले को ओवरराइड करती हैं।

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

अजीब के साथ क्या है ... संकेतन?
... ES6 में सरणियों के लिए ऑपरेटर (या प्रसार ऑपरेटर) पहले से ही समर्थित है। ऑब्जेक्ट रेस्ट और स्प्रेड प्रॉपर्टीज के लिए एक ECMAScript प्रस्ताव भी है। हम JSX में क्लीनर सिंटैक्स प्रदान करने के लिए इन समर्थित और विकासशील मानकों का लाभ उठा रहे हैं।

Answer 7

जो लोग पायथन दुनिया से आते हैं, उनके लिए JSX Spread Attributes Unpacking Argument Lists (Python **-operator) के बराबर हैं ।

मुझे पता है कि यह एक जेएसएक्स प्रश्न है, लेकिन एनालॉग्स के साथ काम करना कभी-कभी इसे तेजी से प्राप्त करने में मदद करता है।

Answer 8

...(प्रसार ऑपरेटर) में करने के लिए प्रतिक्रिया प्रयोग किया जाता है:

माता-पिता से बाल घटकों को सहारा देने के लिए एक साफ तरीका प्रदान करें। एक मूल घटक में इन प्रॉप्स को दिए गए उदाहरण के लिए,

this.props = {
  username: "danM",
  email: "[e-mail]"
}

वे बच्चे को निम्नलिखित तरीके से पारित किया जा सकता है,

<ChildComponent {...this.props} />

जो इस के समान है

<ChildComponent username={this.props.username} email={this.props.email} />

लेकिन क्लीनर।

Answer 9

तीन डॉट्स स्प्रेड ऑपरेटर्स या रेस्ट पैरामीटर्स का... प्रतिनिधित्व करते हैं ,

यह एक सरणी अभिव्यक्ति या स्ट्रिंग या जो कुछ भी किया जा सकता है की अनुमति देता है पुनरावृत्ति स्थानों में विस्तार करने की जहां समारोह कॉल या सरणी के लिए तत्वों के लिए शून्य या अधिक बहस की संभावना है।

• दो सरणियों को मिलाएं

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

• प्रतिलिपि बनाई जा रही सरणी:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

नोट: किसी वाक्य की प्रतिलिपि बनाते समय स्प्रेड सिंटैक्स प्रभावी रूप से एक स्तर गहरा हो जाता है। इसलिए, यह बहुआयामी सरणियों को कॉपी करने के लिए अनुपयुक्त हो सकता है क्योंकि निम्न उदाहरण दिखाता है (यह Object.assign () और प्रसार सिंटैक्स के साथ समान है)।

• विशिष्ट सूचकांक में एक सरणी के मूल्यों को दूसरे में जोड़ें जैसे 3:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

• नए के साथ एक निर्माता को बुलाते समय:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• ऑब्जेक्ट लिटरल में फैला:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

ध्यान दें कि fooobj1 की fooसंपत्ति को obj2 संपत्ति द्वारा अधिलेखित कर दिया गया है

• बाकी पैरामीटर सिंटैक्स के रूप में जो हमें एक सरणी के रूप में अनिश्चित संख्या के तर्क का प्रतिनिधित्व करने की अनुमति देता है:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

नोट: स्प्रेड सिंटैक्स (प्रसार गुणों के मामले में अन्य) केवल उपयोग करने योग्य वस्तुओं पर लागू किया जा सकता है: तो निम्नलिखित त्रुटि फेंक देगा

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Reference1

Reference2

Answer 10

कुडोस से ब्रैंडन मोरेली। उन्होंने यहां पूरी तरह से समझाया , लेकिन लिंक मर सकते हैं इसलिए मैं नीचे दी गई सामग्री को चिपका रहा हूं:

प्रसार सिंटैक्स केवल तीन डॉट्स है: ... यह उन स्थानों पर विस्तार करने के लिए एक पुनरावृत्ति की अनुमति देता है जहां 0+ तर्क अपेक्षित हैं। संदर्भ के बिना परिभाषाएँ कठिन हैं। आइए इसका अर्थ समझने में मदद करने के लिए कुछ अलग-अलग उपयोग मामलों का पता लगाएं।

उदाहरण # 1 - Arrays सम्मिलित करना नीचे दिए गए कोड पर एक नज़र डालें। इस कोड में, हम प्रसार सिंटैक्स का उपयोग नहीं करते हैं:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

ऊपर, हमने एक सरणी बनाई है जिसका नाम है mid। हम फिर एक दूसरी सारणी बनाते हैं जिसमें हमारा midसरणी होता है। अंत में, हम परिणाम को लॉग आउट करते हैं। आप क्या arrछापने की उम्मीद करते हैं ? क्या होता है यह देखने के लिए ऊपर क्लिक करें। यहाँ उत्पादन है:

[1, 2, [3, 4], 5, 6]

क्या वह परिणाम जिसकी आपको उम्मीद थी? midसरणी को सरणी में सम्मिलित करके arr, हमने एक सरणी में एक सरणी के साथ समाप्त किया है। अगर यह लक्ष्य था तो ठीक है। लेकिन क्या होगा यदि आप 6 के माध्यम से 1 के मूल्यों के साथ केवल एक सरणी चाहते हैं? इसे पूरा करने के लिए, हम प्रसार सिंटैक्स का उपयोग कर सकते हैं! याद रखें, प्रसार वाक्यविन्यास हमारे सरणी के तत्वों को विस्तारित करने की अनुमति देता है। नीचे दिए गए कोड को देखें। सब कुछ समान है - सिवाय अब हम midसरणी में सरणी को सम्मिलित करने के लिए प्रसार सिंटैक्स का उपयोग कर रहे हैं arr:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

और जब आप रन बटन दबाते हैं, तो यहां परिणाम है:

[1, 2, 3, 4, 5, 6]

बहुत बढ़िया! स्प्रेड सिंटैक्स परिभाषा को याद रखें जो आपने अभी पढ़ा है? यहाँ यह खेलने में आता है। जैसा कि आप देख सकते हैं, जब हम arrएरे बनाते हैं और एरे पर स्प्रेड ऑपरेटर का उपयोग करते हैं mid, तो केवल डालने के बजाय, midएरे का विस्तार होता है। इस विस्तार का अर्थ है कि midसरणी में प्रत्येक तत्व को सरणी में डाला गया है arr। नेस्टेड सरणियों के बजाय, परिणाम 1 से 6 तक की एकल सरणी है।

उदाहरण # 2 - गणित जावास्क्रिप्ट में एक गणितीय वस्तु है जो हमें कुछ मजेदार गणित गणना करने की अनुमति देती है। इस उदाहरण में हम देखेंगे Math.max()। यदि आप अपरिचित हैं, तो Math.max()शून्य या अधिक संख्याओं में सबसे बड़ा रिटर्न देता है। कुछ उदाहरण निम्नलिखित हैं:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

जैसा कि आप देख सकते हैं, यदि आप कई नंबरों का अधिकतम मूल्य ढूंढना चाहते हैं, तो Math.max()कई मापदंडों की आवश्यकता होती है। आप दुर्भाग्य से इनपुट के रूप में एक सरणी का उपयोग नहीं कर सकते। प्रसार सिंटैक्स से पहले, Math.max()सरणी पर उपयोग करने का सबसे आसान तरीका है.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

यह काम करता है, यह वास्तव में कष्टप्रद है। अब एक नज़र डालते हैं कि हम प्रसार सिंटैक्स के साथ वही सटीक काम कैसे करते हैं:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

एक समारोह बनाने और आवेदन पद्धति का उपयोग करने के बजाय परिणाम को वापस करने के लिए Math.max(), हमें केवल दो लाइनों की आवश्यकता है! प्रसार सिंटैक्स हमारे सरणी तत्वों को विस्तारित करता है और हमारे सरणी में प्रत्येक तत्व को व्यक्तिगत रूप से Math.max()विधि में इनपुट करता है!

उदाहरण # 3 - एक ऐरे की प्रतिलिपि बनाएँ , आप केवल पहले से मौजूद एरे के बराबर एक नया वैरिएबल सेट करके किसी सरणी की प्रतिलिपि नहीं बना सकते। निम्नलिखित कोड उदाहरण पर विचार करें:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

जब आप रन दबाते हैं, तो आपको निम्न आउटपुट मिलेगा:

['a', 'b', 'c']

अब, पहली नज़र में, ऐसा लगता है कि यह काम किया है - ऐसा लगता है कि हमने गिरफ्तारी के मूल्यों को arr2 में कॉपी कर लिया है। लेकिन ऐसा नहीं हुआ है। आप देखते हैं, जब जावास्क्रिप्ट में वस्तुओं के साथ काम करना (सरणियाँ एक प्रकार की वस्तु हैं) हम संदर्भ द्वारा निर्दिष्ट करते हैं, मूल्य से नहीं। इसका मतलब यह है कि गिरफ्तार 2 को उसी संदर्भ में सौंपा गया है जिसे गिरफ्तार किया गया है। दूसरे शब्दों में, हम जो भी गिरफ्तार करने के लिए करते हैं, वह मूल गिरफ्तारी सरणी (और इसके विपरीत) को भी प्रभावित करेगा। नीचे एक नज़र डालें:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

ऊपर, हमने एक नए तत्व d को arr2 में धकेला है। फिर भी, जब हम गिरफ्तारी के मूल्य को निकालते हैं, तो आप देखेंगे कि d मान को उस सरणी में भी जोड़ा गया था:

['a', 'b', 'c', 'd']

हालांकि डरने की कोई जरूरत नहीं है! हम प्रसार ऑपरेटर का उपयोग कर सकते हैं! नीचे दिए गए कोड पर विचार करें। यह ऊपर के जैसा ही है। हालांकि इसके बजाय, हमने स्क्वायर ब्रैकेट की एक जोड़ी के भीतर प्रसार ऑपरेटर का उपयोग किया है:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

हिट रन, और आप अपेक्षित आउटपुट देखेंगे:

['a', 'b', 'c']

ऊपर, गिरफ्तारी में सरणी मानों को व्यक्तिगत तत्वों के रूप में विस्तारित किया गया जो तब गिरफ्तार 2 को सौंपा गया था। अब हम गिरफ्तारी सरणी को बदल सकते हैं जितना कि हम मूल गिरफ्तारी सरणी पर कोई परिणाम नहीं चाहते हैं:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

फिर से, यह कारण काम करता है क्योंकि गिरफ्तारी के मूल्य का विस्तार हमारे arr2 सरणी परिभाषा के कोष्ठक को भरने के लिए किया जाता है। इस प्रकार, हम गिरफ्तार करने के संदर्भ के बजाय गिरफ्तारी के व्यक्तिगत मूल्यों को बराबर करने के लिए arr2 सेट कर रहे हैं जैसे हमने पहले उदाहरण में किया था।

बोनस उदाहरण - स्ट्रिंग टू ऐरे एक मजेदार अंतिम उदाहरण के रूप में, आप एक स्ट्रिंग को एक सरणी में बदलने के लिए फैल सिंटैक्स का उपयोग कर सकते हैं। बस वर्ग ब्रैकेट की एक जोड़ी के भीतर फैल सिंटैक्स का उपयोग करें:

var str = "hello";
var chars = [...str];

console.log(chars);

Answer 11

तीन बिंदुओं (...)को प्रसार ऑपरेटर कहा जाता है, और यह वैचारिक रूप से ES6 सरणी प्रसार ऑपरेटर के समान है, JSX JSX में क्लीनर सिंटैक्स प्रदान करने के लिए इन समर्थित और विकासशील मानकों का लाभ उठाता है।

ऑब्जेक्ट एनिलाइज़र में गुण फैलाना नए बनाए गए ऑब्जेक्ट पर उपलब्ध कराई गई वस्तु से स्वयं की असंख्य गुणों की प्रतिलिपि बनाता है।

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

संदर्भ:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html

Comments

यह ECMAScript में वस्तुओं पर प्रसार ऑपरेटर के लिए एक प्रस्ताव है। सवाल JSX प्रसार ऑपरेटर के बारे में था। वे वैसे ही नहीं हैं भले ही वे उसी तरह से काम करते हों।

— ivarni

@ivarni मुझे संदर्भ में लाने के लिए धन्यवाद, मुझे एक मिनट दें, प्रश्न के संदर्भ के आधार पर उत्तर को अपडेट करेंगे

— डेवलपर

@ivarni संदर्भ के आधार पर उत्तर को अपडेट करें, आशा है कि यह संदर्भ के साथ फिट बैठता है

— डेवलपर

"तीन डॉट्स (...) को स्प्रेड ऑपरेटर कहा जाता है" केवल गलत तरीके से। :-) प्रसार और आराम ऑपरेटर नहीं हैं, और वे नहीं हो सकते हैं, क्योंकि एक ऑपरेटर को एक परिणाम परिणाम का उत्पादन करना पड़ता है। प्रसार और आराम प्राथमिक सिंटैक्स हैं, ऑपरेटर नहीं।

— टीजे क्राउडर

Answer 12

... का अर्थ इस पर निर्भर करता है कि आप इसे कोड में कहां उपयोग करते हैं,

1. सरणी / ऑब्जेक्ट को फैलाने / कॉपी करने के लिए उपयोग किया जाता है - यह ऐरे / ऑब्जेक्ट को कॉपी करने में मदद करता है और नए एरे वैल्यूज को जोड़ने / ऑब्जेक्ट में नए गुणों को जोड़ने के लिए भी है, जो वैकल्पिक है।

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. फ़ंक्शन तर्कों को एकल सरणी में मर्ज करने के लिए उपयोग किया जाता है - फिर आप उस पर सरणी फ़ंक्शन का उपयोग कर सकते हैं।

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

Answer 13

यह एक प्रसार ऑपरेटर ...

उदाहरण के लिए यदि आपके पास एक सरणी first=[1,2,3,4,5]और दूसरा है second=[6,7,8]।

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

इसे भी json ऑब्जेक्ट्स के साथ किया जा सकता है।

Answer 14

संक्षेप में, तीन बिंदु ...ES6 (ES2015) में एक प्रसार ऑपरेटर है। स्प्रेड ऑपरेटर सभी डेटा प्राप्त करेगा।

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

परिणाम देगा [1,2,3,4,5,6]

console.log(c);

परिणाम देगा [7,8,1,2,3,4]

Answer 15

आमतौर पर फैल ऑपरेटर कहा जाता है, इसका उपयोग जहां भी आवश्यक हो, का विस्तार करने के लिए किया जाता है

उदाहरण

const SomeStyle = {
   margin:10,
   background:#somehexa
}

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

Answer 16

फैले हुए गुण एक सरल तरीके से कई गुणों को पारित करने के लिए उपयोग किया जाता है

{। this.props} इस की संपत्ति को पकड़ रहा है

नीचे प्रॉप्स के साथ {...} स्प्रेड ऑपरेटर का उपयोग

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

बिना {...} फैला हुआ

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

साथ {...} फैला हुआ

<Child { ...this.props } />

दान अब्रामोव के ट्वीट के बारे में स्प्रेड ऑपरेटर (Redux के निर्माता)

Answer 17

... यह सिंटैक्स ES6 का हिस्सा है, न कि कुछ जिसे आप केवल React. उपयोग कर सकते हैं। इसे दो अलग-अलग तरीकों से इस्तेमाल किया जा सकता है; एक प्रसार ऑपरेटर के रूप में या बाकी पैरामीटर के रूप में। आप इस लेख से अधिक जानकारी प्राप्त कर सकते हैं: https://www.techiediaries.com/react-spread-operator-props-setstate/

आपने प्रश्न में जो उल्लेख किया है वह कुछ इस तरह है, आइए मान लेते हैं,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

प्रसार ऑपरेटर के उपयोग से आप इस तरह से घटक को प्रॉपर पास कर सकते हैं।

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

Answer 18

रीपैक्ट एप्लिकेशन में प्रॉपर पास करना आम बात है। ऐसा करने में हम बाल घटक में राज्य परिवर्तनों को लागू करने में सक्षम हैं, चाहे वह शुद्ध हो या अस्पष्ट (स्टेटलेस या स्टेटफुल)। ऐसे समय होते हैं जब सबसे अच्छा दृष्टिकोण, प्रॉप्स में पास करते समय, एकवचन गुणों या गुणों की एक पूरी वस्तु में पारित करना होता है। ES6 में सरणियों के समर्थन के साथ हमें "..." संकेतन दिया गया था और इसके साथ अब हम एक बच्चे को पूरी वस्तु प्रदान करने में सक्षम हैं।

एक बच्चे को सहारा देने की सामान्य प्रक्रिया इस वाक्य रचना के साथ नोट की जाती है:

var component = <Component foo={x} bar={y} />;

प्रॉप्स की संख्या कम से कम होने पर इसका उपयोग करना ठीक है, लेकिन प्रोपेगेज संख्या बहुत अधिक हो जाने पर यह असहनीय हो जाती है। इस पद्धति के साथ एक समस्या तब होती है जब आप एक बच्चे के घटक के भीतर आवश्यक गुणों को नहीं जानते हैं और विशिष्ट जावास्क्रिप्ट विधि उन गुणों को सरल बनाने और बाद में ऑब्जेक्ट को बांधने के लिए है। यह प्रोपेप्ट चेकिंग और क्रिप्टिक स्टैक ट्रेस त्रुटियों के साथ समस्या का कारण बनता है जो सहायक नहीं हैं और डीबगिंग में देरी का कारण बनते हैं। निम्नलिखित इस अभ्यास का एक उदाहरण है, और क्या नहीं करना है:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

यह परिणाम प्राप्त किया जा सकता है लेकिन ऐसा करने से अधिक उपयुक्त सफलता के साथ:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

लेकिन जेएसएक्स स्प्रेड या जेएसएक्स का उपयोग इस समीकरण में वापस करने के लिए नहीं करता है, अब हम इस तरह से कुछ कर सकते हैं:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

"... प्रॉप्स" में शामिल गुण foo: x, bar: y हैं। इसे इस सिंटैक्स का उपयोग करके "... प्रॉप्स" के गुणों को ओवरराइड करने के लिए अन्य विशेषताओं के साथ जोड़ा जा सकता है:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

इसके अलावा, हम अन्य संपत्ति वस्तुओं को एक दूसरे पर कॉपी कर सकते हैं या उन्हें इस तरह से जोड़ सकते हैं:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

या इस तरह दो अलग-अलग वस्तुओं को मर्ज करें (यह अभी तक सभी प्रतिक्रिया संस्करणों में उपलब्ध नहीं है):

var ab = { ...a, ...b }; // merge(a, b)

फेसबुक की प्रतिक्रिया / डॉक्स साइट के अनुसार इसे समझाने का दूसरा तरीका है:

यदि आपके पास पहले से ही एक ऑब्जेक्ट के रूप में "प्रॉप्स" है, और आप इसे JSX में पास करना चाहते हैं, तो आप पूरे प्रॉपर ऑब्जेक्ट को पास करने के लिए SPREAD ऑपरेटर के रूप में "..." का उपयोग कर सकते हैं। निम्नलिखित दो उदाहरण समतुल्य हैं:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

जब आप जेनेरिक कंटेनरों का निर्माण कर रहे हों तो स्प्रेड विशेषताएँ उपयोगी हो सकती हैं। हालाँकि, वे आपके कोड को गड़बड़ कर सकते हैं जिससे घटकों के लिए बहुत सारे अप्रासंगिक सहारा पास करना आसान हो जाता है जो उनकी परवाह नहीं करते हैं। इस वाक्यविन्यास को संयम से इस्तेमाल किया जाना चाहिए।

Answer 19

इसका स्प्रेड ऑपरेटर कहा जाता है। उदाहरण के लिए, hello = {name: '', msg: ''} let hello1 = {... hello} अब हैलो ऑब्जेक्ट प्रॉपर्टीज को hello1 में कॉपी किया जाता है।

Answer 20

इसे जावास्क्रिप्ट में फैल सिंटैक्स कहा जाता है।

यह जावास्क्रिप्ट में एक सरणी या वस्तु को नष्ट करने के लिए उपयोग करता है।

उदाहरण:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

आप इसके साथ एक ही परिणाम कर सकते हैं Object.assign() जावास्क्रिप्ट में फ़ंक्शन के ।

संदर्भ: सिंटैक्स फैलाएं

Answer 21

इसमें संकलित किया जाएगा:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

जहां यह दो titleऔर अधिक गुण देता है और इससे animationपरे हैprops मेजबान तत्व है।

...ES6 ऑपरेटर स्प्रेड कहलाता है ।

Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax देखें

Answer 22

प्रसार ऑपरेटर (ट्रिपल ऑपरेटर) एक्मा लिपि 6 (ES6) में प्रस्तुत करता है। ईकमा लिपि (ES6) जावास्क्रिप्ट का आवरण है।

प्रॉप्स में संचालक गुण को फैलाना। this.props = {firstName: 'Dan', अंतिम नाम: 'Abramov', शहर: 'New York', देश: 'USA'}

{[this.props} = {firstName: 'Dan', अंतिम नाम: 'Abramov', शहर: 'New York', देश: 'USA'}

लेकिन मुख्य विशेषता प्रसार ऑपरेटर का उपयोग संदर्भ प्रकार के लिए किया जाता है।

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

इसे संदर्भ प्रकार कहा जाता है, एक वस्तु अन्य वस्तुओं को प्रभावित करती है क्योंकि वे स्मृति में साझा करने योग्य होती हैं। यदि आप स्वतंत्र रूप से मूल्य प्राप्त कर रहे हैं, तो स्प्रेड मेमोरी का उपयोग दोनों स्प्रेड ऑपरेटर का उपयोग करते हैं।

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

Answer 23

यदि आपके पास तत्वों की एक सरणी है और आप अपने द्वारा उपयोग किए जाने वाले तत्वों को प्रदर्शित करना चाहते हैं ... सरणीएं और यह सभी तत्वों पर पुनरावृति करेगा

Answer 24

...(जावास्क्रिप्ट में तीन डॉट्स) को स्प्रेड सिंटैक्स या स्प्रेड ऑपरेटर कहा जाता है। यह एक एरे एक्सप्रेशन या स्ट्रिंग एक्सप्रैस जैसे एक एक्सरेबल या ऑब्जेक्ट एक्सप्रेशन को जहां कहीं भी रखा गया है , एक्सटेंड करने की अनुमति देता है । यह रिएक्ट के लिए विशिष्ट नहीं है। यह एक जावास्क्रिप्ट ऑपरेटर है।

यहाँ ये सभी उत्तर मददगार हैं, लेकिन मैं स्प्रेड सिंटैक्स (स्प्रेड ऑपरेटर्स) के ज्यादातर इस्तेमाल किए गए व्यावहारिक उपयोग मामलों को सूचीबद्ध करना चाहता हूं ।

1. कंघी एरे (कॉनराटेट एरेज़)

वहाँ एक हैं सरणियों गठबंधन करने के लिए तरीकों की विविधता , लेकिन प्रसार ऑपरेटर आप एक सरणी में किसी भी स्थान पर इस जगह के लिए अनुमति देता है। यदि आप सरणी के भीतर किसी बिंदु पर दो सरणियों और स्थान तत्वों को संयोजित करना चाहते हैं, तो आप निम्नानुसार कर सकते हैं:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. नकल करना

जब हम एक सरणी की एक प्रति चाहते थे, तो हमारे पास Array.prototypr.slice () विधि थी। लेकिन, आप प्रसार ऑपरेटर के साथ भी ऐसा कर सकते हैं।

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. लागू किए बिना कार्य कॉलिंग

ES5 में, doStuff()फ़ंक्शन को दो संख्याओं की एक सरणी पास करने के लिए , आप अक्सर फ़ंक्शन .prototype.apply () आदि का उपयोग करते हैं:

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

हालांकि, प्रसार ऑपरेटर का उपयोग करके, आप फ़ंक्शन में एक सरणी पास कर सकते हैं।

doStuff(...args);

4. विनाशकारी ऐरे

जैसा कि आप उन्हें चाहते हैं, आप जानकारी को चरों में नष्ट करने के लिए विनाशकारी और बाकी ऑपरेटर का उपयोग कर सकते हैं:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. बाकी पैरामीटर्स के रूप में कार्य तर्क

ईएस 6 में तीन डॉट्स (...) भी है जो एक बाकी पैरामीटर है जो किसी फ़ंक्शन के सभी शेष तर्कों को एक सरणी में इकट्ठा करता है।

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. मैथ फंक्शंस का उपयोग करना

कोई भी फ़ंक्शन जहां प्रसार का उपयोग किया जाता है तर्क का उपयोग उन कार्यों द्वारा किया जा सकता है जो किसी भी तर्क को स्वीकार कर सकते हैं।

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. दो वस्तुओं का मेल

आप दो ऑब्जेक्ट को संयोजित करने के लिए स्प्रेड ऑपरेटर का उपयोग कर सकते हैं। यह एक आसान और साफ तरीका है।

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. एक स्ट्रिंग को अलग अक्षरों में अलग करें

आप स्ट्रिंग को अलग-अलग वर्णों में फैलाने के लिए प्रसार ऑपरेटर का उपयोग कर सकते हैं।

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

आप स्प्रेड ऑपरेटर का उपयोग करने के और तरीकों के बारे में सोच सकते हैं। मैंने यहां जो सूचीबद्ध किया है, वह इसके लोकप्रिय उपयोग के मामले हैं।

Answer 25

यह ES6 / सद्भाव में एक नई सुविधा है। इसे स्प्रेड ऑपरेटर कहा जाता है। यह आपको किसी सरणी / ऑब्जेक्ट के घटक भागों को अलग करने देता है, या कई आइटम / पैरामीटर ले सकता है और उन्हें एक साथ गोंद कर सकता है। यहाँ एक उदाहरण है:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

और एक वस्तु / कुंजी के साथ:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

वास्तव में कितना अच्छा है आप इसका उपयोग "बाकी मूल्यों" का मतलब करने के लिए कर सकते हैं।

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

Answer 26

जिन्हें स्प्रेड कहा जाता है। जैसा कि नाम से ही स्पष्ट है। इसका मतलब यह है कि यह उन सरणी या वस्तुओं में जो भी मूल्य है डाल रहा है।

जैसे कि :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]