web-dev-qa-db-ja.com

Array.mapのコンセプトは何ですか？

Array.mapの概念を理解できません。私はMozillaとチュートリアルポイントに行きましたが、彼らはこれに関して非常に限られた情報を提供しました。

これが私が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

何か助け？

javascriptjqueryarraysmozillaarray-map
18
user2412575

少し書き直して、裏返しに作業を始めましょう。

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

function(column)の部分は、基本的にはパラメーターとして列を取り、2つのプロパティを持つ新しいオブジェクトを返す関数です。

  • 列、つまりパラメータの元の値
  • 値。行（外部変数）および列（パラメーター）でgetColumnCell関数を呼び出した結果

columns.map()部分は _Array.map_ 関数を呼び出します。この関数は配列と関数を取り、その最後のすべての項目に対して関数を実行して結果を返します。つまり、入力が配列_[1, 2, 3, 4, 5]_で、関数がisEvenのような場合、結果は配列_[false, true, false, true, false]_になります。あなたの場合、入力は列であり、出力はオブジェクトのリストであり、各オブジェクトには列と値のプロパティがあります。

最後に、var mapCell = function (row)部分は、変数mapCellにrowと呼ばれる1つの変数の関数が含まれることを宣言します-これは使用されるrowと同じです内部関数で。

単一の文で、このコード行は、実行時に行を取り、その行のすべての列の値を返す関数を宣言しています。

17
SWeko

マップ関数を理解することは、ここでのソリューションの一部にすぎません。関数mapCellもあります。これは1つのパラメーター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)
        }
    });
}

そして、これはあなたのコードにかなり近づきます。

3
Halcyon

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;
};
2
Brandon
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
2
Sohail Arif

概要

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);
1
Willem van der Veen

要素の配列があり、配列の各要素に対して同じ操作を実行する必要がある場合は、配列のJavaScriptマップ関数を使用して配列を繰り返し処理すると、各要素の操作を実行できます。それを返します。

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]
0
ABHIJEET KHIRE

おそらくここに来るほとんどの人（私のように）は基本的な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

0
Andrew