web-dev-qa-db-fra.com

Quel est le concept de Array.map?

J'ai de la difficulté à comprendre le concept de Array.map. Je suis allé à Mozilla et à Tutorials Point, mais ils ont fourni des informations très limitées à ce sujet.

C'est comme ça que j'utilise Array.map. C'est un peu complexe (un peu de d3.js impliqué; juste l'ignorer)

var mapCell = function (row) {
    return columns.map(function(column) {
        return { column : column, value : getColumnCell(row, column) }
    })
}
//getColumnCell is a function defined in my code
//columns is array defined at the top of my code

Je ne comprends pas exactement ce que fait ce code. Je sais que sa revient un nouveau tableau et d'autres choses, mais cette partie est un peu délicate!

si vous voulez passer par mon code: http://jsfiddle.net/ddfsb/2/

UPDATE 1

J'utilise console pour comprendre réellement ce qui se passe dans le code. En regardant les réponses fournies, j'ai bien compris le concept de array.map. Il ne reste maintenant que les paramètres lignes et colonnes, mais il existe une différence entre ligne et lignes, et colonne et colonnes dans le violon fourni.

var rows//completely ok
var columns//completely ok
funcion(row)//here,source of row is unknown.getColumncell function utilizes this parameter further making it more critical
function(column)//source of column is unknown..getColumncell function utilizes this parameter further making it more critical

De l'aide??

javascriptjqueryarraysmozillaarray-map
16
user2412575

Réécrivons-le un peu et commençons à travailler de l'intérieur.

var mapCell = function (row) {
  return columns.map(
    function(column) {
      return { 
        column : column, 
        value : getColumnCell(row, column)
      }
    }
  )
}

La partie function(column) est essentiellement une fonction qui prend une colonne en tant que paramètre et retourne un nouvel objet avec deux propriétés: 

  • colonne, c'est la valeur d'origine du paramètre, et
  • valeur, résultant de l'appel de la fonction getColumnCell sur la ligne (variable externe) et la colonne (paramètre)

La partie columns.map() appelle la fonction Array.map , qui prend un tableau et une fonction, exécute la fonction pour chaque dernier élément et renvoie les résultats. c'est-à-dire que si l'entrée est le tableau [1, 2, 3, 4, 5] et que la fonction ressemble à isEven, le résultat sera le tableau [false, true, false, true, false]. Dans votre cas, l'entrée correspond aux colonnes et le résultat est une liste d'objets, chacun contenant une propriété de colonne et une valeur.

Enfin, la partie var mapCell = function (row) déclare que la variable mapCell contiendra une fonction d'une variable appelée row - et qu'il s'agit de la même row que celle utilisée dans la fonction interne.

En une phrase, cette ligne de code déclare une fonction qui, une fois exécutée, prendra une ligne et renverra des valeurs pour toutes les colonnes de cette ligne.

17
SWeko

Comprendre la fonction map n’est qu’une partie de la solution, il existe également la fonction mapCell. Il prend un paramètre row et renvoie quelque chose comme:

[ {
    "column": "parties",
    "value": [cell value]
}, {
    "column": "star-speak",
    "value": [cell value]
} ]

Où la valeur de la cellule dépend de la row et de la colonne (parties, stars-speak, etc.)

Une fonction de la carte applique une transformation à une valeur et renvoie cette valeur transformée.

Un exemple simple:

function square(x) { return x * x; }

[ 2, 3, 4 ].map(square); // gives: [ 4, 9, 16 ]

De même:

[ "parties", "starspeak" ].map(function (column) {
    return {
        column: column,
        value: findTheValue(column)
    }
});

Maintenant, puisque cette carte est imbriquée avec une fonction qui obtient un paramètre row. Vous pouvez l'utiliser dans la fonction map pour obtenir:

function (row) {
    return [ "parties", "starspeak" ].map(function (column) {
        return {
            column: column,
            value: findTheValue(row, column)
        }
    });
}

Et cela se rapproche beaucoup de votre code.

3
Halcyon

map parcourt votre tableau d'origine et appelle la méthode pour chaque valeur du tableau. Il collecte les résultats de votre fonction pour créer un nouveau tableau avec les résultats. Vous "mappez" le tableau de valeurs dans un nouveau tableau de valeurs mappées. Votre code est équivalent à:

var mapCell = function (row) {
    var result = [];
        for (var i = 0; i < columns.length; ++i) {
            var mappedValue = {
                column: columns[i], 
                value : getColumnCell(row, columns[i])
            };
            result.Push(mappedValue);
        }
    return result;
};
2
Brandon
Map function goes through each element of an array in ascending order and invokes function f on all of them. 
It returns new array which is being computed after function is invoked on it.

Ref: http://www.thesstech.com/javascript/array_map_method

Syntax
array.map(f)

Example:

<!doctype html>
<html>
 <head>
 <script>
   var arr = [4,5,6];
   document.write(arr.map(function(x){return x*2;}));
 </script>
 </head>
</html>

Answer: 8,10,12
Ref: http://www.thesstech.com/tryme?filename=javascript_array_map_method
2
Sohail Arif

Résumé

Array.map est une fonction qui se trouve sur Array.prototype.map. La fonction fait ce qui suit:

  1. Crée un nouveau tableau avec le même nombre d'entrées/éléments.
  2. Exécute une fonction de rappel, cette fonction reçoit un élément de tableau en cours en tant qu'argument et renvoie l'entrée pour le nouveau tableau.
  3. Retourne le tableau nouvellement créé.

Exemple:

Utilisation de base: 

const array = [1, 2, 3, 4];

// receive each element of array then multiply it times two
// map returns a new array
const map = array.map(x => x * 2);

console.log(map);

La fonction de rappel expose également un index et le tableau d'origine: 

const array = [1, 2, 3, 4];

// the callback function can also receive the index and the 
// original array on which map was called upon
const map = array.map((x, index, array) => {
  console.log(index);
  console.log(array);
  return x + index;
});

console.log(map);

0
Willem van der Veen

La plupart des gens qui viennent ici (comme moi) veulent probablement un exemple d'utilisation de base avec array.map:

myArray = [1,2,3]
mappedArray = [];

mappedArray = myArray.map(function(currentValue){
     return currentValue *= 2;
})

//myArray is still [1,2,3]
//mappedArray is now [2,4,6]

C'est ça le plus fondamental. Pour des paramètres supplémentaires, consultez: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

0
Andrew