প্রতিক্রিয়া এই তিনটি বিন্দু কি করতে?

Question

কী ...এই না প্রতিক্রিয়া (ব্যবহার JSX) কোড এবং কি এটা বলা হয়?

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

Comments

থেরেস হ'ল স্প্রেড সিনট্যাক্স - কোডবুর্স্ট.আইও

— গৌতম

দ্রষ্টব্য: ...অপারেটর বিভিন্ন প্রসঙ্গে বিভিন্নভাবে আচরণ করে। এই প্রসঙ্গে, এটি নীচে @ টিজে ক্রোডার দ্বারা বর্ণিত "স্প্রেড" অপারেটর। ভিন্ন প্রসঙ্গে এটি নীচে @ টমাস নিকডিম দ্বারা বর্ণিত "বিশ্রাম" অপারেটরও হতে পারে।

— two1ejack

Answer 1

এটা সম্পত্তি ছড়িয়ে ছিটিয়ে । এটি ES2018 এ যুক্ত করা হয়েছিল (অ্যারে / পুনরাবৃত্তির জন্য স্প্রেড আগে ছিল, ES2015), তবে এটি প্রতিস্থাপনের মাধ্যমে দীর্ঘকাল ধরে প্রতিক্রিয়া প্রকল্পগুলিতে সমর্থন করা হয়েছে (" জেএসএক্স স্প্রেড অ্যাট্রিবিউটস " হিসাবে আপনি এটি অন্য কোথাও করতে পারলেও, কেবলমাত্র বৈশিষ্ট্যগুলি নয় )।

{...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সমস্ত একই বৈশিষ্ট্যগুলির সাথে একটি নতুন অবজেক্টের সাথে প্রতিস্থাপন করে , যা হয়ে যায় :fooa"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বা সেগুলি একত্রিত হয়?

— আন্ডেরো

@ আন্ডেরো - এটি একটি খুব আকর্ষণীয় প্রশ্ন। যতদুর আমি দেখতে পারেন, এটা হচ্ছে দ্বারা [ডকুমেন্টেশন আবৃত নয় এর 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

প্রতিটি ব্যবহারের ক্ষেত্রে সমস্ত পরিষ্কার উদাহরণের কারণে এটি দুর্দান্ত উত্তর। এই সমস্ত লিখতে সময় দেওয়ার জন্য আপনাকে ধন্যবাদ।

— চাদ

আরও স্পষ্টতার জন্য উদাহরণের আগে বিশ্রামের প্যারামিটারগুলি উল্লেখ করুন

— জে

upvated, এই আমি খুঁজছিলাম ছিল

— সিসাবা

সত্যই এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। +1

— I_am_learning_ এখন

সবচেয়ে ভাল উত্তরটিও সবচেয়ে মজার নয়, 'সেলানা মেরি আপনার প্রথম ক্রাশ: ডি'

— আন্দা টেমেল

Answer 4

জাভাস্ক্রিপ্টের তিনটি বিন্দু স্প্রেড / রেস্ট অপারেটর ।

স্প্রেড অপারেটর

বিস্তার সিনট্যাক্স একটি অভিব্যক্তি জায়গায় যেখানে একাধিক আর্গুমেন্ট বলে আশা করা হয় যে প্রসারিত করা অনুমতি দেয়।

myFunction(...iterableObj);

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

[...Array(10)]

বিশ্রামের পরামিতি

বাকি প্যারামিটার সিনট্যাক্স আর্গুমেন্ট পরিবর্তনশীল নম্বর দিয়ে ফাংশন জন্য ব্যবহৃত হয়।

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

অ্যারেগুলির জন্য স্প্রেড / রেস্ট অপারেটরটি ES6 এ চালু হয়েছিল। অবজেক্ট স্প্রেড / বিশ্রামের সম্পত্তিগুলির জন্য একটি স্টেট 2 প্রস্তাবনা রয়েছে।

টাইপসক্রিপ্টটি স্প্রেড সিনট্যাক্সকে সমর্থন করে এবং এটিকে ছোটখাট সমস্যা সহ ECMAScript এর পুরানো সংস্করণে স্থানান্তর করতে পারে ।

Comments

স্প্রেড / বিশ্রাম এখন স্টেজ 4, সমাপ্ত। আমি মনে করি ইএস

— 9/2018

Answer 5

এটি ES6 এর একটি বৈশিষ্ট্য যা প্রতিক্রিয়াতেও ব্যবহৃত হয়। নীচের উদাহরণটি দেখুন:

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} />
}

