jQuery Array.map 是什么概念？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17367889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the concept of Array.map?
提问by SWeko
I am having problems understanding the concept of Array.map. I did go to Mozilla and Tutorials Point, but they provided very limited info regarding this.
我在理解Array.map. 我确实去了 Mozilla 和 Tutorials Point，但他们提供的关于此的信息非常有限。
This is how I am using Array.map. It is a little complex (a bit of d3.js involved; just ignore it)
这就是我使用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
I do not understand exactly what this code is doing. I know its returning a new array and stuff but this part is a little tricky!
我不明白这段代码在做什么。我知道它返回一个新的数组和东西，但这部分有点棘手！
if you want to go through my code: http://jsfiddle.net/ddfsb/2/
如果你想通过我的代码：http: //jsfiddle.net/ddfsb/2/
UPDATE 1
更新 1
I am using console to actually understand whats happening inside the code. Looking at the answers provided, I have clearly understood the concept of array.map. Now the only part remaining is parameters rows and columns, but there is a difference between row and rows,and column and columns in the fiddle provided
我正在使用控制台来实际了解代码中发生的事情。看了大家提供的答案，我已经清楚地理解了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
Any help??
有什么帮助吗？？
回答by SWeko
Let's rewrite it a bit, and start working from inside out.
让我们稍微重写一下，然后从内而外开始工作。
var mapCell = function (row) {
return columns.map(
function(column) {
return {
column : column,
value : getColumnCell(row, column)
}
}
)
}
The function(column)part is essentially a function that takes a column as a parameter, and returns a new object with two properties:
该function(column)部分本质上是一个函数，它将列作为参数，并返回一个具有两个属性的新对象：
- column, that is the original value of the parameter, and
- value, that is the result of calling the getColumnCell function on the row (external variable) and column (parameter)
- 列，即参数的原始值，以及
- 值，即对行（外部变量）和列（参数）调用 getColumnCell 函数的结果
The columns.map()part calls the Array.mapfunction, that takes an array and a function, and runs the function for every last item of it, and returns the results. i.e. if the input is the array [1, 2, 3, 4, 5]and the function is something like isEven, the result will be the array [false, true, false, true, false]. In your case, the input are the columns, and the output is a list of objects, each of which has a column and a value properties.
该columns.map()部分调用Array.map函数，该函数接受一个数组和一个函数，并为它的每个最后一项运行该函数，并返回结果。即如果输入是数组[1, 2, 3, 4, 5]并且函数是类似的isEven，结果将是数组[false, true, false, true, false]。在您的情况下，输入是列，输出是对象列表，每个对象都有一个列和一个值属性。
Lastly, the var mapCell = function (row)part declares that the variable mapCellwill contain a function of one variable called row- and this is the same rowthat is used in the inner function.
最后，该var mapCell = function (row)部分声明该变量mapCell将包含一个名为的变量的函数row- 这与row在内部函数中使用的相同。
In a single sentence, this line of code, declares a function that when run, will take a row and return values for all columns for that row.
在一个句子中，这行代码声明了一个函数，该函数在运行时将取一行并返回该行所有列的值。
回答by Halcyon
Understanding the map function is only part of the solution here, there is also the function mapCell. It takes one parameter rowand it returns something like:
理解 map 函数只是这里解决方案的一部分，还有函数mapCell. 它接受一个参数row并返回如下内容：
[ {
"column": "parties",
"value": [cell value]
}, {
"column": "star-speak",
"value": [cell value]
} ]
Where the cell value depends on the rowand the column (parties, stars-speak etc.)
单元格值取决于row和 列（派对，明星发言等）
A map function applies a transformation to a value, and returns that transformed value.
map 函数将转换应用于值，并返回转换后的值。
A simple example:
一个简单的例子：
function square(x) { return x * x; }
[ 2, 3, 4 ].map(square); // gives: [ 4, 9, 16 ]
Similarly:
相似地：
[ "parties", "starspeak" ].map(function (column) {
return {
column: column,
value: findTheValue(column)
}
});
Now since that map is nested with a function that gets a rowparameter. You can use it in the map function, to get:
现在因为该地图嵌套了一个获取row参数的函数。您可以在 map 函数中使用它，以获取：
function (row) {
return [ "parties", "starspeak" ].map(function (column) {
return {
column: column,
value: findTheValue(row, column)
}
});
}
And this gets pretty close to your code.
这与您的代码非常接近。
回答by Brandon
maploops through your original array and calls the method for each value in the array. It collects the results of your function to create a new array with the results. You are "mapping" the array of values into a new array of mapped values. Your code is equivalent to:
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;
};
回答by Sohail Arif
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
回答by Willem van der Veen
Summary
概括
Array.mapis a function which is located on Array.prototype.map. The function does the following:
Array.map是一个位于 上的函数Array.prototype.map。该函数执行以下操作：
- Creates a new arraywith the same amount of entries/elements.
- Executes a callback function, this function receives and current array element as an argument and returns the entry for the new array.
- Returns the newly created array.
- 创建一个具有相同数量的条目/元素的新数组。
- 执行回调函数，该函数接收当前数组元素作为参数并返回新数组的条目。
- 返回新创建的数组。
Example:
例子：
Basic usage:
基本用法：
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);The callback function also exposes an index and the original array:
回调函数还公开了一个索引和原始数组：
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);回答by ABHIJEET KHIRE
IF you have an array of elements and you have to perform the same operation on the each element of the array that time you can use the javascript map function for array it helps to iterate throw the array then we can perform the operation of each element and return it.
如果你有一个元素数组并且你必须对数组的每个元素执行相同的操作，那么你可以使用数组的javascript map函数它有助于迭代抛出数组然后我们可以执行每个元素的操作和把它返还。
let NumberArray = [1,2,3,4,5,6,7,8];
let UpdatedArray = NumberArray.map( (Num , index )=>{
return Num*10;
})
console.log(UpdatedArray);
//UpdatedArray ==> [10, 20, 30, 40, 50, 60, 70, 80]
回答by Andrew
Probably most people coming here (like me) just want a basic array.mapusage example:
可能大多数来这里的人（像我一样）只想要一个基本的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]
This is it at it's most basic. For additional parameers, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
这是最基本的。有关其他参数，请查看：https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
