জাভাস্ক্রিপ্টে [] .স্লাইস.কল এর ব্যাখ্যা?

Question

একটি ডম নোডলিস্টকে নিয়মিত অ্যারে রূপান্তর করার জন্য আমি এই ঝরঝরে শর্টকাটটিতে হোঁচট খেয়েছি, তবে আমাকে অবশ্যই স্বীকার করতে হবে, এটি কীভাবে কাজ করে তা আমি পুরোপুরি বুঝতে পারি না:

[].slice.call(document.querySelectorAll('a'), 0)

সুতরাং এটি খালি অ্যারে দিয়ে শুরু হয় [], তারপরে ফলাফলটিকে নতুন অ্যারেতে sliceরূপান্তর করতে callহ্যাঁ?

আমি যা বুঝতে পারি না তা হ'ল call। কীভাবে এটি document.querySelectorAll('a')নোডলিস্ট থেকে একটি নিয়মিত অ্যারে রূপান্তর করে ?

Comments

Array.prototype.slice.call(document.querySelectorAll('a'));আপনার লিখিত কোডের খণ্ডটি লেখার একটি সঠিক উপায়।

— vdegenne

বিটিডাব্লু, একই জন্য আধুনিক (এবং স্বজ্ঞাগতভাবে বোঝা যায়) ES6 পদ্ধতিটি Array.from। সুতরাং উদাহরণস্বরূপ এটি একই কাজ করবে: অ্যারে.ফর্ম (ডকুমেন্ট.কোয়ারিসিলিটরআল ('এ'));

— rugk

Answer 1

এখানে যা ঘটছে তা হ'ল আপনি কল slice()করছেন যেন এটি NodeListব্যবহারের কোনও কাজ call()। কি slice()এই ক্ষেত্রে কাজ করে বস্তুর এটা বুকে গুলি চালাচ্ছেন (মূলত একটি অ্যারের, এখন একটি মাধ্যমে পুনরুক্তি একটি খালি অ্যারে তৈরি করেন, তাহলে NodeList) এবং খালি অ্যারে এটি তৈরি করা হয়, যা শেষ পর্যন্ত ফিরিয়ে দেওয়া হয় যে বস্তুর উপাদানের সংযোজন রাখা। এই সম্পর্কে একটি নিবন্ধ এখানে ।

সম্পাদনা করুন:

সুতরাং এটি খালি অ্যারে দিয়ে শুরু হয় [], তারপরে কলের ফলাফলটিকে নতুন অ্যারেতে রূপান্তর করতে ব্যবহৃত হয়?

এটা ঠিক না [].sliceএকটি ফাংশন অবজেক্ট প্রদান করে। একটি ফাংশন বস্তুর একটি ফাংশন আছে call()যা ফাংশনের প্রথম প্যারামিটার বরাদ্দ আহ্বান call()করতে this; অন্য কথায়, ফাংশনটিকে ভাবিয়ে তুলছে যে এটি অ্যারে না দিয়ে প্যারামিটার ( NodeListফিরে এসেছে document.querySelectorAll('a')) থেকে ডাকা হচ্ছে ।

Comments

এখানেও লক্ষ করুন যে এটি শব্দার্থগতভাবে বলার সমতুল্য হলেও Array.prototype.slice.call(...)এটি []কেবলমাত্র তার প্রোটোটাইপ স্লাইস পদ্ধতিতে অ্যাক্সেসের জন্য একটি অ্যারে অবজেক্ট ( ) ইনস্ট্যান্ট করে । এটি একটি নষ্ট তাত্পর্য। বলছে Array.prototype.slice.call(...)পরিবর্তে ক্লিনার, যদিও আপনি আপনার জাতীয় বেশ কয়েকটি অক্ষর যোগ যদি তুমি কাউন্টিং ...

— বেন Zotto

লক্ষ্য করুন আই ই 8 এবং নীচে শুধুমাত্র এরে বস্তুর উপর এই কাজ, তাই আপনি সক্ষম ক্লোন করতে থাকব NodeListগুলি

— লিভিংস্টন স্যামুয়েল

@ কুইকসটো []আরও নির্ভরযোগ্য যেহেতু Arrayঅন্য কোনও কিছুতে ওভাররাইট করা যেতে পারে। আপনার যদি পুনঃব্যবহারের প্রয়োজন হয় তবে Array#sliceএটি ক্যাশে করা ভাল idea

— ম্যাথিয়াস বাইনেস

আইই 8-তে অন্য কেউ যদি এটির জন্য কোনও উপায় সন্ধান করে, এই প্রশ্নটি দেখুন stackoverflow.com/questions/3199588/…

— লিয়াম নিউমার্চ

আমি আসলে এই প্যাটার্নটি ব্যাকবোন.জেএস সোর্স কোডে উপস্থিত হতে দেখেছি: var array = []; var push = array.push; var slice = array.slice; var splice = array.splice;@ ম্যাথিয়াসবাইনেন্সের উল্লেখ করা সুরক্ষা ইস্যুটির জন্য তিনি কি এটি করেন?

— অউন্সমার্টিন

Answer 2

জাভাস্ক্রিপ্টে, কোনও সময় অবজেক্টের পদ্ধতিগুলি রানটাইমের সময় অন্য কোনও অবজেক্টের সাথে আবদ্ধ হতে পারে। সংক্ষেপে, জাভাস্ক্রিপ্ট কোনও বস্তুকে অন্য বস্তুর পদ্ধতি "ধার" করতে দেয়:

object1 = {
    name: 'Frank',
    greet() {
        alert(`Hello ${this.name}`);
    }
};

object2 = {
    name: 'Andy'
};