এগুলি জেএসএক্সের স্প্রেড অপারেটর সম্পর্কে প্রতিক্রিয়া দলের থেকে উদ্ধৃতিগুলি:

জেএসএক্স স্প্রেড অ্যাট্রিবিউটস যদি আপনি সময়ের পূর্বে যে সমস্ত বৈশিষ্ট্য আপনি কোনও উপাদানটিতে রাখতে চান তা যদি জেনে থাকেন তবে জেএসএক্স ব্যবহার করা সহজ:

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

প্রপসকে মিউটেশন করা খারাপ
which আপনি যদি কোন বৈশিষ্ট্য সেট করতে চান তা জানেন না, তবে পরে আপনাকে সেগুলিতে যুক্ত করার প্ররোচিত হতে পারে:

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

এটি একটি অ্যান্টি-প্যাটার্ন কারণ এর অর্থ হ'ল আমরা আপনাকে পরবর্তী সময়ে সঠিক প্রপটিপগুলি পরীক্ষা করতে সহায়তা করতে পারি না। এর অর্থ হ'ল আপনার প্রোপটাইপস ত্রুটিগুলি কোনও ক্রিপ্টিক স্ট্যাক ট্রেস দিয়ে শেষ হয়।

প্রপসগুলি পরিবর্তনযোগ্য হিসাবে বিবেচনা করা উচিত। প্রপস অবজেক্টকে অন্য কোথাও রূপান্তর করা অপ্রত্যাশিত ফলাফলের কারণ হতে পারে তাই আদর্শভাবে এটি এই মুহুর্তে হিমায়িত অবজেক্ট হতে পারে।

বৈশিষ্ট্যগুলি ছড়িয়ে দিন
এখন আপনি জেএসএক্সের একটি নতুন বৈশিষ্ট্যটি স্প্রেড অ্যাট্রিবিউট হিসাবে ব্যবহার করতে পারেন:

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 প্রস্তাব আছে। আমরা জেএসএক্সে একটি ক্লিনার সিনট্যাক্স সরবরাহ করতে এই সমর্থিত এবং বিকাশমান মানগুলির সুবিধা নিচ্ছি।

Answer 7

পাইথন বিশ্ব থেকে যারা আসে তাদের জন্য, জেএসএক্স স্প্রেড বৈশিষ্ট্যগুলি আনপ্যাকিং আর্গুমেন্ট তালিকা (পাইথন- **অপারেটর) এর সমতুল্য ।

আমি জানি এটি একটি জেএসএক্স প্রশ্ন, তবে সাদৃশ্যগুলির সাথে কাজ করা কখনও কখনও এটি দ্রুত পেতে সহায়তা করে।

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}

নোট করুন যে fooঅবজেক্ট 1 এর fooসম্পত্তি অ্যাজ 2 সম্পত্তি দ্বারা ওভাররাইট করা হয়েছে

• বিশ্রামের প্যারামিটার সিনট্যাক্স হিসাবে যা আমাদেরকে অ্যারের হিসাবে অনির্দিষ্ট সংখ্যক যুক্তি উপস্থাপন করতে দেয়:

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 - অ্যারে serোকানো নীচের কোডটি একবার দেখুন। এই কোডটিতে আমরা স্প্রেড সিনট্যাক্সটি ব্যবহার করি না:

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

console.log(arr);

উপরে, আমরা নামের একটি অ্যারে তৈরি করেছি mid। তারপরে আমরা একটি দ্বিতীয় অ্যারে তৈরি করি যা আমাদের midঅ্যারে ধারণ করে । শেষ পর্যন্ত, আমরা ফলাফল লগ আউট। আপনি কি arrমুদ্রণ আশা করেন? কী ঘটে তা দেখতে উপরের রান ক্লিক করুন। এখানে ফলাফল:

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

