JS.map() 메소드(배열 메소드) 사용 방법

이 글에서는 JavaScript의 Array.map() 메서드를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

때로는 수정된 요소가 포함된 새 배열을 얻기 위해 배열을 가져와 그 하위 항목에 일부 작업을 적용해야 할 수도 있습니다.

루프를 사용하여 배열을 수동으로 탐색하는 대신 내장된 Array.map() 메서드를 간단히 사용할 수 있습니다. Array.map()方法。

该Array.map()方法允许你遍历数组并使用回调函数修改其元素。然后，将对数组的每个元素执行回调函数。

例如，假设你具有以下数组元素：

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

现在，假设你需要将数组的每个元素乘以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]

但是实际上可以使用该Array.map()方法来达到相同的结果。这是一个例子：

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

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

console.log(modifiedArr); // [9, 12, 15, 18]

该Array.map()方法通常用于对元素进行一些更改，无论是乘以上面的代码中的特定数字，还是进行应用程序可能需要的任何其他操作。

如何在对象数组上使用map()

例如，您可能有一个对象数组，这些对象存储firstName和存储lastName您的朋友的值，如下所示：

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

您可以使用map()在阵列上的方法来迭代和加入的价值观 firstName和lastName如下：

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()方法语法

该map()方法的语法如下：

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

function()在每个数组元素上调用该回调，并且该map()方法始终将current element，index当前元素的of和整个array对象传递给它。

该this参数将在回调函数中使用。默认情况下，其值为undefined。例如，下面是将this值更改为数字的方法80：

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

arr.map(function(element, index, array){
    console.log(this) // 80
}, 80);

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

Array.map() 메서드를 사용하면 배열을 반복하고 콜백 함수를 사용하여 해당 요소를 수정할 수 있습니다. 그런 다음 배열의 각 요소에 대해 콜백 함수가 실행됩니다.

예를 들어 다음과 같은 배열 요소가 있다고 가정해 보겠습니다.
rrreee

이제 배열의 각 요소에 3을 곱해야 한다고 가정해 보겠습니다. 다음과 같은 루프를 사용하여 for를 고려해 볼 수 있습니다.

rrreee

하지만 실제로는 Array.map() 메서드를 사용하여 동일한 결과를 얻을 수 있습니다. 예는 다음과 같습니다.

rrreee

Array.map() 메서드는 일반적으로 위 코드에서와 같이 특정 숫자를 곱하든 애플리케이션에 필요할 수 있는 요소든 관계없이 요소를 일부 변경하는 데 사용됩니다. 다른 작업.

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

예를 들어 firstName을 저장하고 lastName을 저장하는 객체 배열이 있을 수 있습니다. your 친구의 값은 다음과 같습니다:

rrreee🎜 배열의 map() 메서드를 사용하여 firstName 및 firstName의 값을 반복하고 결합할 수 있습니다. lastName 코드>는 다음과 같습니다: 🎜rrreee🎜 map() 메소드는 하나 이상의 요소를 전달합니다. 콜백 함수에 전달된 모든 매개변수를 살펴보겠습니다. 🎜

전체 map() 메소드 구문

🎜map() 메소드의 구문은 다음과 같습니다: 각 배열의 🎜rrreee🎜function() 요소 콜백은 에서 호출되며 map() 메서드는 항상 현재 요소, 현재 요소의 색인 및 전체 를 매핑합니다. >array code> 객체가 전달됩니다. 🎜🎜this 매개변수는 콜백 함수에서 사용됩니다. 기본적으로 해당 값은 정의되지 않음입니다. 예를 들어 this 값을 숫자 80으로 변경하는 방법은 다음과 같습니다. 🎜rrreee🎜console.log() 관심이 있는 경우 , 다음을 사용하여 다른 매개변수를 테스트할 수 있습니다. 🎜rrreee🎜이것이 Array.map() 메서드에 대해 알아야 할 전부입니다. 일반적으로 콜백 함수에서는 element 매개변수만 사용하고 나머지는 무시합니다. 이것이 제가 일상 프로젝트에서 주로 하는 일입니다 :)🎜🎜🎜영어 원본 주소:🎜🎜🎜https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map- function-array-method/🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 JS.map() 메소드(배열 메소드) 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!