반응형
자바스크립트 배열 자르기 (slice, splice)
자바스크립트 배열자르는 함수 slice, splice 에 대해 정리한다.
그리고 둘의 차이점도 한번 살펴 보자.
1. slice()
slice는 배열의 인자로 받는 "시작index"부터 "끝index"까지 자른 복사본을 리턴 한다.
특징 : 원본의 배열 값은 바뀌지 않는다.
구문
arr.slice([시작값],[끝값])
사용 예 )
let arr = ['땅','불','바람','물','마음'];
let sliceArr1 = arr.slice(2); // (3) ['바람', '물', '마음']
let sliceArr2 = arr.slice(2, 4); // (2) ['바람', '물']
let sliceArr3 = arr.slice(1,4);// (3) ['불', '바람', '물']
let sliceArr4 = arr.slice(-2); // (2) ['물', '마음']
let sliceArr5 = arr.slice(2, -1); // (2) ['바람', '물']
let sliceArr6 = arr.slice(); // (5) ['땅', '불', '바람', '물', '마음']
2) splice()
배열의 원본 요소를 삭제 또는 변경시에 사용한다.
slice에 비교해서 조금 더 난이도가 있으나, 정신 단디 차리고 보면 별것없으니 확인해보자.
구문
splice( [시작인덱스],[삭제갯수],[배열추가요소...] )
사용 예1)
나는 [바람] 만 삭제 하고 싶은데 ??
let arr = ['땅','불','바람','물','마음'];
let result = arr.splice(2,1);
console.log( arr ); // (4) ['땅', '불', '물', '마음']
console.log( result ); // ['바람']
사용 예2)
나는 [바람] 뒤에 [믿음],[사랑] 을 추가 하고 싶어!!
let arr = ['땅','불','바람','물','마음'];
let result = arr.splice(3,0,'믿음','사랑');
console.log( arr ); // (7) ['땅', '불', '바람', '믿음', '사랑', '물', '마음']
console.log( result ); // []
사용 예3 )
[물,마음]을 지우고 뒤에 [책, 거울] 을 추가 하고 싶어 !!
let arr = ['땅','불','바람','물','마음'];
let result = arr.splice(3,2,'책','거울');
console.log( arr ); // (5) ['땅', '불', '바람', '책', '거울']
console.log( result ); // (2) ['물', '마음']
시작값은 음수값도 적용이 될까??
- 배열의 맨뒤에서 부터 시작값이 적용된다.
let arr = ['땅','불','바람','물','마음'];
let result = arr.splice(-2,2);
console.log( arr ); // (3) ['땅', '불', '바람']
console.log( result ); // (2) ['물', '마음']
자바스크립트 문자열이 포함되어 있는지 체크 ( includes )
자바스크립트 문자열자르기,합치기 ( Array join, split ) 초간단 사용방법
'Script > Javascript' 카테고리의 다른 글
자바스크립트 localStorage, sessionStorage 사용방법 (0) | 2022.04.18 |
---|---|
javascript html문서로드 후 이벤트 발생 (0) | 2022.04.18 |
자바스크립트 원하는 문자열 추출 (substring, substr ) (0) | 2022.03.16 |
javascript each, forEach, for-of, for-in 초간단 사용방법 (0) | 2022.03.15 |
javascript 테스트 사이트 (0) | 2022.03.14 |
댓글