আপনি কি প্রত্যাশিত ফলাফল? midঅ্যারেতে অ্যারে Byুকিয়ে arrআমরা একটি অ্যারের মধ্যে একটি অ্যারের সাথে শেষ করেছি। লক্ষ্য ছিল যদি ঠিক আছে। তবে আপনি যদি 1 থেকে 6 এর মানগুলির সাথে একক অ্যারে চান? এটি সম্পাদন করতে, আমরা স্প্রেড সিনট্যাক্সটি ব্যবহার করতে পারি! মনে রাখবেন, স্প্রেড সিনট্যাক্সটি আমাদের অ্যারের উপাদানগুলি প্রসারিত করতে দেয়। নীচের কোডটি দেখুন। সবকিছু একই রকম - আমরা এখন midঅ্যারেতে অ্যারে toোকানোর জন্য স্প্রেড সিনট্যাক্সটি ব্যবহার করছি তা বাদ দিয়ে 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']

এখন, প্রথম নজরে দেখে মনে হচ্ছে এটি কাজ করেছে - দেখে মনে হচ্ছে আমরা আর্টের মানগুলিকে এন্টার 2 এ অনুলিপি করেছি। তবে যা ঘটেছিল তা নয়। আপনি দেখুন, জাভাস্ক্রিপ্টে বস্তুর সাথে কাজ করার সময় (অ্যারেগুলি এক ধরণের অবজেক্ট) আমরা রেফারেন্স দ্বারা নির্ধারিত করি, মান দ্বারা নয়। এর অর্থ এটি হ'ল আর্ট 2 একই পরিমাণে আরর হিসাবে নির্ধারিত হয়েছে। অন্য কথায়, আমরা আরআর 2 এ যা কিছু করব তাও মূল অ্যারে অ্যারে (এবং তদ্বিপরীত) কেও প্রভাবিত করবে। নীচে একবার দেখুন:

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

arr2.push('d');

console.log(arr);

উপরে, আমরা একটি নতুন উপাদান ডিটিকে এন্টার 2 তে ঠেলে দিয়েছি। তবুও, আমরা যখন আরারের মান লগ আউট করি তখন আপনি দেখতে পাবেন যে ডি মানটি সেই অ্যারেতে যুক্ত হয়েছিল:

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

যদিও ভয় পাওয়ার দরকার নেই! আমরা স্প্রেড অপারেটর ব্যবহার করতে পারি! নীচের কোড বিবেচনা করুন। এটি প্রায় উপরের মতোই। পরিবর্তে, আমরা স্কোয়ার বন্ধনীগুলির এক জোড়া মধ্যে স্প্রেড অপারেটরটি ব্যবহার করেছি:

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);

আবার, এই কাজ করার কারণটি হ'ল কারণ আমাদের অ্যারে 2 অ্যারের সংজ্ঞাটি বন্ধনী পূরণ করতে আরারের মান প্রসারিত হয়। সুতরাং, আমরা প্রথম উদাহরণে যেমনটি করেছি তেমনভাবে আরারের রেফারেন্সের পরিবর্তে আরারের স্বতন্ত্র মানগুলিকে সমান করতে আরআর 2 সেট করছি।

বোনাস উদাহরণ - স্ট্রিং এ অ্যারে একটি মজাদার চূড়ান্ত উদাহরণ হিসাবে, আপনি একটি স্ট্রিংকে অ্যারেতে রূপান্তর করতে স্প্রেড সিনট্যাক্সটি ব্যবহার করতে পারেন। স্কয়ার বন্ধনীগুলির এক জোড়া মধ্যে কেবল স্প্রেড সিনট্যাক্সটি ব্যবহার করুন:

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

console.log(chars);

Answer 11

তিনটি (...)বিন্দুকে স্প্রেড অপারেটর বলা হয়, এবং এটি ES6 অ্যারে স্প্রেড অপারেটরের মত ধারণাগতভাবে অনুরূপ, জেএসএক্সে একটি ক্লিনার সিনট্যাক্স সরবরাহ করার জন্য জেএসএক্স এই সমর্থিত এবং বিকাশমান মানগুলির সুযোগ নিয়েছে

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

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

