Khái niệm về Array.map là gì?

Question

Tôi gặp sự cố khi hiểu khái niệm về Array.map. Tôi đã đi đến Mozilla và Hướng dẫn điểm, nhưng họ cung cấp thông tin rất hạn chế về việc này.

Đây là cách tôi đang sử dụng Array.map. Đó là một chút phức tạp (một chút d3.js tham gia; chỉ cần bỏ qua nó)

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 

Tôi không hiểu chính xác mã này đang làm gì. Tôi biết nó trở về một mảng mới và các công cụ nhưng phần này là một chút khôn lanh!

nếu bạn muốn đi qua mã của tôi: http://jsfiddle.net/ddfsb/2/

UPDATE 1

Tôi đang sử dụng giao diện điều khiển để thực sự hiểu whats xảy ra bên trong mã. Nhìn vào các câu trả lời được cung cấp, tôi đã hiểu rõ khái niệm về array.map. Bây giờ phần duy nhất còn lại là thông số hàng và cột, nhưng có sự khác biệt giữa hàng và hàng và cột và cột trong fiddle được cung cấp

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 

Bất kỳ trợ giúp nào ??

Answer 1

Hãy viết lại một chút và bắt đầu làm việc từ trong ra ngoài.

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

Phần function(column) về cơ bản là một chức năng mà phải mất một cột như một tham số và trả về một đối tượng mới với hai thuộc tính:

• cột, đó là giá trị ban đầu của tham số, và
• giá trị, đó là kết quả của việc gọi hàm getColumnCell trên hàng (biến bên ngoài) và cột (tham số)

cácPhầngọi hàm Array.map, có một mảng và một hàm, và chạy hàm cho mỗi mục cuối cùng của nó, và trả về kết quả. tức là nếu đầu vào là mảng [1, 2, 3, 4, 5] và chức năng giống như isEven, kết quả sẽ là mảng [false, true, false, true, false]. Trong trường hợp của bạn, đầu vào là các cột và đầu ra là một danh sách các đối tượng, mỗi đối tượng có một cột và một thuộc tính giá trị.

Cuối cùng, phần var mapCell = function (row) tuyên bố rằng biến mapCell sẽ chứa một hàm của một biến gọi là row - và điều này là như nhau row được sử dụng trong các chức năng bên trong.

Trong một câu, dòng mã này, khai báo một hàm khi chạy, sẽ lấy một hàng và trả về giá trị cho tất cả các cột cho hàng đó.

Answer 2

map lặp qua mảng ban đầu của bạn và gọi phương thức cho từng giá trị trong mảng. Nó thu thập các kết quả của hàm của bạn để tạo một mảng mới với các kết quả. Bạn đang "ánh xạ" mảng các giá trị vào một mảng giá trị được ánh xạ mới. Mã của bạn tương đương với:

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

Hiểu chức năng bản đồ chỉ là một phần của giải pháp ở đây, cũng có chức năng mapCell. Phải mất một tham số row và nó sẽ trả về một cái gì đó như:

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

Trường hợp giá trị tế bào phụ thuộc vào row và cột (bên, sao-nói chuyện, vv)

Một chức năng bản đồ áp dụng chuyển đổi sang một giá trị và trả về giá trị được chuyển đổi đó.

Một ví dụ đơn giản:

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

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

Tương tự:

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

Bây giờ kể từ khi bản đồ mà được lồng với một chức năng mà được một tham số row. Bạn có thể sử dụng nó trong chức năng bản đồ, để nhận được:

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

Và điều này khá gần với mã của bạn.

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

Có lẽ hầu hết mọi người đến đây (như tôi) chỉ muốn có một cơ bản ví dụ array.map sử dụng:

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] 

Đây là nó ở đó là cơ bản nhất. Để biết thêm những người bỏ phiếu, hãy xem: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map