Jaka jest koncepcja Array.map?

Question

Mam problemy ze zrozumieniem koncepcji Array.map. Poszedłem do Mozilli i Tutorials Point, ale dostarczyli bardzo ograniczone informacje na ten temat.

W ten sposób używam Array.map. To jest trochę skomplikowane (trochę d3.js zaangażowanych; po prostu zignorować)

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 

Nie rozumiem dokładnie, co ten kod robi. Wiem, że powraca z nową tablicą i innymi rzeczami, ale ta część jest trochę trudna!

jeśli chcesz przejść przez mojego kodu: http://jsfiddle.net/ddfsb/2/

Update 1

używam konsoli rzeczywiście zrozumieć, co dzieje się wewnątrz kodu. Patrząc na udzielone odpowiedzi, wyraźnie zrozumiałem koncepcję array.map. Teraz pozostało tylko część parametrów wiersze i kolumny, ale istnieje różnica między wiersza i kolumny wierszy i kolumn oraz na skrzypcach pod warunkiem

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 

Każda pomoc ??

Answer 1

Naprawmy to trochę i zacznij działać od środka.

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

function(column) część jest zasadniczo funkcją, która przyjmuje kolumnę jako parametr i zwraca nowy obiekt w dwóch właściwości:

• kolumny, to jest przy wartości parametru oraz
• wartość, która jest efektem wywoływania funkcji getColumnCell w rzędzie (zmienna zewnętrzna) i kolumny (parametrów)

columns.map() część wywołuje funkcję Array.map, która pobiera tablicę i funkcję, uruchamia funkcję dla każdego ostatniego elementu i zwraca wyniki. tj. jeśli wejście jest tablicą [1, 2, 3, 4, 5], a funkcja jest podobna do isEven, wynikiem będzie tablica [false, true, false, true, false]. W twoim przypadku dane wejściowe są kolumnami, a dane wyjściowe są listą obiektów, z których każda ma kolumnę i właściwości wartości.

Wreszcie var mapCell = function (row) część deklaruje, że zmienna mapCell będzie zawierać funkcji jednej zmiennej o nazwie row - i jest to ten sam row która jest używana w funkcji wewnętrznej.

W jednym zdaniu ten wiersz kodu deklaruje funkcję, która po uruchomieniu pobiera wiersz i zwraca wartości dla wszystkich kolumn dla tego wiersza.

Answer 2

map Powoduje przechodzenie przez oryginalną tablicę i wywołuje metodę dla każdej wartości w tablicy. Zbiera wyniki twojej funkcji, aby utworzyć nową tablicę z wynikami. "Mapujesz" tablicę wartości do nowej tablicy odwzorowanych wartości. Twój kod jest równoważny:

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 3

Zrozumienie funkcji mapie jest tylko częścią tutaj rozwiązania, istnieje również funkcja mapCell. To trwa jeden parametr row i zwraca coś takiego:

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

przypadku gdy wartość komórki zależy od row i kolumny (strony, gwiazdy, mówić itp)

Funkcja map stosuje przejście na wartość i zwraca wartość przekształconą.

Prosty przykład:

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

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

Podobnie:

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

Teraz ponieważ mapa jest zagnieżdżony w funkcję, która dostaje parametr row. Możesz go użyć w funkcji mapy, aby uzyskać:

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

A to zbliża się do twojego kodu.

Answer 4

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 

Answer 5

Prawdopodobnie większość ludzi pochodzących tutaj (jak ja) po prostu podstawowy przykład array.map Zastosowanie:

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] 

to jest to co jest najbardziej podstawowe. Aby uzyskać dodatkowe parametry, sprawdź: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map