এটি ইসমাস্ক্রিপ্টে বস্তুগুলিতে স্প্রেড অপারেটরের জন্য একটি প্রস্তাব। প্রশ্নটি ছিল জেএসএক্স স্প্রেড অপারেটর সম্পর্কে। তারা একইভাবে কাজ করার পরেও তারা এক নয়।

— ivarni

@ivarni আমাকে প্রসঙ্গে আনার জন্য ধন্যবাদ, আমাকে একটি মিনিট দিন, প্রশ্নের প্রসঙ্গে ভিত্তিক উত্তর আপডেট করবেন

— বিকাশকারী

@ivarni প্রসঙ্গের ভিত্তিতে উত্তরটি আপডেট করুন, আশা করুন এটি প্রসঙ্গের সাথে মানানসই

— বিকাশকারী

"তিনটি বিন্দু (...) কে স্প্রেড অপারেটর বলা হয়" কেবল ভুলভাবে। :-) স্প্রেড এবং বিশ্রাম অপারেটর নয়, এবং তারা হতে পারে না, কারণ কোনও অপারেটরকে একক ফলাফলের মান উত্পাদন করতে হয়। স্প্রেড এবং বাকিগুলি প্রাথমিক বাক্য গঠন, অপারেটর নয় not

— টিজে ক্রাউডার

Answer 12

... এর অর্থ নির্ভর করে আপনি কোডটিতে এটি কোথায় ব্যবহার করেন,

1. অ্যারে / অবজেক্টটি ছড়িয়ে / অনুলিপি করার জন্য ব্যবহৃত - এটি অ্যারে / অবজেক্টটি অনুলিপি করতে এবং নতুন অ্যারে মান যুক্ত করতে / বস্তুকে নতুন বৈশিষ্ট্য যুক্ত করতে সহায়তা করে যা optionচ্ছিক।

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]

একইটি জেসন বস্তুগুলির সাথেও করা যেতে পারে।

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);

ফলাফল দেবে [,,৮,১,২,৩,৪]

Answer 15

সাধারণত স্প্রেড অপারেটর বলা হয়, এটি যেখানে প্রয়োজন সেখানে প্রসারিত করতে ব্যবহৃত হয়

উদাহরণ

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

আপনি যেখানে স্প্রেড অপারেটর স্প্রেড সিনট্যাক্স সম্পর্কে আরও বেশি প্রয়োজন সেখানে এটি ব্যবহার করতে পারেন ।

Answer 16

সরল উপায়ে একাধিক সম্পত্তি পাস করার জন্য ব্যবহৃত স্প্রেড অ্যাট্রিবিউটস

{... this.prop} এই.পৃষ্ঠীর সম্পত্তি ধরে রাখছে

নীচের প্রপস সহ {...} স্প্রেড অপারেটরের ব্যবহার

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

{... Without ছাড়াই

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

> 

সাথে {...} ছড়িয়ে দিন

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

স্প্রেড অপারেটর সম্পর্কে ড্যান আব্রামভের টুইট (রেডাক্সের নির্মাতা)

Answer 17

... এই বাক্য গঠনটি ES6 এর অংশ এবং এমন কিছু নয় যা আপনি কেবল প্রতিক্রিয়াতে ব্যবহার করতে পারেন। এটি দুটি ভিন্ন উপায়ে ব্যবহার করা যেতে পারে; স্প্রেড অপারেটর হিসাবে বা বিশ্রামের প্যারামিটার হিসাবে You

আপনি এই প্রশ্নটিতে যা উল্লেখ করেছেন তা হ'ল এরকম কিছু, আসুন ধরে নেওয়া যাক,

    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, বার: 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)

ফেসবুকের প্রতিক্রিয়া / ডক্স সাইট অনুযায়ী এটি ব্যাখ্যা করার আর একটি উপায় হ'ল:

যদি আপনার কাছে ইতিমধ্যে একটি বস্তু হিসাবে "প্রপস" থাকে এবং আপনি এটি জেএসএক্সে পাস করতে চান তবে পুরো প্রপস অবজেক্টটি পাস করার জন্য আপনি স্প্রেড অপারেটর হিসাবে "..." ব্যবহার করতে পারেন। নিম্নলিখিত দুটি উদাহরণ সমতুল্য:

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



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

