Array.slice(start?: number, end?: number): T[];
const array = [1, 2, 3, 4, 5];
// 인자값을 넘기지 않으면 array배열을 반환한다.
// result : [1, 2, 3, 4, 5]
const result1 = array.slice();
// 인자값을 하나 넣으면 start로 지정되고 지정된 Index부터 마지막까지 반환한다.
// result : [3, 4, 5]
const result2 = array.slice(2);
// 인자값을 두개(모두) 넣으면 start 와 end가 지정된 배열을 반환한다.
// result : [2, 3]
const result3 = array.slice(1, 3);
Array.splice(start:number, deleteCount?: number): T[];
const array = [1, 2, 3, 4, 5];
// 인자값을 넘기지 않으면 빈배열을 반환한다.
// result : []
const result1 = array.splice();
const array = [1, 2, 3, 4, 5];
// 인자값을 하나 넣으면 start로 지정되고 지정된 Index부터 마지막까지 반환한다.
// result : [3, 4, 5]
const result2 = array.splice(2);
const array = [1, 2, 3, 4, 5];
// 인자값을 두개(모두) 넣으면 start 와 end가 지정된 배열을 반환한다.
// result : [2, 3, 4]
const result3 = array.splice(1, 3);
slice와 splice는 비슷한 기능을 수행하지만 위 코드를 보면 차이가 있는걸 확인할수 있다.
1. 인자값을 넘기지 않았을때의 반환되는 값
slice()는 대상 배열의 모든값을 반환하지만 splice()는 아무것도 반환하지 않는다.
2. 두번째 인자값의 처리방법
slice(), end?:number, 배열의 처음부터 index만큼 움직인다고 생각하면 된다. 또한 index항목의 값은 포함하지 않는다.
splice(), deleteCount?: number, 배열의 처음이 아닌 첫 인자(start: number)값을 기준으로 두번째 인자값 만큼의 배열값을 반환한다.
Array.slice(), Array.splice()는 처리 대상의 배열이 처리전과 처리후의 값이 다르다.
Array.slice()는 처리후에도 원래의 값을 유지하고 있는 반면 Array.splice()는 처리후 원래의 값이 변경된다.
Array.slice();
const array = [1, 2, 3, 4, 5];
// result : [4, 5]
// array : [1, 2, 3, 4, 5]
const result = array.slice(3);
Array.splice();
const array = [1, 2, 3, 4, 5];
// result : [4, 5]
// array : [1, 2, 3]
const result = array.splice(3);
어떤 처리를 하느냐에 따라 두 기능을 활용하면 될것같다.
// js
// 일반적인 이미지 변경 할경우
$('#banner').attr('src', '/image/bb.jpg');
// 같은이름의 이미지로 변경할 경우
$('#banner').attr('src', '/image/bb.jpg?param=123');