slice

이재진·2020년 7월 26일
0

array 객체 일 경우

var a = [1, 2, 3];

a.slice(1); // 하나를 짜름. 개수 만큼의 값을 제외한 새로운 배열 을 리턴.
-> [2, 3]

a.slice(2);
-> [3]

a
->[1, 2, 3]; // 기존 배열은 그대로

array like 객체가 와도 slice를 활용 하는 방법은?

document.querySelectorAll('*')
NodeList(334) [html.inited, head, link, link, link, link, link, link, link, meta, script, script, script, script, script, script, 

var a = document.querySelectorAll('*')
undefined

a.slice
undefined

a.slice(1)
VM244:1 Uncaught TypeError: a.slice is not a function

a
NodeList(334) [html.inited, head, link, link, link, link, link, link, link, meta, script, script, script, script, script, script, script, script, meta, meta, meta, style, script, script, link, body.light-chip.win, div#custom-bg, div#custom-bg-preview, div#one-
  
var slice = Array.prototype.slice;
undefined
  
slice.call(a, 3);//slice실행을 call을 통해 하면서 a를 this로 사용. 
원하는 만큼 숫자를 준다.
(331) [link, link, link, link, link, link, meta, script, script, script, script, script, script, script, script, meta, meta, meta, 
       //결과적으로 앞에 숫자만큼 잘린 array로 변환된 새로운 복사된 
       //객체를 리턴하게 된다.
       
slice.call(a, 3).constructor
ƒ Array() { [native code] }
----------------------------------------------

또다른 예로 임의로 만든 array like 객체를 가정.

var a = { 0: 1, 1: 20, 2: 30, length: 3 };
undefined

a
{0: 1, 1: 20, 2: 30, length: 3}0: 11: 202: 30length: 3
__proto__: Object

a[0]
1

a[1]
20

a[2]
30

slice.call(a, 1);
(2) [20, 30]
-----------------------------------------------

이 기법을 이용하면 arguments 객체, 제이쿼리객체나 , nodelist 
나 다양한 array like 객체를 slice를 이용하여 사용 가능하게된다. 


profile
개발블로그

0개의 댓글