আপনি জেনেরিক ধারক তৈরি করার সময় স্প্রেড বৈশিষ্ট্যগুলি কার্যকর হতে পারে। যাইহোক, তারা যেগুলিকে যত্নশীল নয় এমন উপাদানগুলিতে প্রচুর অপ্রাসঙ্গিক প্রপসগুলি সহজেই পাস করে আপনার কোডকে অগোছালো করে তুলতে পারে। এই বাক্য গঠনটি অল্প ব্যবহার করা উচিত।

Answer 19

একে বলা হয় স্প্রেড অপারেটর। যেমন ধরুন হ্যালো = {নাম: '', msg: ''} হ্যালো 1 = {... হ্যালো} এখন হ্যালো অবজেক্টের বৈশিষ্ট্য হ্যালো 1 এ অনুলিপি করা হয়েছে।

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/ উল্লেখ / অপারেটর / স্প্রেড_সেন্টাক্স দেখুন

Answer 22

স্প্রেড অপারেটর (ট্রিপল অপারেটর) ইকামা স্ক্রিপ্ট ((ইএস in) এ পরিচয় করিয়ে দেয় Eাকা স্ক্রিপ্ট (ইএস)) জাভাস্ক্রিপ্টের একটি মোড়ক।

প্রসেসগুলিতে অপারেটরের প্রচুর পরিমাণে স্প্রেড। this.prop = {প্রথম নাম: 'ড্যান', শেষ নাম: 'আব্রামভ', শহর: 'নিউ ইয়র্ক', দেশ: 'মার্কিন যুক্তরাষ্ট্র'}

{... this.prop} = {প্রথম নাম: 'ড্যান', সর্বশেষ নাম: 'আব্রামভ', শহর: 'নিউ ইয়র্ক', দেশ: 'মার্কিন যুক্তরাষ্ট্র'}

তবে মূল বৈশিষ্ট্য স্প্রেড অপারেটর একটি রেফারেন্স ধরণের জন্য ব্যবহৃত হয়।

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. অ্যারে অনুলিপি করা

যখন আমরা একটি অ্যারের অনুলিপি চেয়েছিলাম তখন আমাদের কাছে অ্যারে.প্রোটোটাইপস্রাইস () পদ্ধতি ছিল। তবে, আপনি স্প্রেড অপারেটর দিয়েও এটি করতে পারেন।

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

3. প্রয়োগ ছাড়া কলিং ফাংশন

ES5 এ, doStuff()ফাংশনে দুটি সংখ্যার অ্যারে পাস করার জন্য , আপনি প্রায়শই Function.prototype.apply () পদ্ধতিটি নিম্নলিখিতভাবে ব্যবহার করেন :

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

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

যাইহোক, স্প্রেড অপারেটর ব্যবহার করে, আপনি ফাংশনটিতে একটি অ্যারে পাস করতে পারেন।

doStuff(...args);

৪. অ্যারেগুলি তৈরি করা হচ্ছে

ভেরিয়েবলগুলিতে আপনি যেমন চান তেমন তথ্য বের করতে আপনি ডেস্ট্রাকচারিং এবং বাকী অপারেটর একসাথে ব্যবহার করতে পারেন:

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. বিশ্রাম পরামিতি হিসাবে ফাংশন যুক্তি

ES6 এ তিনটি বিন্দু (...) রয়েছে যা একটি বিশ্রামের প্যারামিটার যা একটি ফাংশনের সমস্ত অবশিষ্ট আর্গুমেন্টকে অ্যারে হিসাবে সংগ্রহ করে।

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

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

Math. গণিত ফাংশন ব্যবহার করা

যে কোনও ফাংশন যেখানে স্প্রেডকে আর্গুমেন্ট হিসাবে ব্যবহার করা হয় সেগুলি ফাংশন দ্বারা ব্যবহার করা যেতে পারে যা কোনও সংখ্যক যুক্তি গ্রহণ করতে পারে।

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]