다차원 배열을 만드는 방법


148

누구나 다차원 입력 배열로 JavaScript 샘플 / 예제를 제공 할 수 있습니까? 아직 JavaScript를 처음 사용하기 때문에 도움이 되길 바랍니다.

2 행과 2 열을 입력 할 때와 같이 2 행의 입력과 2 열의 입력이 출력됩니다.

이처럼 :

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

2
'입력'이란 무엇입니까? <input>요소 또는 그냥 변수?
pimvdb

1
네 선생님 .. <입력 유형 = "text">
SpitFire

임의의 크기와 수의 차원으로 다차원 배열을 만들려는 사람들은이 답변을 확인하십시오 .
Pimp Trizkit

답변:


318
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/


1
어떻게 이렇게 작동하는지 알 수 있습니까? im Javascript
SpitFire의

1
무엇을 혼동하고 있습니까?
Jared Farrish

그것은 두 개의 입력이 있고 행과 열의 입력 또는 다른 것 인 HTML 파일을 만드는 것과 같습니다.
SpitFire

1
나는 당신이 말하는 것을 실제로 따르지 않습니다. 배열과 관련하여 무엇을하려고합니까? (또한, 내 마지막 편집을 참조하십시오.)
자레드 Farrish에게

배열 im에서 고유 이름 또는 ID를 가진 여러 행과 열을 입력합니다. 그리고 첫 번째 입력 행과 열이 R의 두 번째 입력으로 뺄 고유 이름 또는 ID를 가진 다른 행과 열을 입력합니다. 그리고 C ..
SpitFire

28

JavaScript를 사용하여 데이터 구조 및 알고리즘 에서 인용 한 인용문

좋은 부분 (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"

또한 2 차원 배열을 만들어 한 줄에 일련의 값으로 초기화 할 수도 있습니다.

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

15

값을 할당하지 않고 선언합니다.

2 차원 ...

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

3 차원 ...

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

8
이 두 예제는 각각 1x1 및 1x1x1 배열 만 생성하는 것으로 보이며, 단일 차원 중첩 배열이라고도합니다. 예를 들어 var test=new Array(new Array());test[0][0]='1';test[0][1]='2';test[1][0]='3';메시지 오류Exception: test[1] is undefined
user66001

2
이것은 잘못된 것 같습니다. 코드를 시도하면 1x1x0 배열이 나타납니다. jsfiddle.net/zU8SB/1 13 upvotes를 어떻게 얻었습니까?
랜달 쿡


12

나는 이것이 고대인 것을 알고 있지만 어떨까요?

4x4 예 (actually 4x<anything>):

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

다음으로 채울 수 있습니다.

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

아마도 "외부"1x4 (4 번째 행, 4 번째 열인 matrix [3] [3]이 아님)가이 var 선언으로 선언 (즉, 액세스 가능)하지 않는다는 것이 더 명백 할 수 있습니다. 또한 예제 설정 요소 [0] [1] ~ 5는 첫 번째 요소를 건너 뜁니다. 대신 [0] [0]을 사용하면 많은 프로그래밍 언어에서 중요한 배열 포인트를 보여줄 수 있습니다.
user66001

9

매우 간단

var states = [,];
states[0,0] = tName; 
states[0,1] = '1';
states[1,0] = tName; 
states[2,1] = '1';

. . .

states[n,0] = tName; 
states[n,1] = '1';

콘솔에서 테스트 할 때 작동하지 않는 것 같습니다. a [0,1]과 a [1,1]이라고 말하면 쓸 때 이전 값이 삭제 된 것 같습니다. 두 번째는 a [0,1]을 삭제합니다 ...
Thomas Dignan

8
function Array2D(x, y)
{
    var array2D = new Array(x);

    for(var i = 0; i < array2D.length; i++)
    {
        array2D[i] = new Array(y);
    }

    return array2D;
}

var myNewArray = Array2D(4, 9);

myNewArray[3][5] = "booger";

7

다음 코드가 요구 사항에 적합하기를 바랍니다.

var row= 20;
var column= 10;
var f = new Array();

for (i=0;i<row;i++) {
 f[i]=new Array();
 for (j=0;j<column;j++) {
  f[i][j]=0;
 }
}

예!! 이것으로 영원히 고투하고있었습니다! 비밀은 로우 열에서 추가 어레이를 생성 (또는 높이 경우, 격자를 반복)된다
닉 뉴만

4
var size = 0;   
 var darray = new Array();
    function createTable(){
        darray[size] = new Array();
        darray[size][0] = $("#chqdate").val();
        darray[size][1]= $("#chqNo").val();
        darray[size][2] = $("#chqNarration").val() ;
        darray[size][3]= $("#chqAmount").val();
        darray[size][4]= $("#chqMode").val();
    }

기능 후에 크기 var를 늘리십시오.


3

여기 내 해결책이 있습니다.

3x3 어레이의 간단한 예입니다. 더 깊이 연결하기 위해 체인을 계속 유지할 수 있습니다.

Array(3).fill().map(a => Array(3))

또는 다음 함수는 원하는 수준을 생성합니다

f = arr => {
    let str = 'return ', l = arr.length;
    arr.forEach((v, i) => {
        str += i < l-1 ? `Array(${v}).fill().map(a => ` : `Array(${v}` + ')'.repeat(l);
    });
    return Function(str)();
}
f([4,5,6]) // Generates a 4x5x6 Array

http://www.binaryoverdose.com/2017/02/07/Generating-Multidimensional-Arrays-in-JavaScript/


2

아래 코드를 따라 배열을 만들 수 있습니다.

var arraymultidimensional = []
    arraymultidimensional = [[value1,value2],[value3,value4],[value5,value6]];

결과 :
[v1] [v2] 위치 0
[v3] [v4] 위치 1
[v5] [v6] 위치 2

배열에 동적으로 추가하려면 아래 방법을 사용하십시오.

//vectorvalue format = "[value,value,...]"
function addToArray(vectorvalue){
  arraymultidimensional[arraymultidimensional.length] = vectorvalue;
}

도움이 되었기를 바랍니다. :)


