javascript - ¿Cuál es el concepto de Array.map?

jquery arrays

Question

Estoy teniendo problemas para entender el concepto de Array.map . Fui a Mozilla y Tutorials Point, pero proporcionaron información muy limitada al respecto.

Así es como estoy usando Array.map . Es un poco complejo (un poco de d3.js involucrado; simplemente ignórelo)

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

No entiendo exactamente lo que hace este código. Sé que está devolviendo una nueva matriz y esas cosas, ¡pero esta parte es un poco difícil!

si quieres revisar mi código: http://jsfiddle.net/ddfsb/2/

ACTUALIZACIÓN 1

Estoy usando la consola para entender realmente qué está sucediendo dentro del código. En cuanto a las respuestas proporcionadas, he entendido claramente el concepto de array.map . Ahora, la única parte restante es parámetros filas y columnas, pero hay una diferencia entre fila y filas y columna y columnas en el violín proporcionado

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

¿¿Alguna ayuda??

Answer 1

Resumen

Array.map es una función que se encuentra en Array.prototype.map . La función hace lo siguiente:

1. Crea una nueva matriz con la misma cantidad de entradas / elementos.
2. Ejecuta una función de devolución de llamada, esta función recibe un elemento de la matriz actual como un argumento y devuelve la entrada para la nueva matriz.
3. Devuelve la matriz recién creada.

Ejemplo:

Uso básico:

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 función de devolución de llamada también expone un índice y la matriz original:

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);

Answer 2

Comprender la función del mapa es solo parte de la solución aquí, también está la función mapCell . Toma una row parámetros y devuelve algo como:

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

Donde el valor de la celda depende de la row y la columna (partes, estrellas, etc.)

Una función de mapa aplica una transformación a un valor y devuelve ese valor transformado.

Un ejemplo simple:

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

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

Similar:

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

Ahora, ya que ese mapa está anidado con una función que obtiene un parámetro de row . Puedes usarlo en la función de mapa, para obtener:

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

Y esto se acerca bastante a tu código.

Answer 3

Probablemente la mayoría de las personas que vienen aquí (como yo) solo quieren un ejemplo de uso de array.map básico:

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]

Esto es lo más básico. Para obtener más parameers, visite: Array.map

Answer 4

Vamos a reescribirlo un poco, y empezar a trabajar desde adentro hacia afuera.

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

La parte de la function(column) es esencialmente una función que toma una columna como parámetro y devuelve un nuevo objeto con dos propiedades:

• columna, que es el valor original del parámetro, y
• valor, que es el resultado de llamar a la función getColumnCell en la fila (variable externa) y columna (parámetro)

La parte columns.map() llama a la función Array.map , que toma una matriz y una función, ejecuta la función para cada último elemento y devuelve los resultados. es decir, si la entrada es la matriz [1, 2, 3, 4, 5] y la función es algo así como isEven , el resultado será la matriz [false, true, false, true, false] . En su caso, la entrada son las columnas, y la salida es una lista de objetos, cada uno de los cuales tiene una columna y propiedades de valor.

Por último, la parte var mapCell = function (row) declara que la variable mapCell contendrá una función de una variable llamada row , y esta es la misma row que se usa en la función interna.

En una sola oración, esta línea de código, declara una función que cuando se ejecuta, tomará una fila y devolverá los valores de todas las columnas para esa fila.

Answer 5

map bucles a través de su matriz original y llama al método para cada valor en la matriz. Recopila los resultados de su función para crear una nueva matriz con los resultados. Está "asignando" la matriz de valores a una nueva matriz de valores asignados. Su código es equivalente a:

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;
};

Answer 6

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