javascript에서 [.slice.call]에 대한 설명

javascript에서 [.slice.call]에 대한 설명

DOM NodeList를 일반 어레이로 변환하기 위한 멋진 숏컷을 우연히 발견했습니다만, 그 구조를 완전히 이해하지 못했습니다.

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

빈 배열로 합니다.[] , , , 「 」slice는 의 결과를 변환하기 위해 합니다.call로운어 어레 속속 속속? ???

안 되는 은 '아, 아, 아, '아예'입니다.calldocument.querySelectorAll('a')NodeList node node node node node node node node node node node node node node node node node node?

일이 는 당신이 전화하는 입니다.slice() 치치 of NodeList를 사용합니다.call()... slice() 빈 어레이를 , 는 어레이)를 합니다.NodeList오브젝트가 작성한 빈 배열에 오브젝트의 요소를 계속 추가합니다.이러한 요소는 최종적으로 반환됩니다.여기 이것에 대한 기사가 있습니다.

편집:

빈 배열 []로 시작하여 슬라이스를 사용하여 호출 결과를 새 배열로 변환합니다.

그건 옳지 않아요. [].slice함수 개체를 반환합니다. 수수객 a a a a a a a a a a a a a a a 。call()는 첫 하는 함수를 호출합니다.call()로로 합니다.this함수)에서NodeList returned returned returned returned returned returned returned returned returneddocument.querySelectorAll('a')을 참조해 주세요를 사용합니다.

JavaScript에서 객체의 메서드는 런타임에 다른 객체에 바인딩될 수 있습니다.즉, javascript는 오브젝트가 다른 오브젝트의 메서드를 "차용"할 수 있도록 합니다.

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함수 객체의 메서드(JavaScript에서는 함수도 객체입니다)를 사용하면 이 작업을 수행할 수 있습니다.따라서 코드에서는 NodeList가 어레이의 슬라이스 메서드를 차용하고 있다고 할 수 있습니다. .slice()결과로서 다른 배열을 반환하고, 이 배열을 사용할 수 있게 됩니다.

해서 를취 the the the the the를 .sliceArray 다음 이 하지만, 이 함수의 하여 이 함수를 호출합니다document.querySelectorAll처 this★★★★★★★★★★★★★★★★★★★★★★★★★★★

어레이와 같은 개체를 실제 어레이로 변환하는 기술입니다.

이러한 오브젝트에는 다음이 포함됩니다.

• arguments 기능상
• Node List (가져온 후 콘텐츠가 변경될 수 있습니다!따라서 이들을 어레이로 변환하면 프리즈할 수 있습니다.)
• jQuery 컬렉션, jQuery 객체(일부 문서: API, 유형, 학습)

이는 여러 가지 용도로 사용됩니다. 예를 들어 오브젝트는 참조로 전달되고 어레이는 값으로 전달됩니다.

첫 번째 인수 「」, 「」에 해 주세요.0생략할 수 있습니다.자세한 설명은 이쪽입니다.

또한 완전성을 위해 jQuery.makeArray()도 있습니다.

요?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이치노
• 함수 제 now now now now nowslice를 호출하려면 , 그 「동행」을 .this를 매기다thisArg 것은 (어레이와 같은 )에서 나왔습니다.document.querySelector목록과 즉, 인수)를 사용합니다.start」가 포함되어 .0

: 2의 실행slice「」의 .call

• start는 변수 에 할당됩니다.s as ~하듯이0
• 부 이후end is 이undefined, , ,this.length장에 저장되다e
• an empty array will be stored in a variable 빈 배열은 변수에 저장됩니다.a

• 상기의 설정을 실시하면, 다음의 반복이 발생합니다.

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

• the filled up array 가득 찬 배열a결과적으로 반환될 것이다.결과적으로 반환됩니다.

---

추신: 시나리오를 보다 잘 이해하기 위해 콜 및 슬라이스의 원래 알고리즘에서 컨텍스트에 필요한 몇 가지 단계가 무시되었습니다.

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

1. querySelectorAll() 메서드는 지정된 셀렉터와 일치하는 문서 내의 모든 요소를 반환합니다.

2. call() 메서드는 이 값과 인수가 개별적으로 지정된 함수를 호출합니다.

3. slice() 메서드는 배열 내의 선택된 요소를 새 배열 개체로 반환합니다.

따라서 이 행은 [object HTMLDivElement]의 배열을 반환합니다.다음은 클래스 이름이 "slide"인 6개의 div이므로 배열 길이는 6이 됩니다.

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

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

ES6부터: Array.from(element.children) 또는 Array.from({length: 5})을 사용하여 어레이를 만듭니다.

2020년대에 우리는

[...document.querySelectorAll('.slide')]

or 니 다 합 용 가 을 요 상 는 해 에 각 할 용 만 터 it 용 is 사 이ion want for지 from 이제 각 for는 에서 반환된 컬렉션에서 작동하기 때문입니다.document.querySelectorAll('.slide')

이것도 도움이 될 거예요.

슬라이스법

설명:

slice does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array.

slice() 메서드는 어레이 부분의 얕은 복사본을 처음부터 끝까지 선택한 새 어레이 개체로 반환합니다(끝은 포함되지 않음). 여기서 start와 end는 해당 어레이 내의 항목의 인덱스를 나타냅니다.원래 배열은 변경되지 않습니다.자세한 내용은 참조/글로벌_오브젝트/어레이/슬라이스

호출 방식

설명:

call()을 사용하면 어떤 객체에 속하는 함수 또는 메서드를 할당하여 다른 객체에 호출할 수 있습니다.

call() 메서드는 지정된 값과 개별적으로 제공된 인수를 사용하여 함수를 호출합니다.call()은 이 값을 함수/메서드에 제공합니다.call()을 사용하면 메서드를 한 번 쓴 후 다른 오브젝트에 상속할 수 있습니다.새로운 오브젝트의 메서드를 다시 쓸 필요는 없습니다.

자세한 내용은 참조/Global_Objects/Function/call

언급URL : https://stackoverflow.com/questions/2125714/explanation-of-slice-call-in-javascript