기술나눔

JavaScript 배열의 일반적인 방법에 대한 자세한 튜토리얼

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

JavaScript에서 배열은 여러 값을 저장하는 데 사용되는 매우 중요한 데이터 구조입니다. JS는 배열을 조작하는 다양한 내장 메서드를 제공하여 데이터 처리를 더 쉽고 효율적으로 만듭니다. 이번 글에서는 일상적인 개발에서 자주 사용되는 자바스크립트 배열 메소드에 대해 자세히 소개하겠습니다. 이제 인터뷰에서 중점적으로 다루겠습니다~

1. 푸시()와 팝()

푸시()

push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 새 배열의 길이를 반환합니다.

  1. let arr = [1, 2, 3];
  2. let newLength = arr.push(4, 5); // newLength is 5, arr is [1, 2, 3, 4, 5]

매개변수: 배열 끝에 추가할 하나 이상의 요소입니다.

반환 값: 새 배열의 길이입니다.

팝()

pop() 메서드는 배열 끝에서 요소를 제거하고 해당 요소를 반환합니다.

  1. let arr = [1, 2, 3, 4];
  2. let removedElement = arr.pop(); // removedElement is 4, arr is [1, 2, 3]

매개변수: 없음.

반환 값: 삭제된 요소입니다.

2. Shift() 및 unshift()

옮기다()

Shift() 메서드는 배열 시작 부분의 요소를 삭제하고 해당 요소를 반환하는 데 사용됩니다.

  1. let arr = [1, 2, 3, 4];
  2. let removedElement = arr.shift(); // removedElement is 1, arr is [2, 3, 4]

매개변수: 없음.

반환 값: 삭제된 요소입니다.

언시프트()

unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 배열의 길이를 반환합니다.

  1. let arr = [2, 3, 4];
  2. let newLength = arr.unshift(0, 1); // newLength is 5, arr is [0, 1, 2, 3, 4]

매개변수: 배열의 시작 부분에 추가할 하나 이상의 요소입니다.

반환 값: 새 배열의 길이입니다.

3. 슬라이스()와 스플라이스()

일부분()

Slice() 메서드는 처음부터 끝까지(제외) 선택된 새 배열을 반환하는 데 사용됩니다. 원래 배열은 수정되지 않습니다.

  1. let arr = [1, 2, 3, 4, 5];
  2. let newArr = arr.slice(1, 3); // newArr is [2, 3], arr is [1, 2, 3, 4, 5]

매개변수:

시작하다(선택 사항): 이 인덱스에서 추출(및 포함)을 시작합니다.

(선택 사항): 이 인덱스 이전(포함하지 않음) 추출을 종료합니다.

반환 값:

from을 포함하는 새로운 배열 시작하다 도착하다(을 제외한 )강요.

접착()

접착() 메서드는 기존 요소를 제거 또는 교체하거나 새 요소를 추가하여 배열의 내용을 수정하는 데 사용됩니다. 반환 값은 삭제된 요소입니다.

  1. let arr = [1, 2, 3, 4, 5];
  2. let removedElements = arr.splice(2, 2, 6, 7); // removedElements is [3, 4], arr is [1, 2, 6, 7, 5]

매개변수:

시작: 수정 시작 위치를 지정합니다.

삭제 개수(선택 사항): 제거할 요소 수를 나타내는 정수입니다.

항목1, 항목2, ...(선택 사항): 배열에 추가할 새 요소입니다.

반환 값: 삭제된 요소가 포함된 배열입니다.

4. 연결()

연결() 두 개 이상의 배열을 병합하는 데 사용되는 방법입니다. 이 메서드는 기존 배열을 변경하지 않고 새 배열을 반환합니다.

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  3. let newArr = arr1.concat(arr2, [7, 8]); // newArr is [1, 2, 3, 4, 5, 6, 7, 8]

매개변수: 현재 배열에 병합할 배열 또는 값입니다.

반환 값: 새로운 배열.

5. forEach()

각각() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

  1. let arr = [1, 2, 3, 4];
  2. arr.forEach((element, index) => {
  3. console.log(`Element at index ${index} is ${element}`);
  4. });
  5. // Output:
  6. // Element at index 0 is 1
  7. // Element at index 1 is 2
  8. // Element at index 2 is 3
  9. // Element at index 3 is 4

매개변수: 현재 요소, 요소 인덱스, 배열 자체를 매개변수로 받아들이는 함수입니다.

반환 값: 없음.

6. 맵()

지도() 이 메서드는 배열의 각 요소가 제공된 함수에 대한 호출의 반환 값이 되는 결과를 갖는 새 배열을 만듭니다.

  1. let arr = [1, 2, 3, 4];
  2. let newArr = arr.map(element => element * 2); // newArr is [2, 4, 6, 8]

매개변수: 현재 요소, 요소 인덱스, 배열 자체를 매개변수로 받아들이는 함수입니다.

반환 값: 새로운 배열.

7. 필터()

필터() 메소드는 제공된 함수에 의해 구현된 테스트의 모든 요소를 ​​포함하는 새 배열을 만듭니다.

  1. let arr = [1, 2, 3, 4, 5];
  2. let newArr = arr.filter(element => element > 2); // newArr is [3, 4, 5]

매개변수: 현재 요소, 요소 인덱스, 배열 자체를 매개변수로 받아들이고 Boolean 값을 반환하는 함수입니다.

반환 값: 새로운 배열.

8. 줄이기()

줄이다() 이 메서드는 배열의 각 요소에 대해 제공한 감소기 함수(오름차순)를 실행하여 결과를 단일 반환 값으로 요약합니다.

  1. let arr = [1, 2, 3, 4];
  2. let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10

매개변수:감속기 누산기와 현재 값을 인수로 받아들이는 함수입니다.

초기 값(선택): 콜백 함수를 처음 호출할 때 첫 번째 매개변수의 값으로 사용합니다.

반환 값: 누적된 결과입니다.

9. 찾기()

찾다() 이 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소 값을 반환합니다.그렇지 않으면 반환한정되지 않은

  1. let arr = [1, 2, 3, 4];
  2. let foundElement = arr.find(element => element > 2); // foundElement is 3

매개변수: 현재 요소, 요소 인덱스, 배열 자체를 매개변수로 받아들이고 Boolean 값을 반환하는 함수입니다.

반환 값: 테스트를 통과한 첫 번째 요소 값입니다.

10. 포함()

포함() 이 메서드는 배열에 지정된 값이 포함되어 있는지 확인하는 데 사용됩니다. 상황에 따라 포함된 경우 반환됩니다.진실, 그렇지 않으면 반환 거짓

  1. let arr = [1, 2, 3, 4];
  2. let hasElement = arr.includes(3); // hasElement is true
  3. let notIncluded = arr.includes(5); // notIncluded is false

매개변수:

찾을 값: 찾을 요소 값입니다.

인덱스에서(선택 사항): 이 인덱스에서 검색을 시작합니다.

반환 값: 부울 값.

이러한 일반적인 JavaScript 배열 방법을 학습함으로써 백엔드에서 전달된 데이터를 보다 효율적으로 처리하고 보다 간결하고 읽기 쉬운 코드를 작성할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!