// Note that object2 has no greet method,
// but we may "borrow" from object1:

object1.greet.call(object2); // Will show an alert with 'Hello Andy'

callএবং applyফাংশন বস্তুর পদ্ধতি (জাভাস্ক্রিপ্ট মধ্যে, ফাংশন বস্তু পাশাপাশি) আপনি এই কাজ করতে পারেন। সুতরাং, আপনার কোডে আপনি বলতে পারেন যে নোডলিস্ট একটি অ্যারের স্লাইস পদ্ধতি ধার করছে। .slice()এর ফলাফল হিসাবে অন্য অ্যারে প্রদান করে, যা "রূপান্তরিত" অ্যারে হয়ে যাবে যা আপনি এর পরে ব্যবহার করতে পারেন।

Comments

জাভাস্ক্রিপ্ট অবজেক্টের ক্রিয়াকলাপের জন্য বিমূর্ত ধারণা ধারণাটি প্রবাহিত করুন। এখন, আপনি নিজেই ওরফে callফাংশনের জন্য এটি প্রয়োগ করতে পারেন । Array.prototype[].prototype

— সৌরভ

Answer 3

এটি sliceএকটি থেকে ফাংশনটি পুনরুদ্ধার করে Array। এটি তখন সেই ফাংশনটিকে কল করে তবে প্রকৃত অ্যারের পরিবর্তে অবজেক্ট document.querySelectorAllহিসাবে ফলাফলটি ব্যবহার করে this।

Answer 4

এটি অ্যারে-জাতীয় বস্তুগুলিকে আসল অ্যারেতে রূপান্তর করার একটি কৌশল।

এর মধ্যে কয়েকটি অবজেক্টের মধ্যে রয়েছে:

• arguments কর্মে
• নোডলিস্ট (মনে রাখবেন তাদের সামগ্রী আনার পরে পরিবর্তিত হতে পারে! সুতরাং এগুলিকে অ্যারেতে রূপান্তর করা তাদের হিম করার উপায়)
• jQuery সংগ্রহ, ওরফে jQuery অবজেক্টস (কিছু ডক: এপিআই , টাইপ , শিখুন )

এটি অনেকগুলি উদ্দেশ্যে কাজ করে, উদাহরণস্বরূপ অবজেক্টগুলি রেফারেন্স দ্বারা পাস করা হয় তবে অ্যারেগুলি মান দ্বারা পাস হয়।

এছাড়াও, নোট করুন প্রথম যুক্তি 0বাদ দেওয়া যেতে পারে, পুরো ব্যাখ্যা এখানে ।

এবং সম্পূর্ণতার জন্য, jQuery.makeArray ()ও রয়েছে ।

Answer 5

কীভাবে এটি document.querySelectorAll('a')একটি NodeList থেকে নিয়মিত অ্যারে রূপান্তর করে ?

এটি আমাদের কাছে কোড যা

[].slice.call(document.querySelectorAll('a'), 0)

প্রথমে এটি ভেঙে ফেলা যাক,

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

ধাপ: 1 এক্সেকিউশন callফাংশন

• ভিতরে call, thisArgবাদে বাকী সমস্ত যুক্তি যুক্তির তালিকায় যুক্ত হবে।
• এখন ফাংশনটি sliceতার thisমান হিসাবে thisArg(বস্তুর মতো অ্যারে থেকে এসেছে document.querySelector) এবং যুক্তি তালিকার সাথে আবদ্ধ করে চলবে । অর্থাত্] যুক্তি startযা ধারণ করে0

পদক্ষেপ: 2 sliceফাংশন সম্পাদনের ভিতরে আবেদন করাcall

• startsহিসাবে একটি ভেরিয়েবল বরাদ্দ করা হবে0
• যেহেতু endহয় undefined, this.lengthসংরক্ষণ করা হবেe
• একটি খালি অ্যারে একটি চলক মধ্যে সংরক্ষণ করা হবে a

• উপরের সেটিংসটি তৈরি করার পরে নিম্নলিখিত পুনরাবৃত্তি ঘটবে

  while(s < e) {
    a.push(this[s]);
    s++;
  }
  

• ভরাট অ্যারে aফলাফল হিসাবে ফিরে আসবে।

---

পিএস আমাদের পরিস্থিতি আরও ভাল করে বোঝার জন্য আমাদের প্রসঙ্গে প্রয়োজনীয় কয়েকটি পদক্ষেপ কল এবং স্লাইজের মূল অ্যালগরিদম থেকে উপেক্ষা করা হয়েছে ।

Comments

খুব সুন্দর ধাপে ধাপে ব্যাখ্যা। অসাধারণ! ধন্যবাদ :)

— কিট্টু

সুন্দর ব্যাখ্যা।

— নবীনদা

Answer 6

[].slice.call(document.querySelectorAll('.slide'));

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually.

3. The slice() method returns the selected elements in an array, as a new array object.

  so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.

<div class="slideshow">

  <div class="slide">
    first slider1
  </div>
  <div class="slide">
    first slider2
  </div>
  <div class="slide">
    first slider3
  </div>
  <div class="slide">
    first slider4
  </div>
  <div class="slide">
    first slider5
  </div>
  <div class="slide">
    first slider6
  </div>

</div>

<script type="text/javascript">

  var arraylist = [].slice.call(document.querySelectorAll('.slide'));

  alert(arraylist);

</script>

Answer 7

ES6 থেকে: অ্যারে.ফ্রম (এলিমেন্ট.চিল্ডেন) বা অ্যারে.ফ্রোম দিয়ে সহজভাবে অ্যারে তৈরি করুন (দৈর্ঘ্য: 5})