javascript : 배열 원소 추가, 삭제 방법 - delete, unshift, shift, pop, splice, slice

자바스크립트 배열 원소 삭제 방법 - delete, shift, pop, splice

delete

 

배열 항목에서 요소를 undefined 로 만든다.(delete 한다고 하여 요소가 삭제되는 것이 아님 아님!! 주의 : 크기는 그대로 3개)

var arr = [];

arr.push(1);

arr.push(2);

arr.push(3);

 

console.log(arr);

delete arr[1];

console.log(arr);

결과

 

---

shift  

배열에서 첫번째 요소를 제거하고 반환한다. -> 배열 항목에서 요소가 삭제됨

unshift : 첫번째 요소로 추가

 

var arr = [];

arr.push(1);

arr.push(2);

arr.push(3);

 

arr.shift();

 

console.log(arr); 

결과

 

---

pop

배열에서 마지막 요소를 제거하고 반환한다. -> 배열 항목에서 요소가 삭제됨 

push는 추가

 

var arr = [];

arr.push(1);

arr.push(2);

arr.push(3);

 

arr.pop();

 

console.log(arr);

 

---

splice  (실제 요소 갯수가 줄어듬)

splice(start, dleeteCount, elem1...);

 

start에서 시작해 deleteCount 만큼 제거한 후 지정된 요소를 삽입하나, elem... 인자를 입력하지 않으면 삭제만 된다.

var arr = [];

arr.push(1);

arr.push(2);

arr.push(3);

arr.push(4);

arr.push(5);

 

arr.splice(2, 2);

 

console.log(arr);

 

결과

그런데 splice( index ,0   ,    )  0 이 오면 

 splice(1,0, 7,7,7);  을 쓰면 1번지에서 부터 숫자 7,7,7 을 추가하겠다는 뜻이 됨

var ku = [0,1,2,3,4];
 
ku.splice(1,0,7,7,7);
 

//결과
ku
 
(8) [0, 7, 7, 7, 1, 2, 3, 4]

 

그렇다면 splice( index , 지울 개수, 추가 원소) ?  의 경우에는?

var ku = [0,1,2,3,4];
 
ku.splice(1,1,7,5);
 
//결과
ku
 
(6) [0, 7, 5, 2, 3, 4]
 
 

1 번지 부터 1개 지운 다음 7,5 를 추가 한다

slice

 ku.slice( 시작 인덱스,  포함되지 않는 끝 인덱스 )  에 해당 하는 배열을 생성해 리턴한다

Slice 구문

stringObj.slice(start, [end]) 

매개 변수

stringObj

필수 요소. String 개체 또는 문자열 리터럴입니다.

start

필수 요소. stringObj에 지정된 부분의 시작을 나타내는 인덱스입니다.

end

선택 사항입니다. stringObj에 지정된 부분의 끝을 나타내는 인덱스입니다.부분 문자열은 end로 표시된 문자 앞까지만 포함합니다.이 값을 지정하지 않으면 stringObj의 끝까지 부분 문자열이 계속됩니다.

설명

slice 메서드는 stringObj의 지정된 부분을 포함하는 String 개체를 반환합니다.

slice 메서드는 end로 표시된 문자 앞까지만 복사하고 해당 문자는 포함하지 않습니다.

start가 음수이면 length + start로 처리됩니다. 여기서 length는 배열의 길이입니다. end가 음수이면 length + end로 처리되고, end를 생략하면 stringObj의 끝까지 계속 복사됩니다. end가 start 앞에 나오면 새로운 문자열에 아무 문자도 복사되지 않습니다.

첫 번째 예제에서 slice 메서드는 전체 문자열을 반환합니다.두 번째 예제에서 slice 메서드는 마지막 문자를 제외하고 전체 문자열을 반환합니다.

var str1 = "all good boys do fine";

var slice1 = str1.slice(0);
var slice2 = str1.slice(0,-1);
var slice3 = str1.slice(4);
var slice4 = str1.slice(4, 8);

document.write(slice1 + "<br/>");
document.write(slice2 + "<br/>");
document.write(slice3 + "<br/>");
document.write(slice4);

// Output:
// all good boys do fine
// all good boys do fin
// good boys do fine
// good

ref : https://msdn.microsoft.com/ko-kr/library/6w1bzf9f(v=vs.94).aspx

ref : https://jissp.com/board/view/1/8/65 및 일부 편집