Paaiškinimas [] .slice.call javascript?

Atėjau šį tvarkingą spartųjį klavišą, kad galiu konvertuoti „DOM NodeList“ į įprastą masyvą, tačiau turiu pripažinti, kad nesuprantu, kaip jis veikia:

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

Taigi, jis prasideda tuščiu masyvu [] , tada slice naudojamas call rezultatui paversti į naują masyvą?

Tai, ką aš nesuprantu, yra call . Kaip šis document.querySelectorAll('a') transformuoja iš NodeList į įprastą masyvą?

138
24 янв. Yansky nustatė sausio 24 d 2010-01-24 05:48 '10, 5:48, 2010-01-24 05:48
@ 7 atsakymai

Tai, kas čia vyksta, yra tai, kad skambinate slice() kaip NodeList slice() kaip „ NodeList funkciją. Kokiu atveju ši dalis sukuria tuščią masyvą, tada kartojasi per objektą, kuriame jis veikia (iš pradžių masyvas, dabar „ NodeList ), ir toliau prideda šio objekto elementus į tuščią masyvą, kurį jis sukūrė, galiausiai grįžta. Čia yra straipsnis apie tai .

EDIT:

Taigi, jis prasideda tuščia matrica [], o tada gabalas naudojamas pokalbio rezultatui paversti į naują masyvą, taip?

Tai ne. [].slice grąžina funkcijų objektą. Funkcinis objektas turi call() funkciją, kuri vadina funkciją, kuri priskiria pirmąjį parametrą iš call() į this ; kitaip tariant, priversti funkciją manyti, kad jis vadinamas iš parametro ( NodeList grąžina document.querySelectorAll('a') ), o ne iš masyvo.

109
24 янв. atsakymą pateikė max shawabkeh 24 sausis 2010-01-24 06:00 '10 6:00 val. 2010-01-24 06:00

„Javascript“ objekto metodai gali būti prijungti prie kito objekto vykdymo metu. Trumpai tariant, javascript leidžia objektui „pasiskolinti“ kito objekto metodą:

 object1 = { name:'frank', greet:function(){ alert('hello '+this.name) } }; object2 = { name:'andy' }; // Note that object2 has no greet method. // But we may "borrow" from object1: object1.greet.call(object2); 

Funkcijų objektų call ir apply metodai (javascript funkcijose taip pat yra objektai) leidžia jums tai padaryti. Taigi, jūsų kode galite pasakyti, kad Nodlist skolina masyvo gabalo metodą. Kokia transformacija yra ta, kad gabalas grąžina kitą masyvą.

84
24 янв. „ Slebetman“ atsakymas sausio 24 d 2010-01-24 07:01 '10, 7:01, 2010-01-24 07:01

Jis išskleidžia slice funkciją iš „ Array . Tada ji vadina šią funkciją, bet naudoja šį document.querySelectorAll , o ne faktinį masyvą.

21
24 янв. Brian Campbell atsakė sausio 24 d 2010-01-24 06:01 '10, 6:01, 2010-01-24 06:01

Tai būdas, kaip konvertuoti tokius objektus kaip masyvas į realius matricus.

Kai kuriose iš šių svetainių yra:

  • arguments funkcijose
  • „NodeList“ (nepamirškite, kad jų turinys gali būti pakeistas po ekstrahavimo, todėl jų konvertavimas į masyvą yra būdas juos užšaldyti)
  • jQuery kolekcijos, dar žinomos kaip jQuery objektai (kai kurie dokumentai: API , tipas , mokytis )

Jis tarnauja daugeliu tikslų, pavyzdžiui, objektai perduodami pagal nuorodą, o masyvai yra perduodami pagal vertę.

Taip pat atkreipkite dėmesį, kad pirmasis argumentas 0 gali būti praleistas, išsamus paaiškinimas čia .

Ir taip pat yra ir jQuery.makeArray () .

15
09 апр. Atsakymas pateikiamas Gras Double 09 Apr. 2015-04-09 07:42 '15 at 7:42 2015-04-09 07:42

Kaip šis document.querySelectorAll('a') NodeListNodeList į įprastą masyvą?

Tai yra kodas, kurį turime

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

Pirmiausia ištrinkite

  [] // 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' 

Žingsnis: 1 Vykdykite call funkciją

  • call viduje, išskyrus thisArg , likę argumentai bus įtraukti į argumentų sąrašą.
  • Dabar slice funkcija bus vadinama įpareigojant jos vertę this kaip thisArg (masyvas, kaip objektas atėjo iš document.querySelector ) ir naudojant argumentų sąrašą. ty] argumento start , kurioje yra 0

2 žingsnis: Vykdykite call viduje call

  • start bus priskirta kintamajam s kaip 0
  • kadangi end yra undefined , this.length bus išsaugotas e
  • tuščias masyvas bus saugomas kintamajame a
  • Atlikę aukščiau nurodytus nustatymus, pasirodys kitas kartojimas.

     while(s < e) { a.push(this[s]); s++; } 
  • dėl to užpildytas masyvas a bus grąžintas.

PS Norint geriau suprasti mūsų scenarijų, kai kurie mūsų kontekste reikalingi veiksmai buvo ignoruojami iš pradinio skambučių ir gabalų algoritmo.

7
15 марта '16 в 20:45 2016-03-15 20:45 atsakymas pateikiamas Rajaprabhu Aravindasamy kovo 15 d., 16 val. 20:45 2016-03-15 20:45
 [].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> 
1
17 февр. Atsakymą pateikė Ankit Parmar 17 vasaris. 2017-02-17 13:21 '17 13:21 pm 2017-02-17 13:21

Nuo ES6: tiesiog sukurkite masyvą su Array.from (element.children) arba Array.from ({length: 5})

0
31 окт. atsakymas suteiktas Moni spalio 31 d. 2017-10-31 00:58 '17 at 0:58 2017-10-31 00:58

Kiti klausimai apie „ etikečių arba Užduoti klausimą