HomeLập trìnhJavaScriptBản đồ JavaScript...

Bản đồ JavaScript – JS.map() 함수 사용 방법 (배열 메소드)



Bài báo gốc: Bản đồ JavaScript – Cách sử dụng Hàm JS .map() (Phương thức mảng) của Nathan Sebhastian


Được dịch bởi: YOUNGHYUN BAE

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다.

그 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 메소드를 사용하면 됩니다.

Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

예를 들어 다음과 같은 배열 요소가 있다고 가정해 봅시다:

let arr = [3, 4, 5, 6];
간단한 JavaScript 배열

이제 배열의 각 요소에 3을 곱해야 한다고 상상해 봅시다. 다음과 같이 for 루프 사용을 고려할 지도 모릅니다:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]
cho 루프를 사용하여 배열에 대해 반복 처리

그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있습니다. 다음은 그에 대한 예시입니다:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]
map() 메소드를 사용하여 배열에 대해 반복 처리

일반적으로 Array.map() 메소드는 위 코드 와 특정 숫자 곱하거나 곱하거나 곱하거나 애플리케이션 필요 한 한 을 수행 하는 등 요소 어떤 변경 을 을 적용 하는 됩니다.

객체 배열에서 map()을 사용하는 방법

예를 들어, 당신의 친구들의 firstNamelastName의 값을 저장하는 객체 배열이 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

객체 배열

다음과 같이 map() 메소드를 사용하여 배열을 순환하며 처리해서 firstNamelastName 값을 결합할 수 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
map() 메소드를 사용하여 객체 배열을 순환 처리하기

map() 메소드는 단순히 하나의 요소만을 전달하는 것이 아닙니다. map()을 통해 콜백 함수에 전달되는 모든 인수를 살펴보겠습니다.

Đọc thêm  Thử thách mã hóa Javascript nearIncreasingSequence - JavaScript

완전한 map() 메소드 구문

map()을 위한 구문은 다음과 같습니다:

arr.map(function(element, index, array){  }, this);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map() 메소드는 언제나 현재의 element와 그것의 index그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 됩니다. 기본적으로 이 값은 undefined입니다. bạn đã biết, this값을 숫자 80으로 변경하는 방법은 다음과 같습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
map() 메소드의 cái này 인수에 숫자 값 할당

console.log()를 사용하여 다른 인수들을 테스트해 볼 수도 있습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
값을 확인하기 위한 인수 로깅

여기까지가 Array.map()방법에 대해 알아야 할 전부입니다. 대부분의 경우 나머지는 무시하고 콜백 함수 내부의 element 인수만 사용합니다. 저는 보통은 그렇게 많이 사용한답니다 🙂

이 튜토리얼을 읽어주셔서 감사합니다

해결 해야 가장 적 자바스크립트 문제들 일부인 배열 합치는 방법 및 문자열 찾는 찾는 를 포함 한 가 가 작성 작성 작성 한 JavaScript 튜토리얼 에 관심이 있을.

웹 개발 튜토리얼(대부분 JavaScript 관련)에 대한 무료 뉴스레터도 있습니다.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status