JavaScript 배열 map() 메소드 이해-JS 튜토리얼-php.cn

JavaScript 배열 map() 메소드 이해

Barbara Streisand

풀어 주다： 2024-11-30 15:49:16

원래의

615명이 탐색했습니다.

Understanding JavaScript Array map() Method

map() 소개

map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다. 배열의 각 요소를 새 요소로 변환하여 원본 배열을 수정하지 않고도 새 배열을 생성할 수 있는 함수형 프로그래밍 기술입니다.

구문

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

로그인 후 복사

또는 화살표 기능을 사용하여:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

로그인 후 복사

매개변수

콜백: 세 가지 인수를 사용하여 새 배열의 요소를 생성하는 함수:
- currentValue: 현재 처리 중인 요소입니다.
- index (선택): 현재 요소의 인덱스
- array (선택 사항): 배열 맵이 호출되었습니다.
thisArg (선택) : 콜백 실행시 사용할 값.

반환값

콜백 함수의 결과인 각 요소가 포함된 새 배열.

map() 작동 방식

불변성: map()은 원래 배열을 수정하지 않습니다.
요소별 변환: 각 요소에 콜백 함수를 적용합니다.
새 배열 반환: 결과를 새 배열로 수집합니다.

예

아. 매핑 번호

예: 배열의 각 숫자에 2를 곱합니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

로그인 후 복사

ㄴ. 문자열 변환

예: 문자열 배열을 대문자로 변환합니다.

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

로그인 후 복사

ㄷ. 객체 속성 추출

예: 객체 배열에서 특정 속성을 추출합니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

로그인 후 복사

디. 객체 배열에 대한 매핑

예: 각 객체를 배열로 변환합니다.

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

로그인 후 복사

map()과 forEach()의 차이점

지도():
- 새 배열을 반환합니다.
- 각 요소를 변형하여 결과를 수집하고 싶을 때 사용합니다.
각각():
- 정의되지 않은 상태로 반환됩니다.
- 부작용(예: 로깅, 외부 변수 수정)을 수행하고 새 배열이 필요하지 않을 때 사용됩니다.

forEach()의 예:

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

로그인 후 복사

화살표 함수와 함께 map() 사용

화살표 함수는 콜백 함수 작성을 위한 간결한 구문을 제공합니다.

예:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

로그인 후 복사

TypeScript의 map()

TypeScript는 JavaScript에 정적 타이핑을 추가하여 컴파일 타임에 오류를 잡는 데 도움이 됩니다.

아. 유형 주석

배열 요소의 유형과 반환 유형을 지정할 수 있습니다.

예:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

로그인 후 복사

ㄴ. 일반 유형

모든 유형에서 작동하도록 일반 함수를 정의할 수 있습니다.

예:

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

로그인 후 복사

일반적인 사용 사례

데이터 변환: 데이터를 한 형식에서 다른 형식으로 변환합니다.
값 추출: 개체에서 특정 필드를 추출합니다.
데이터 구성: 기존 데이터를 기반으로 새 배열을 생성합니다.
계산: 각 요소에 대해 계산을 수행합니다.

고급 주제

아. 다른 배열 방법으로 map() 연결

map()을 filter(), Reduce() 등과 같은 다른 배열 메소드와 연결할 수 있습니다.

예:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

로그인 후 복사

ㄴ. 비동기 작업 처리

map()은 콜백 내에서 비동기 작업을 처리하지 않습니다. 비동기 작업을 수행해야 하는 경우 map()과 함께 Promise.all()을 사용하는 것이 좋습니다.

예:

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

로그인 후 복사