21

我在理解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

有什么帮助吗??

4

9 回答 9

23

让我们重写一下,从里到外开始工作。

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与内部函数中使用的相同。

在一个句子中,这行代码声明了一个函数,该函数在运行时将获取一行并返回该行所有列的值。

于 2013-06-28T15:26:54.410 回答
3

了解 map 函数只是这里解决方案的一部分,还有 function 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参数的函数。您可以在 map 函数中使用它,以获得:

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

这与您的代码非常接近。

于 2013-06-28T15:21:24.470 回答
2

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;
};
于 2013-06-28T15:19:03.233 回答
2
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
于 2015-09-23T10:19:43.393 回答
1

概括

Array.map是一个位于 上的函数Array.prototype.map。该函数执行以下操作:

  1. 创建一个具有相同数量的条目/元素的新数组。
  2. 执行回调函数,该函数接收当前数组元素作为参数并返回新数组的条目。
  3. 返回新创建的数组。

例子:

基本用法:

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

回调函数还公开了一个索引和原始数组:

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

于 2018-10-29T18:07:04.347 回答
0

可能大多数来这里的人(比如我)只是想要一个基本的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

于 2016-10-26T14:59:57.927 回答
0

如果您有一个元素数组,并且您必须对数组的每个元素执行相同的操作,那么您可以使用 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]
于 2019-07-31T11:47:08.143 回答
0

Javascript map() 语法

arrayObj.map(callback[,context]);

arrayObj 是调用 map() 的原始数组。

map() 接受 2 个命名参数,第一个是回调函数,第二个是上下文对象。回调函数在数组的每个元素上触发。

此外,回调函数接受 3 个参数:

函数回调(当前元素,索引,数组){

}

currentElement - 这是传递给回调函数的数组的当前元素

index - 当前元素的索引

数组 – 应用 map() 的完整数组

在这 3 个元素中,currentElement 参数是必需的,而其余 2 个参数是可选的。

但是,map() 不会改变原始数组,它会创建一个由回调函数生成的新数组元素。

您可以阅读更多关于JavaScript 地图功能

于 2020-10-11T13:03:42.560 回答
0

Array map() 方法返回一个新数组。它不会更改原始数组。

let array = arr.map((c, i, arr) => { //return element to new array });

这里,

  • array 是返回的新数组。
  • arr 是调用 map 方法的原始数组。
  • c 是正在处理的当前值。
  • i 是当前值的索引。

例如:-

const originalArr = [4, 3, 2]; let newArr = originalArr.map((val) => val + val);

结果:-

newArr: [8, 6, 4] originalArr: [4, 3, 2]

于 2021-04-24T12:20:59.777 回答