IT技术 - Array.map 是什么概念？ - 吾爱随笔录

Array.map 是什么概念？

IT技术 javascript jquery arrays mozilla array-map

2021-02-18 01:34:09

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

有什么帮助吗？？

6个回答

让我们稍微重写一下，然后从内而外开始工作。

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

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

这段代码中的假设是将row参数传递给函数，该函数columns是一个名为的集合column，并且存在一个getColumnCell将行和列作为参数的被调用函数。仅从这个片段中，无法说出它们是什么或这些东西来自哪里。

2021-04-16 01:34:09

我能知道这个列参数和行参数从哪里来吗，问题是我只是在不理解的情况下从一个网站转储了这段代码，现在我很痛苦..

2021-04-26 01:34:09

理解 map 函数只是这里解决方案的一部分，还有函数mapCell. 它接受一个参数row并返回如下内容：

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

单元格值取决于row和列（派对，明星发言等）

map 函数将转换应用于值，并返回转换后的值。

一个简单的例子：

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

这与您的代码非常接近。

这些参数行和列来自哪里？

2021-04-19 01:34:09

column是的元件columns，因此"parties"，"starspeak"等row在原样传递来自其他地方的参数。

2021-04-24 01:34:09

我不理解函数（行）和 .map（函数（列）{} .... 函数内部的这些参数导致我的问题。这些参数来自哪里

2021-04-25 01:34:09

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

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

概括

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

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

例子：

基本用法：

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

其它你可能感兴趣的问题

上一篇如何在 JavaScript 中检测浏览器“最小化”和“最大化”状态？下一篇允许重复的属性名称的目的是什么？