> 웹 프론트엔드 > JS 튜토리얼 > 예제를 통해 JavaScript 배열 메서드 탐색

예제를 통해 JavaScript 배열 메서드 탐색

王林
풀어 주다: 2024-07-18 05:58:00
원래의
1025명이 탐색했습니다.

Exploring JavaScript Array Methods with Examples

JavaScript 배열은 다목적이며 데이터를 효율적으로 조작, 반복 및 관리할 수 있는 다양한 기본 제공 방법을 제공합니다. 효과적인 프로그래밍을 위해서는 이러한 방법을 이해하는 것이 중요합니다. 실제 사례와 함께 일반적으로 사용되는 배열 방법을 살펴보겠습니다.

배열 방법

  • push(): 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.
let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
로그인 후 복사
  • pop(): 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
로그인 후 복사
  • shift(): 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환합니다.
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
로그인 후 복사
  • unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
로그인 후 복사
  • forEach(): 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
로그인 후 복사
  • map(): 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다.
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
로그인 후 복사
  • filter(): 제공된 함수로 구현된 테스트를 통과한 모든 요소가 포함된 새 배열을 만듭니다.
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
로그인 후 복사
  • find(): 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소를 반환합니다.
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
로그인 후 복사
  • reduce(): 누산기와 배열의 각 요소(왼쪽에서 오른쪽으로)에 함수를 적용하여 단일 값으로 줄입니다.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
로그인 후 복사
  • indexOf(): 배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
로그인 후 복사
  • lastIndexOf(): 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3
로그인 후 복사

이러한 배열 메소드는 JavaScript에서 데이터 구조를 효율적으로 조작하기 위한 기본 도구입니다. 이러한 방법을 익히면 다양한 프로그래밍 시나리오에서 배열을 처리하기 위한 강력한 툴킷을 얻을 수 있습니다.

위 내용은 예제를 통해 JavaScript 배열 메서드 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