JavaScript 내장 메서드는 프로그래밍하는 동안 우리가 올바르게 이해하면 많은 도움이됩니다. 이 기사에서는 slice(), splice()및 split()방법의 세 가지를 설명하고 싶습니다 . 아마도 그들의 이름이 너무 비슷하기 때문에 경험 많은 개발자들 사이에서도 종종 혼란 스러울 것입니다.
이 세 가지 방법은 JOB INTERVIEWS에서도 질문 할 수 있기 때문에 학생 및 주니어 개발자에게이 기사를주의 깊게 읽으라고 조언합니다.
결국 각 방법에 대한 요약을 찾을 수 있습니다. 원하는 경우 아래 비디오 버전을 시청할 수도 있습니다.
그럼 시작하겠습니다 ...
자바 스크립트 배열
첫째, JavaScript 배열의 작동 방식을 이해해야합니다 . 다른 프로그래밍 언어와 마찬가지로 배열을 사용하여 JS에 여러 데이터를 저장합니다. 그러나 차이점은 JS 배열은 한 번에 다른 유형의 데이터를 포함 할 수 있다는 것 입니다.
때때로 우리는 그러한 배열에서 작업을해야합니다. 그런 다음 slice () 및 splice () 와 같은 일부 JS 메서드를 사용 합니다. 아래에서 JavaScript에서 배열을 선언하는 방법을 볼 수 있습니다.
let arrayDefinition = []; // Array declaration in JS
이제 데이터 유형이 다른 또 다른 배열을 선언 해 보겠습니다. 아래 예제에서 사용하겠습니다.
let array = [1, 2, 3, "hello world", 4.12, true];
이 사용법은 JavaScript에서 유효합니다 . 데이터 유형이 다른 배열 : 문자열, 숫자 및 부울.
슬라이스 ()
슬라이스 () 메소드 복사본 새로운 배열로 부분을 복사 배열 복귀의 소정 부분. 원래 배열을 변경하지 않습니다.
array.slice(from, until);
- From : 요소 인덱스 에서 시작하는 배열 슬라이스
- 종료 : 다른 요소 인덱스 까지 배열 슬라이스
예를 들어 위의 배열에서 처음 세 요소를 슬라이스하고 싶습니다. 배열의 첫 번째 요소는 항상 0에서 인덱싱되므로 0에서 "부터" 슬라이스를 시작 합니다.
array.slice(0, until);
이제 까다로운 부분이 있습니다. 처음 세 요소를 슬라이스하려면 until 매개 변수를 3으로 지정 해야합니다 . slice () 메서드는 마지막으로 주어진 요소를 포함하지 않습니다.
array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included이것은 약간의 혼란을 야기 할 수 있습니다. 이것이 제가 두 번째 매개 변수를 "까지" 라고 부르는 이유 입니다.
let newArray = array.slice(0, 3); // Return value is also an array
마지막으로 슬라이스 배열을 newArray 변수에 할당합니다 . 이제 결과를 보겠습니다.
중요 참고 : Slice () 메서드는 문자열 에도 사용할 수 있습니다.스플 라이스 ()
이 함수의 이름은 slice () 와 매우 유사합니다 . 이러한 이름의 유사성은 종종 개발자를 혼란스럽게합니다. 접합부 () 메소드는 변경 추가하거나로부터 요소를 제거함으로써, 어레이. splice ( )를 사용 하여 요소를 추가하고 제거하는 방법을 살펴 보겠습니다 .
요소 제거
요소를 제거하려면 index 매개 변수와 제거 할 요소 의 수 를 제공해야합니다 .
array.splice(index, number of elements);
인덱스 는요소 제거를위한 시작점 입니다. 지정된 색인에서 색인 번호가 더 작은 요소는제거되지 않습니다.
array.splice(2); // Every element starting from index 2, will be removed
두 번째 매개 변수를 정의하지 않으면 주어진 인덱스에서 시작하는 모든 요소가 배열에서 제거됩니다.
두 번째 예제로 두 번째 매개 변수를 1로 지정하므로 splice () 메서드를 호출 할 때마다 인덱스 2에서 시작하는 요소가 하나씩 제거됩니다 .
array.splice(2, 1);
첫 번째 통화 후 :
두 번째 통화 후 :
더 이상 인덱스 2가 없을 때까지 계속할 수 있습니다.
요소 추가
요소를 추가하려면 스플 라이스 () 메서드에 3 번째, 4 번째, 5 번째 매개 변수 (추가 할 개수에 따라 다름)로 지정해야합니다 .
array.splice (인덱스, 요소 수, 요소, 요소);
예를 들어, 배열의 맨 처음에 a 와 b 를 추가 하고 아무것도 제거하지 않습니다.
array.splice(0, 0, 'a', 'b');
분할 ()
Slice () 및 splice () 메서드는 배열 용입니다. 분할 () 메소드는 사용되는 스트링 . 문자열을 하위 문자열로 나누고 배열로 반환합니다. 2 개의 매개 변수가 필요하며 둘 다 선택 사항입니다.
string.split(separator, limit);
- 구분자 : 쉼표, 문자 등으로 문자열을 분할하는 방법을 정의합니다.
- 제한 : 주어진 수로 분할 수를 제한합니다 .
분할 () 메소드는 직접 작동하지 않습니다 배열 . 그러나 먼저 배열의 요소를 문자열로 변환 한 다음 split () 메서드를 사용할 수 있습니다 .
어떻게 작동하는지 봅시다.
먼저 toString () 메서드 를 사용하여 배열을 문자열로 변환합니다 .
let myString = array.toString();
이제 myString 을 쉼표로 분할 하고 세 개의 하위 문자열 로 제한 한 다음 배열로 반환 하겠습니다 .
let newArray = myString.split(",", 3);
보시다시피 myString 은 쉼표로 나뉩니다. 분할을 3으로 제한하므로 처음 3 개의 요소 만 반환됩니다.
참고 :array.split(""); 다음과 같은 사용법이있는 경우 문자열의 각 문자는 하위 문자열로 나뉩니다.
요약:
슬라이스 ()
- 배열에서 요소를 복사합니다.
- 새로운 배열로 반환
- 원래 배열을 변경하지 않습니다.
- 주어진 인덱스까지…부터 슬라이스 시작 : array.slice (from, until)
- 슬라이스에 "까지" 인덱스 매개 변수가 포함되지 않음
- 배열과 문자열 모두에 사용할 수 있습니다.
스플 라이스 ()
- 배열에서 요소 추가 / 제거에 사용
- 제거 된 요소의 배열을 반환합니다.
- 배열 변경
- 요소 추가 : array.splice (인덱스, 요소 수, 요소)
- 요소 제거 : array.splice (인덱스, 요소 수)
- 배열에만 사용할 수 있습니다.
분할 ()
- 문자열을 하위 문자열로 나눕니다.
- 배열로 반환
- 두 개의 매개 변수를 사용하며 둘 다 선택 사항입니다. string.split (separator, limit)
- 원래 문자열을 변경하지 않습니다.
- 문자열에만 사용할 수 있습니다.
JavaScript 배열 및 문자열에 대한 다른 많은 내장 메서드가있어 JavaScript 프로그래밍 작업을 더 쉽게 할 수 있습니다. 다음으로, JavaScript Substring Methods에 대한 저의 새로운 기사를 확인할 수 있습니다.
웹 개발에 대해 더 알고 싶다면 유튜브에서 저 를 따라 오세요 !
읽어 주셔서 감사합니다!