[javascript] 배열 내 특정 객체 값 제거하는 방법(splice 이용하기)

javascript 배열 splice이용하기

javascript 내에서 배열을 조작해야 되는 것 중 내가 원하는 값을 지우고 싶을 때가 있다.

이때 이용하는 것이 바로 splice()

 

✂ Array.splice()

배열 뒤 splice를 이용하면 기존 요소를 삭제하거나 교체하는 것이 가능하다.

 

array.splice(시작 index, 제거 index, 추가 요소)

 

시작 index

배열 변경을 시작할 index 번호를 입력한다. 

 

제거 index

0을 입력하면 어떤 요소도 제거되지 않으며, 특정수를 입력하면 start 이후부터 해당 수만큼 요소가 제거된다.

 

추가 요소

배열에 새로 추가될 요소가 들어간다. 만약 입력이 없다면 제거만 되고 새로운 요소는 추가되지 않는다.

 

---

샘플 코드

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(0,1); //applie 객체 삭제

obj.splice(1,1);//banana 객체 삭제

obj.splice(2,0);//아무일도 없음

 

위샘플코드 결과화면

샘플 코드를 보면 1번 경우는 index 0번에 있던 apple이 삭제되고

2번의 경우는 중 index 1번에 있던 바나나가 삭제

3번의 경우는 제거 index를 0으로 넣어서 아무런 일이 일어나지 않는다.

 

 

💡배열 내 새로운 객체 추가

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(3,0,{id:4, name:'melon'}); //index 4번에 melon 추가

샘플 코드 결과화면

마지막 3번째 인자에 추가 요소를 넣어주면 index 3번에 melon이 추가된다.

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(2,0,{id:4, name:'melon'}); //index 2번에 melon 추가, 기존 2번 peach 3번으로 밀림

샘플코드 결과화면

만약 시작 index를 2번으로 지정하면 peach가 4번으로 밀려난다.

 

 

 

🔎특정 id를 찾아서 삭제하기

하다 보면 특정 id를 찾아서 객체 내에서 삭제를 하고 싶은 경우가 있다.

그때 이용하면 좋은 코드

샘플 코드

function remove(id){

	let obj = [
		{id:1, name:'apple'},
		{id:2, name:'banana'},
		{id:3, name:'peach'}
	];

	obj.forEach((item, index)=> {
		if(item.id === id) {
		obj.splice(index, 1);
		}
	});
};

remove(3) //peach 삭제

샘플코드 결과화면

위 코드를 이용하면 간단히 특정 id 값을 체크해서 해당 객체 내에서 제거가 가능하다.👍