【问题标题】:How to create multidimensional array如何创建多维数组
【发布时间】:2011-11-24 15:06:17
【问题描述】:

谁能给我一个带有多维输入数组的 JavaScript 示例/示例?希望您能提供帮助,因为我还是 JavaScript 新手。

就像当您输入 2 行 2 列时,它的输出将是 2 行输入和 2 列输入。

像这样:

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

【问题讨论】:

  • “输入”是什么意思? <input> 元素还是只是一些变量?
  • 是的,先生..
  • 对于那些希望创建具有任意大小和维数的多维数组的人,请查看answer

标签: javascript multidimensional-array


【解决方案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/

【讨论】:

  • 我能知道这是如何工作的先生.. 我对 Javascript 有点困惑
  • 你对什么感到困惑?
  • 关于我是否要制作一个 HTML 文件,其中有两个输入,它是行和列的输入或其他东西?
  • 我并没有真正听懂你在说什么。你想用你的阵列做什么? (另外,请参阅我上次的编辑。)
  • 在数组中,我将输入许多具有唯一名称或 ID 的行和列..以及具有唯一名称或 ID 的另一个行和列,其中第一个输入行和列数组将减去 R 和 C 的第二个输入。
【解决方案2】:

引用自Data Structures and Algorithms with JavaScript

好的部分(O'Reilly,第 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"

我们还可以创建一个二维数组并将其初始化为一行中的一组值:

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

【讨论】:

    【解决方案3】:

    在没有赋值的情况下声明。

    二维...

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

    3 维...

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

    【讨论】:

    • 这两个示例似乎都只产生 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
    • 这似乎是错误的。当我尝试代码时,我得到一个 1x1x0 数组。 jsfiddle.net/zU8SB/1它是如何获得 13 票的?
    • 插入'Array.push'
    【解决方案4】:

    我知道这是古老的,但是……

    4x4 示例(actually 4x&lt;anything&gt;):

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

    可以填写:

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

    【讨论】:

    • 也许可能更明显的是,没有任何“超出”1x4(因此矩阵[3][3] 不是第 4 行第 4 列)被声明(即,可访问)这个 var 声明。此外,示例设置元素 [0][1] 到 5 会跳过第一个元素。改用 [0][0] 可能有助于在许多编程语言中演示数组的一个重要点。
    【解决方案5】:

    希望以下代码符合您的要求

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

    【讨论】:

    • 是的!一直在为此苦苦挣扎!秘诀是在行列创建额外的数组(或者如果遍历网格,则创建高度)
    【解决方案6】:
    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 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]...
      【解决方案8】:
      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();
          }
      

      在你的函数之后增加 size var。

      【讨论】:

        【解决方案9】:

        所以这是我的解决方案。

        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/

        【讨论】:

          【解决方案10】:

          您可以按照以下代码创建数组:

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

          希望这会有所帮助。 :)

          【讨论】:

            【解决方案11】:

            我创建了一个npm module 来增加灵活性:

            // 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')
            

            【讨论】:

              【解决方案12】:

              我为此写了一个线性的:

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

              不过我觉得我可以花更多的时间来制作一个用于cloningJSON.parse(JSON.stringify())-free 版本。

              顺便说一句,看看我的另一个答案here

              【讨论】:

                【解决方案13】:

                我知道这是一个老问题,但可以尝试以下方法: 制作您的多维数组,并将其放在 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>
                

                它只是一种更简洁的代码编写方式,并且更易于调用。你可以查看我的演示here!

                【讨论】:

                • 你可以更大胆地通过document.querySelectorAll();获取类、ID,甚至元素!
                【解决方案14】:

                创建未初始化的多维数组:

                function MultiArray(a) {
                  if (a.length < 1) throw "Invalid array dimension";
                  if (a.length == 1) return Array(a[0]);
                  return [...Array(a[0])].map(() => MultiArray(a.slice(1)));
                }
                

                创建初始化的多维数组:

                function MultiArrayInit(a, init) {
                  if (a.length < 1) throw "Invalid array dimension";
                  if (a.length == 1) return Array(a[0]).fill(init);
                  return [...Array(a[0])].map(() => MultiArrayInit(a.slice(1), init));
                }
                

                用法:

                MultiArray([3,4,5]);  // -> Creates an array of [3][4][5] of empty cells
                
                MultiArrayInit([3,4,5], 1);  // -> Creates an array of [3][4][5] of 1s
                

                【讨论】:

                  【解决方案15】:

                  我想出了

                  let rows = 5;
                  let cols = 4;
                  let defaultValue = 0;
                  
                  Array(rows).fill([]).map((x) => x = Array(cols).fill(defaultValue));
                  

                  导致

                  (5) [Array(4), Array(4), Array(4), Array(4), Array(4)]
                  0: (4) [0, 0, 0, 0]
                  1: (4) [0, 0, 0, 0]
                  2: (4) [0, 0, 0, 0]
                  3: (4) [0, 0, 0, 0]
                  4: (4) [0, 0, 0, 0]
                  length: 5
                  

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2018-01-02
                    • 1970-01-01
                    • 2010-11-27
                    • 1970-01-01
                    • 2011-08-19
                    相关资源
                    最近更新 更多