Comment utiliser la méthode JS.map() (méthode tableau)

Cet article vous présentera la méthode Array.map() en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Parfois, vous devrez peut-être prendre un tableau et appliquer certaines opérations à ses enfants afin d'obtenir un nouveau tableau avec des éléments modifiés.

Au lieu de parcourir manuellement le tableau à l'aide d'une boucle, vous pouvez simplement utiliser la méthode Array.map() intégrée.

La méthode Array.map() vous permet de parcourir un tableau et de modifier ses éléments à l'aide de fonctions de rappel. La fonction de rappel sera alors exécutée pour chaque élément du tableau.

Par exemple, supposons que vous ayez les éléments de tableau suivants :

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

Maintenant, supposons que vous deviez multiplier chaque élément du tableau par 3. Vous pourriez envisager for d'utiliser une boucle comme suit :

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]

Mais vous pouvez réellement utiliser cette Array.map() méthode pour obtenir le même résultat. Voici un exemple :

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

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

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

La méthode Array.map() est généralement utilisée pour apporter des modifications à un élément, qu'il s'agisse de multiplier un nombre spécifique dans le code ci-dessus ou de faire tout ce dont votre application pourrait avoir besoin.

Comment utiliser map() sur un tableau d'objets

Par exemple, vous pourriez avoir un tableau d'objets qui stockent firstName et stockent lastName les valeurs de vos amis comme indiqué ci-dessous :

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

Vous pouvez utiliser la méthode map() sur un tableau pour itérer et joindre les valeurs de firstName et lastName comme suit :

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"]

Le map() Les passes de méthode ne sont pas seulement un élément. Regardons tous les paramètres passés map() à la fonction de rappel.

Syntaxe de la méthode Full map()

La syntaxe de la méthode map() est la suivante :

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

function()Ce rappel est appelé sur chaque élément du tableau, et la méthode map() lui transmet toujours le element actuel, le index de l'élément actuel et l'intégralité de l'objet array.

Ce this paramètre sera utilisé dans la fonction de rappel. Par défaut, sa valeur est undefined. Par exemple, voici comment changer la this valeur en nombre80 :

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

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

console.log() Si cela vous intéresse, vous pouvez également tester d'autres paramètres en utilisant :

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

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

Voilà pour vous Toutes les Array.map() méthodes que vous devez connaître. Normalement, vous element utiliseriez uniquement les paramètres dans la fonction de rappel et ignoreriez le reste. C'est ce que je fais habituellement dans mes projets quotidiens :)

Adresse originale en anglais :

https://www.freecodecamp.org/news/javascript- map- how-to-use-the-js-map-function-array-method/

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!