1

유연성을 높이기 위해 npm 모듈 을 만들었습니다 .

// create a 3x3 array
var twodimensional = new MultiDimensional([3, 3])

// create a 3x3x4 array
var threedimensional = new MultiDimensional([3, 3, 4])

// create a 4x3x4x2 array
var fourdimensional = new MultiDimensional([4, 3, 4, 2])

// etc...

임의의 값으로 위치를 초기화 할 수도 있습니다.

// create a 3x4 array with all positions set to 0
var twodimensional = new MultiDimensional([3, 4], 0)

// create a 3x3x4 array with all positions set to 'Default String'
var threedimensionalAsStrings = new MultiDimensional([3, 3, 4], 'Default String')

또는 더 고급 :

// create a 3x3x4 array with all positions set to a unique self-aware objects.
var threedimensional = new MultiDimensional([3, 3, 4], function(position, multidimensional) {
    return {
        mydescription: 'I am a cell at position ' + position.join(),
        myposition: position,
        myparent: multidimensional
    }
})

위치에서 값을 가져오고 설정하십시오.

// get value
threedimensional.position([2, 2, 2])

// set value
threedimensional.position([2, 2, 2], 'New Value')

0

나는 이것을 위해 하나의 선형을 작성했다.

[1, 3, 1, 4, 1].reduceRight((x, y) => new Array(y).fill().map(() => JSON.parse(JSON.stringify(x))), 0);

그러나 여기서 복제에JSON.parse(JSON.stringify()) 사용되는 무료 버전 을 만드는 데 더 많은 시간을 할애 할 수 있다고 생각 합니다.

Btw, 여기에 또 다른 대답이 있습니다 .


0

나는 이것이 오래된 질문이라는 것을 알고 있지만 여기에 시도해야 할 것이 있습니다 : 다차원 배열을 만들고 그것을 html 태그 안에 넣으십시오. 이런 식으로 배열의 입력을 정확하게 조준 할 수 있습니다.

//Your Holding tag for your inputs!
<div id='input-container' class='funky'></div>

<script>
    //With VAR: you can seperate each variable with a comma instead of:
    //creating var at the beginning and a semicolon at the end.
    //Creates a cleaner layout of your variables
    var
        arr=[['input1-1','input1-2'],['input2-1','input2-2']],
        //globall calls these letters var so you dont have to recreate variable below
        i,j
    ;

    //Instead of the general 'i<array.length' you can go even further
    //by creating array[i] in place of 'i<array.length'
    for(i=0;arr[i];i++){
    for(j=0;arr[i][j];j++){
        document.getElementById('input-container').innerHTML+=
            "<input class='inner-funky'>"+arr[i][j]+"</input>"
        ;
    }}
</script>

코드를 작성하고 호출하기 쉬운 깔끔한 방법입니다. 여기 내 데모를 확인할 수 있습니다 !


document.querySelectorAll();클래스, ID 및 요소를 가져와 대담하게 갈 수 있습니다 !
Gareth Compton
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.