[JavaScript] 배열에서 중복제거 및 값 삭제

 

 

1. 배열 값 삭제

 

1.

let arr = ['a', 'b', 'c'];

// 배열 값 전체 삭제
arr = [];

console.log(arr.length);

 

배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해

새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다.

 

2.

let arr = ['a', 'b', 'c'];
let arr2 = arr;

// 배열 값 전체 삭제
arr.length = 0;

console.log(arr.length); // 0
document.writeln(arr2.length); // 0

 

배열의 길이 속성 값을 0으로 주면,

해당 배열은 길이 0의 빈 배열이 됩니다.

 

2.배열 첫번째 값 삭제

let arr = ['a', 'b', 'c'];

// 배열의 첫번째 값 삭제
arr.shift();

document.writeln(arr); // ['b', 'c']

 

shift() 함수를 사용하여 배열의 첫번째 값을 삭제하였습니다.

 

3.배열 뒤에서 값 삭제

1.

let arr = ['a', 'b', 'c', 'd'];

// 배열의 뒤에서 삭제하기
arr.length = 2;

document.writeln(arr); // ['a', 'b']

 

배열의 값 전체를 삭제할 때,

배열의 길이를 0으로 설정해 주었던 것과 마찬가지로,

배열의 뒤에서 값을 삭제하고 싶을 때는,

남겨두고 싶은 배열의 길이만큼 배열의 length 값을 설정해 줍니다.

 

2.

let arr = ['a', 'b', 'c', 'd'];

// 배열의 뒤에서 삭제하기
arr.pop();

document.writeln(arr); // ['a', 'b', 'c']

 

배열의 pop() 함수를 이용할 수도 있습니다.

 

 

4.특정 index 값 삭제

 

let arr = ['a', 'b', 'c', 'd'];

// index 1, index 2 삭제
arr.splice(1, 2);

document.writeln(arr); // ['a', 'd']

 

특정 index의 값을 삭제하기 위해서 splice() 함수를 사용하였습니다.

splice() 함수는 배열의 특정 위치에 값을 추가하거나 삭제할 때 사용하는 함수입니다.

여기서는 특정 값을 삭제하는데 사용하였습니다.

splice() 함수는 

첫번째 파라미터로 특정값을 추가하거나 삭제할 위치 index를 입력받습니다.

두번째 파라미터로 삭제할 원소의 개수를 입력받습니다.

세번째부터 입력받는 n개의 파라미터는 옵션인데, 추가할 원소를 입력 받습니다.

 

arr.splice(1, 2);

이 코드는 배열의 1번째 index부터 2개의 원소를 삭제합니다.

 

 

5 .특정  값 삭제

let arr = ['a', 'b', 'b', 'c'];

// 원소 'b' 삭제
for(let i = 0; i < arr.length; i++) {
  if(arr[i] === 'b')  {
    arr.splice(i, 1);
    i--;
  }
}

 

반복문과 조건문(if), splice() 함수를 이용하여 특정값을 삭제하는 코드입니다.

splice() 함수를 사용하면, 원본 배열의 원소가 삭제되고 배열의 길이가 변하기 때문에

splice() 함수를 사용해서 원소를 1개 삭제한 후에는,

배열의 index를 참조하는 i의 값을 하나 감소시킨 것(i--)에 주의하세요.

 

let arr = ['a', 'b', 'b', 'c'];

// 원소 'b' 삭제
let filtered 
  = arr.filter((element) => element !== 'b');

document.writeln(arr); // ['a', 'b', 'b', 'c']
document.writeln('<br>');
document.writeln(filtered); // ['a', 'c']

 

반복문을 사용하지 않고, filter() 함수를 사용할 수도 있습니다.

filter() 함수는 특정 조건에 부합하는 값만 모아서 새로운 배열을 만들어서 리턴합니다.

위 코드는 배열에서 'b' 값을 삭제하고 싶기 때문에,

배열 원소의 값이 'b'가 아닌 경우에만 해당 원소들을 가지고 새로운 배열을 만들었습니다.(filtered)

 

 

6 .중복  값 제거

1.

const dupArr = [1, 2, 3, 1, 2];

const set = new Set(dupArr);

const uniqueArr = [...set];

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

Javascript에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다.

Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다.

 

위의 예제에서는

 

const set = new Set(dupArr);

중복값이 있는 배열을 Set 객체로 만들어서 중복을 제거한 후,

 

const uniqueArr = [...set];

Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환하였습니다.

Set 객체를 배열로 변환할 때, Spread Operator 대신

Array.from() 또는 forEach() 문을 사용할 수도 있습니다.

 

2.

const dupArr = [1, 2, 3, 1, 2];

const uniqueArr = dupArr.filter((element, index) => {
    return dupArr.indexOf(element) === index;
});

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

 

indexOf() 함수는, 배열에서 특정값이 처음으로 나타나는 index를 리턴합니다.

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다.

이 두 함수를 사용하여 배열에 중복된 값을 제거 할 수 있습니다.

 

위 예제에서

 

dupArr.filter(callback);

filter() 함수는

dupArr의 원소들을 callback 함수로 전달하여 

각 원소들이 callback 함수에 정의된 기준에 부합하는지 검사하고,

검사 결과가 true를 리턴하는 원소을 모아서 배열 형태로 리턴(uniqueArr) 합니다.

 

dupArr.indexOf(element) === index;

filter() 함수로 전달 된 callback 함수는

검사하고 있는 값(element)이 배열(dupArr)에서 가장 처음으로 나타는 index와

검사하고 있는 원소의 index와 비교하여

같을 경우에만 true를 리턴합니다.

위의 예제에서 dupArr의 값이 순서대로 전달되면

'dupArr.indexOf(element) === index' 구문은

true, true, true, false, false 를 순서대로 리턴하여

중복되는 값이 첫번째로 나타나는 경우에만 filter 함수에서 걸러지도록 하였습니다.

 

3.

const dupArr = [1, 2, 3, 1, 2];

let uniqueArr = [];
dupArr.forEach((element) => {
    if (!uniqueArr.includes(element)) {
        uniqueArr.push(element);
    }
});

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

forEach() 함수는 주어진 배열을 순회하면서, 배열의 원소들로 주어진 callback함수를 실행합니다.

include() 함수는 주어진 배열에 특정 값이 포함되는지 여부를 검사합니다.

 

위 예제는

 

dupArr.forEach(callback);

dupArr(중복이 있는 배열)을 순회하면서

 

if (!uniqueArr.includes(element))

uniqueArr(중복이 없는 배열)이 배열의 원소를 가지고 있지 않다면,

 

uniqueArr.push(element)

uniqueArr에 배열의 원소를 집어 넣어줍니다.

 

 

출처 1 : https://hianna.tistory.com/422

출처 2 : https://hianna.tistory.com/489