>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 - 배열 메소드

자바스크립트 - 배열 메소드

Mary-Kate Olsen
Mary-Kate Olsen원래의
2025-01-23 16:33:09800검색

Javascript - Array methods

자바스크립트 배열 방식에 대한 자세한 설명

이 글에서는 요소 추가 및 삭제, 검색, 변환, 정렬, 조합 및 반복 등 JavaScript에서 일반적으로 사용되는 배열 방법을 살펴보고 이러한 방법을 더 잘 이해하고 적용하는 데 도움이 되는 코드 예제를 제공합니다.

1. 요소 추가 및 삭제

  • push(): 배열 끝에 요소를 추가합니다.
<code class="language-javascript">let fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits); // Output: ["apple", "banana", "cherry"]</code>
  • pop(): 배열의 마지막 요소를 삭제합니다.
<code class="language-javascript">fruits.pop();
console.log(fruits); // Output: ["apple", "banana"]</code>
  • unshift(): 배열의 시작 부분에 요소를 추가합니다.
<code class="language-javascript">fruits.unshift("mango");
console.log(fruits); // Output: ["mango", "apple", "banana"]</code>
  • shift(): 배열의 시작 요소를 삭제합니다.
<code class="language-javascript">fruits.shift();
console.log(fruits); // Output: ["apple", "banana"]</code>

2. 찾아 검색

  • indexOf(): 배열에서 지정된 요소가 처음 나타나는 인덱스를 반환합니다.
<code class="language-javascript">let numbers = [10, 20, 30, 40];
console.log(numbers.indexOf(20)); // Output: 1</code>
  • includes(): 배열에 지정된 요소가 포함되어 있는지 확인합니다.
<code class="language-javascript">console.log(numbers.includes(30)); // Output: true
console.log(numbers.includes(50)); // Output: false</code>

3. 배열 변환

  • map(): 콜백 함수를 통해 원래 배열 요소를 처리한 결과를 요소로 포함하는 새 배열을 만듭니다.
<code class="language-javascript">let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // Output: [1, 4, 9]</code>
  • filter(): 지정된 조건을 충족하는 원본 배열의 요소를 요소로 포함하는 새 배열을 만듭니다.
<code class="language-javascript">let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2]</code>
  • reduce(): 배열 요소를 값으로 누적합니다.
<code class="language-javascript">let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 6</code>

4.정렬

  • sort(): 배열을 정렬합니다(기본값은 알파벳순). 숫자에는 사용자 정의 비교기가 필요합니다.
<code class="language-javascript">let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // Output: ["apple", "banana", "cherry"]

let numbers = [10, 5, 20];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // Output: [5, 10, 20]</code>
  • reverse(): 배열을 반대로 바꿉니다.
<code class="language-javascript">fruits.reverse();
console.log(fruits); // Output: ["cherry", "banana", "apple"]</code>

5. 배열 조합 및 추출

  • concat(): 두 개 이상의 배열을 병합합니다.
<code class="language-javascript">let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // Output: [1, 2, 3, 4]</code>
  • slice(): 원본 배열을 수정하지 않고 배열의 일부를 추출합니다.
<code class="language-javascript">let numbers = [10, 20, 30, 40];
let sliced = numbers.slice(1, 3);
console.log(sliced); // Output: [20, 30]</code>
  • splice(): 배열에서 요소를 추가하거나 제거합니다.
<code class="language-javascript">let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "orange", "grape");
console.log(fruits); // Output: ["apple", "orange", "grape", "cherry"]</code>

6. 배열 반복

  • forEach(): 배열의 각 요소에 대해 함수를 실행합니다.
<code class="language-javascript">let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // Output: 2, 4, 6</code>

7. 기타 일반적인 방법

  • join(): 지정된 구분 기호를 사용하여 배열을 문자열로 변환합니다.
<code class="language-javascript">let fruits = ["apple", "banana", "cherry"];
console.log(fruits.join(", ")); // Output: "apple, banana, cherry"</code>
  • find(): 지정된 조건을 충족하는 첫 번째 요소를 반환합니다.
<code class="language-javascript">let numbers = [10, 20, 30];
let result = numbers.find(num => num > 15);
console.log(result); // Output: 20</code>
  • findIndex(): 지정된 조건을 충족하는 첫 번째 요소의 인덱스를 반환합니다.
<code class="language-javascript">console.log(numbers.findIndex(num => num > 15)); // Output: 1</code>
  • flat(): 중첩 배열을 평면화합니다.
<code class="language-javascript">let nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat(2)); // Output: [1, 2, 3, 4, 5]</code>

위 내용은 자바스크립트 - 배열 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.