javascript

Javascript slice()문법

유니유뉘 2023. 2. 24. 11:12
728x90

Javascript slice() 문법이란?

slice()문법에 대해서

배열의 일부분을 복사하여 새로운 배열을 반환한다.

array.slice( start , end )
  • ‘start’ 매개변수는 복사할 배열의 시작 인덱스이며, ‘end’매개변수는 복사를 중지할 인덱스이다.
  • ‘end’ 매개변수는 생략 가능하며, 생략하면 배열의 끝까지 복사한다.
  • slice()메서드는 원본 배열을 변경하지 않는다.

예시)

const fruits = ['apple','banana','orange','melon','kiwi'];

여기서 첫 번째 요소(apple)와 두번째 요소를(banana) 복사하고 싶을 때 slice()메서드를 사용할 수 있다.

const slicedFruits = fruits.slice(0,2);
console.log(slicedFruits );
//['apple','banana']

이렇게 sliceFruits배열에는 apple과 banana만 포함되고 fruits배열은 변경되지 않는다.

slice() 이용하기

  1. 배열의 일부분 추출하기 
    const numbers = [1,2,3,4,5];

const sliceNumbers = numbers.slice(1,4);
console.log(sliceNumbers);
//[2,3,4]
    가장 일반적으로 사용한다.
  2. 배열의 복사본 만들기 
    const originalArray = [1,2,3,4,5];

const copiedArray = originalArray.slice();
console.log(copiedArray);
//[1,2,3,4,5]
    copiedArray는 originalArray와 동일한 요소를 가진 새로운 배열이 된다.그래서 copiedArray(복사)를 수정해도 originalArray(원본)는 변경되지 않는다. 원본 배열의 일부분을 복사하여 새로운 배열을 만들 수 있다. 이를 이용하면 원본 배열을 변경하지 않고 배열을 조작할 수 있다.
  3. 문자열 일부 추출하기 
    const sentence = "The quick brown fox jumps over the lazy dog.";

const sliceSentence = sentence.slice(0,9);
console.log(sliceSentence);
//'The quick'
    여기 또한 sentence는 변경되지 않는다. 문자열에서 일부분을 추출할 수 있다.
  4. 배열의 마지막 요소 추출하기 
    const numbers = [1,2,3,4,5];

const lastNumber = numbers.slice(-1)[0];
console.log(lastNumber);
//5

      slice()메서드는 -1은 인덱스로 사용하여 마지막 요소를 추출하고 [0]를 입력해 새로운 배열의 첫 번째 요소를 반환한다.

      이렇게 slice()메서드는 배열과 문자열을 다룰 때 아주 유용하다.

 

slice() 응용하기 - 중복된 요소 제거하기

indexOf()메서드는 배열에서 특정 요소의 인덱스를 반환하며, filter()메서드는 배열에서 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 만든다.

이 때 indexOf()메서드와 filter()메서드를 함께 사용하여 중복된 요소를 제거할 수 있다.

const numbers = [1,2,3,2,4,3,5];
const uniqueNumbers = numbers.filter((value,index,self)=>{return self.indexOf(value)===index});

console.log(uniqueNumbers);
//[1,2,3,4,5]
  • value : 배열의 각 요소의 값
  • index : 배열의 각 요소의 인덱스
  • self : 현재 배열

numbers 배열에서 중복된 요소를 제거하여 uniqueNumber 배열에 저장한다.

filter()메서드는 콜백 함수를 전달하여 중복된 요소를 제거한다.

‘self.indexOf(value)’를 이용하여 현재 요소의 인덱스를 검색하고, 이 값과 현재 인덱스가 같은 경우 새로운 배열을 추가한다.

*하지만 이 방법은 추가적인 배열을 만들어내기 때문에 데이터가 큰 경우라면 다른 방법을 택해야한다.

반응형