ウェブサイト検索

javascript - 多次元配列を作成する方法

誰か、入力の多次元配列を使ったJavaScriptのサンプル/例を教えてくれませんか？私はまだJavaScriptに慣れていないので、助けてもらえると嬉しいです。

例えば、2行2列を入力すると、その出力は入力の2行2列になります。

こんな感じ：

[input][input]                
[input][input]

回答 #1

var numeric = [
    ['input1','input2'],
    ['input3','input4']
];
numeric[0][0] == 'input1';
numeric[0][1] == 'input2';
numeric[1][0] == 'input3';
numeric[1][1] == 'input4';

var obj = {
    'row1' : {
        'key1' : 'input1',
        'key2' : 'input2'
    },
    'row2' : {
        'key3' : 'input3',
        'key4' : 'input4'
    }
};
obj.row1.key1 == 'input1';
obj.row1.key2 == 'input2';
obj.row2.key1 == 'input3';
obj.row2.key2 == 'input4';

var mixed = {
    'row1' : ['input1', 'inpu2'],
    'row2' : ['input3', 'input4']
};
mixed.row1[0] == 'input1';
mixed.row1[1] == 'input2';
mixed.row2[0] == 'input3';
mixed.row2[1] == 'input4';

http://jsfiddle.net/z4Un3/

そして、もしDOM要素を保存したい場合は：

var inputs = [
    [
        document.createElement('input'),
        document.createElement('input')
    ],
    [
        document.createElement('input'),
        document.createElement('input')
    ]
];
inputs[0][0].id = 'input1';
inputs[0][1].id = 'input2';
inputs[1][0].id = 'input3';
inputs[1][1].id = 'input4';

上記がどれほど役に立つかは、要素を取り付けるまでよくわかりません。下記の方が、あなたが探しているものに近いかもしれません:

<input text="text" id="input5"/>
<input text="text" id="input6"/>
<input text="text" id="input7"/>
<input text="text" id="input8"/>    
var els = [
    [
        document.getElementById('input5'),
        document.getElementById('input6')
    ],
    [
        document.getElementById('input7'),
        document.getElementById('input8')
    ]
];    
els[0][0].id = 'input5';
els[0][1].id = 'input6';
els[1][0].id = 'input7';
els[1][1].id = 'input8';

http://jsfiddle.net/z4Un3/3/

あるいは、これかもしれません:

<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>

var els = [
    [
        document.getElementById('input5'),
        document.getElementById('input6')
    ],
    [
        document.getElementById('input7'),
        document.getElementById('input8')
    ]
];

var result = [];

for (var i = 0; i < els.length; i++) {
    result[result.length] = els[0][i].value - els[1][i].value;
}

これにより：

[2, 0]

コンソールで。もしそれをテキストとして出力したい場合は、result.join(' '); を使うことができ、これにより 2 0 が得られます。

http://jsfiddle.net/z4Un3/6/

編集

そして実際のデモ:

<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>
<br/>
<input type="button" value="Add" onclick="add()"/>

// This would just go in a script block in the head
function add() {
    var els = [
        [
            document.getElementById('input5'),
            document.getElementById('input6')
        ],
        [
            document.getElementById('input7'),
            document.getElementById('input8')
        ]
    ];

    var result = [];

    for (var i = 0; i < els.length; i++) {
        result[result.length] = parseInt(els[0][i].value) - parseInt(els[1][i].value);
    }

    alert(result.join(' '));
}

http://jsfiddle.net/z4Un3/8/

回答 #2

『Data Structures and Algorithms with JavaScript』から引用

『The Good Parts』（O’Reilly, p. 64）。CrockfordはJavaScriptの配列オブジェクトを拡張し、行数と列数を設定し、各値を関数に渡された値に設定する関数を追加しています。彼の定義は次の通りです：

Array.matrix = function(numrows, numcols, initial) {
    var arr = [];
    for (var i = 0; i < numrows; ++i) {
        var columns = [];
        for (var j = 0; j < numcols; ++j) {
            columns[j] = initial;
        }
        arr[i] = columns;
    }
    return arr;
}

定義をテストするためのコードはこちらです:

var nums = Array.matrix(5,5,0);
print(nums[1][1]); // displays 0
var names = Array.matrix(3,3,"");
names[1][2] = "Joe";
print(names[1][2]); // display "Joe"

1行で値のセットに初期化して、2次元配列を作成することもできます:

var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];
print(grades[2][2]); // displays 89

回答 #3

値の割り当てなしで宣言されました。

2次元…

var arrayName = new Array(new Array());

3次元…

var arrayName = new Array(new Array(new Array()));

回答 #4

これは古いことだと分かっていますが、…についてはどうですか

4x4 の例 (実際には 4x<任意のもの>):

var matrix = [ [],[],[],[] ]

以下によって埋めることができます:

for (var i=0; i<4; i++) {
   for (var j=0; j<4; j++) {
      matrix[i][j] = i*j;
   }
}

関連記事