Какова концепция Array.map?

У меня возникают проблемы с пониманием концепции Array.map. Я пошел в Mozilla и Tutorials Point, но они предоставили очень ограниченную информацию об этом.

Вот как я использую Array.map. Он немного сложный (немного задействовано d3.js, просто игнорируйте его)

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

Я точно не понимаю, что делает этот код. Я знаю, что он возвращает новый массив и прочее, но эта часть немного сложна!

если вы хотите просмотреть мой код: http://jsfiddle.net/ddfsb/2/

ОБНОВЛЕНИЕ 1

Я использую консоль, чтобы понять, что происходит внутри кода. Глядя на предоставленные ответы, я ясно понял концепцию Array.map. Теперь единственной оставшейся частью являются строки параметров и столбцы, но есть разница между строками и строками, а столбцы и столбцы в скрипте предоставлены

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

Любая помощь?

Ответ 1

Перепишите его немного и начните работать изнутри.

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

Часть function(column) - это, по существу, функция, которая принимает столбец как параметр и возвращает новый объект с двумя свойствами:

то есть исходное значение параметра, и
то есть результат вызова функции getColumnCell в строке (внешняя переменная) и столбце (параметр)

Часть columns.map() вызывает функцию Array.map, которая принимает массив и функцию и запускает функцию для каждого последнего элемента и возвращает результаты. т.е. если вход представляет собой массив [1, 2, 3, 4, 5], а функция имеет значение isEven, результатом будет массив [false, true, false, true, false]. В вашем случае входные данные являются столбцами, а вывод представляет собой список объектов, каждый из которых имеет столбец и свойства значения.

Наконец, часть var mapCell = function (row) заявляет, что переменная mapCell будет содержать функцию одной переменной с именем row - и это то же самое row, которое используется во внутренней функции.

В одном предложении эта строка кода объявляет функцию, которая при запуске принимает строку и возвращает значения для всех столбцов для этой строки.

Ответ 2

Понимание функции отображения является лишь частью решения здесь, есть также функция mapCell. Он принимает один параметр row и возвращает что-то вроде:

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

Если значение ячейки зависит от row и столбца (стороны, звезды - говорят и т.д.)

Функция карты применяет преобразование к значению и возвращает это преобразованное значение.

Простой пример:

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

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

Аналогично:

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

Теперь, поскольку эта карта вложена функцией, которая получает параметр row. Вы можете использовать его в функции карты, чтобы получить:

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

И это довольно близко к вашему коду.

Ответ 3

map проходит через ваш исходный массив и вызывает метод для каждого значения в массиве. Он собирает результаты вашей функции для создания нового массива с результатами. Вы "сопоставляете" массив значений в новый массив отображаемых значений. Ваш код эквивалентен:

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

Ответ 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

Ответ 5

Вероятно, большинство людей, приезжающих сюда (например, я), просто хотят использовать базовый пример использования 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]

Это у него самое основное. Для дополнительных параметров выполните следующие действия: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map