JavaScript의 배열 함수 마스터하기: 슬라이스, 스플라이스 및 forEach

JavaScript의 배열 함수: Slice, Splice 및 forEach

JavaScript 배열에는 배열 요소를 조작하고 상호 작용하는 데 도움이 되는 내장 메소드 세트가 함께 제공됩니다. 일반적으로 사용되는 세 가지 배열 방법은 slice, splice 및 forEach입니다. 이러한 방법을 사용하면 깔끔하고 효율적인 방식으로 어레이 작업 능력을 크게 향상시킬 수 있습니다.

1. slice() 메소드

slice() 메서드는 원본 배열을 수정하지 않고 배열의 일부를 추출하는 데 사용됩니다. 배열 일부의 얕은 복사본을 생성하고 새 배열을 반환합니다.

구문:

array.slice(start, end);

• start: 추출을 시작할 인덱스입니다. 이 인덱스의 요소가 포함되어 있습니다.
• end: 추출을 종료할 인덱스입니다(포함되지 않음). 생략하면 배열 끝까지 잘립니다.

예:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• 이 예에서 arr.slice(1, 3)은 인덱스 1에서 시작하여 인덱스 3 바로 앞에서 끝나는 새 배열을 반환합니다.

end 인수가 생략되면, Slice()는 시작 인덱스부터 배열 끝까지 모든 것을 복사합니다.

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

음수 지수:

음수 인덱스를 사용하여 배열 끝에서 잘라낼 수도 있습니다.

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

2. splice() 메소드

splice() 메서드는 요소를 추가하거나 제거하여 배열을 수정하는 데 사용됩니다. 원래 배열을 변경하고 특정 인덱스에 항목을 삽입하거나 제거하는 데 사용할 수 있습니다.

구문:

array.splice(start, deleteCount, item1, item2, ..., itemN);

• start: 배열 변경을 시작할 인덱스입니다.
• deleteCount: 시작 인덱스부터 제거할 요소 수
• item1, item2, ..., itemN: 시작 인덱스부터 시작하여 배열에 추가할 요소입니다.

예:

const arr = [1, 2, 3, 4, 5];

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

console.log(arr);  // Output: [1, 2, 5]
console.log(removedElements);  // Output: [3, 4]

• 이 예에서 arr.splice(2, 2)는 인덱스 2(3과 4)에서 시작하는 2개의 요소를 제거합니다.

splice()를 사용하여 배열에 요소를 추가할 수도 있습니다.

const arr = [1, 2, 3, 4, 5];

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

console.log(arr);  // Output: [1, 2, 6, 7, 3, 4, 5]

• 여기서 arr.splice(2, 0, 6, 7)는 요소를 제거하지 않고 인덱스 2에 6과 7을 삽입합니다(deleteCount는 0입니다).

함께 제거하고 추가:

splice()를 사용하여 한 번의 작업으로 요소를 제거하고 추가할 수도 있습니다.

array.slice(start, end);

3. forEach() 메소드

forEach() 메서드는 배열의 요소를 반복하고 각 요소에 함수를 적용하는 데 사용됩니다. map() 또는 filter()와 달리 forEach()는 새 배열을 반환하지 않습니다. 단순히 각 요소에 대해 주어진 기능을 실행합니다.

구문:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• 콜백: 각 요소에 대해 실행되는 함수입니다.
  • currentValue: 배열에서 현재 처리 중인 요소입니다.
  • index: 현재 요소의 인덱스
  • array: forEach가 호출되는 배열입니다.

예:

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

화살표 기능 사용:

화살표 기능을 사용하여 코드를 더 간결하게 만들 수도 있습니다.

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

배열 요소 수정:

forEach()는 배열을 반환하거나 수정하는 것이 아니라 부작용(예: 값 로깅 또는 업데이트)을 수행하는 데 사용된다는 점을 명심하세요. 기존 배열을 기반으로 새 배열이 필요한 경우 map() 사용을 고려해 보세요.

array.splice(start, deleteCount, item1, item2, ..., itemN);

슬라이스, 스플라이스, forEach 비교

Method	Purpose	Mutates Original Array	Returns Value
slice	Extracts a portion of an array without modifying it	No	A new array (shallow copy)
splice	Adds/removes elements at specific positions in array	Yes	The removed elements (array)
forEach	Executes a function on each array element	No	undefined

결론

• slice()는 원본 배열을 수정하지 않고 배열의 일부를 추출하는 데 적합합니다.
• splice()를 사용하면 배열의 요소를 제거, 교체 또는 추가할 수 있으며 원본 배열을 수정합니다.
• forEach()는 배열 요소를 반복하고 부작용을 수행하는 데 이상적이지만 새 배열을 반환하지는 않습니다.

이러한 메소드는 JavaScript에서 배열로 작업할 때 필수적인 도구이며 코드를 더 효율적이고 읽기 쉽게 만들 수 있습니다.

---

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
내 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락해주세요.

위 내용은 JavaScript의 배열 함수 마스터하기: 슬라이스, 스플라이스 및 forEach의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!