[JAVASCRIPT] Array 원소 삭제 - Object 원소, String 원소

 

 JavaScript의 Array 원소삭제 메소드가 따로없다보니 간편하게 쓸 수 있을 만한

함수를 만들보았습니다. 쉽게 찾을 수 있는 예제들을 간소화하는 데 중점을 두었습니다.

일반적으로 index를 찾고, splice함수를 통해 지우는 것과 같습니다.

마지막 단락에 String, Array 타입을 종합한 prototype 함수가 있으니,

원리를 알고계신 분은 맨 아래 단락만 참고하세요.

1. Stirng 타입 원소 예제

let fn_remove = function(arr, item)
{
  const idx = arr.indexOf(item) ;
  if (idx > -1) arr.splice(idx, 1);

  console.log(temp);
}

var temp = ['apple', 'banana', 'melon'];

fn_remove(temp, 'apple');

[실행결과]

* fn_remove 인자설명

• arr : 삭제 대상 배열
• item : 삭제 대상 원소값

2. Array 타입 원소 예제

let fn_removeObj = function(arr, key, value)
{
  const idx = arr.findIndex( item => { return item[key] === value });
  if (idx > -1) arr.splice(idx, 1);
  
  console.log(arr);
}
{
  data.push({
    FRUIT: "apple",
    PRICE: "1200",
    ORIGIN: "china",
  });
  data.push({
    FRUIT: "banana",
    PRICE: "2000",
    ORIGIN: "america",
  });
  data.push({
    FRUIT: "melon",
    PRICE: "1200",
    ORIGIN: "korea",
  });
  data.push({
    FRUIT: "tomato",
    PRICE: "4000",
    ORIGIN: "korea",
  });

  fn_removeObj(data, 'FRUIT', 'tomato');
}

[실행결과]

* fn_removeObj 인자설명

• arr : 삭제 대상 배열
• key : 삭제 대상 Object 원소의 Key값
• value : 삭제 대상 Object 원소의 Value값

3. Array 클래스에 Remove 프로토타입 함수 정의

 Object, String 타입 모두 호환되는 Prototype 함수를 정의합니다.

Array.prototype.remove = function(value, objKey)
{
	const ARR_STRING = 1;
	const ARR_OBJECT = 2;

	let idx = null;

	switch(arguments.length)
	{
		case ARR_STRING : idx = this.indexOf(value);    break;
		case ARR_OBJECT : idx = this.findIndex( item => { return item[objKey] === value });    break;
	}

	if (idx > -1) this.splice(idx, 1);

	console.log(this);
}

{
  let str_array = ['apple', 'banana', 'melon'];

  let obj_array = new Array();

  obj_array.push({
    FRUIT: "apple",
    PRICE: "1200",
    ORIGIN: "china",
  });
  obj_array.push({
    FRUIT: "banana",
    PRICE: "2000",
    ORIGIN: "america",
  });
  obj_array.push({
    FRUIT: "melon",
    PRICE: "1200",
    ORIGIN: "korea",
  });
  obj_array.push({
    FRUIT: "tomato",
    PRICE: "4000",
    ORIGIN: "korea",
  });

  str_array.remove('apple');
  obj_array.remove("banana", "FRUIT");
}

[실행결과]

* Array.protytype.remove 인자설명

• value : 배열 내에서 삭제 시 비교할 값
• objKey : 삭제원소가 Object인 경우 비교대상 Key값

arguments 값의 길이를 통해 삭제대상 Array의 원소 타입이 String인지 Object인지 판단합니다. 따라서 예제와 같이 인자의 개수에 따라 아래와 같은 동작을 수행합니다.

Array.remove('1')           // String 원소 제거

Array.remove('A', '1')         // Object 원소 제거