JavaScript Array map()

정의와 사용법

map() 메서드는 각 배열 요소에 대해 함수를 호출한 결과를 사용하여 새 배열을 생성합니다。

map() 메서드는 제공된 함수를 배열의 각 요소에 대해 한 번씩 호출합니다。

주석：map() 값이 없는 배열 요소에 대한 함수는 실행하지 않습니다。

주석：map() 원래 배열을 변경하지 않습니다。

인스턴스

예제 1

반환하는 원래 배열의 모든 값의 제곱근 배열을 찾습니다：

var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt);
document.getElementById("demo").innerHTML = x;

직접 시도해 보세요

예제 2

배열의 모든 값을 10으로 곱하기:

var numbers = [65, 44, 12, 4];
var newarray = numbers.map(myFunction)
function myFunction(num) {
  return num * 10;
}
document.getElementById("demo").innerHTML = newarray;;

직접 시도해 보세요

예제 3

배열 중每个人的 전체 이름을 가져오기:

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];
function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}
function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}

직접 시도해 보세요

문법

array.map(function(currentValue, index, arr), thisValue)

파라미터 값

파라미터 설명
function(currentValue, index, arr) 필수. 배열의 각 요소에 실행할 함수.

함수 파라미터:

파라미터 설명
currentValue 필수. 현재 요소의 값.
index 선택 사항. 현재 요소의 배열 인덱스.
arr 선택 사항. 현재 요소가 속한 배열 객체.
thisValue

선택 사항. 함수에 전달하여 그 "this" 값으로 사용할 값.

이 参数가 비어 있으면, 값 "undefined"가 그 "this" 값으로 전달됩니다.

기술 세부 사항

반환 값: 배열, 원본 배열의 각 요소에 제공된 함수를 호출한 결과를 포함합니다.
JavaScript 버전: ECMAScript 5

브라우저 지원

표에서의 숫자는 이 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

모든 브라우저가 완전히 지원합니다 map() 메서드:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9.0 지원 지원 지원 지원

관련 페이지

교육:JavaScript 배열

교육:JavaScript 배열 Const

교육:JavaScript 배열 메서드

교육:JavaScript 배열 정렬

교육:JavaScript 배열 반복