web-dev-qa-db-ja.com

多次元JavaScript配列のforループ

以来、このループを使用して配列の要素を反復処理しています。これは、さまざまなプロパティを持つオブジェクトを内部に配置しても正常に機能します。

var cubes[];

for (i in cubes){
     cubes[i].dimension
     cubes[i].position_x
     ecc..
}

さて、このようにcubes []が宣言されたとしましょう

var cubes[][];

Javascriptでこれを行うことはできますか？で自動的に反復するにはどうすればよいですか

cubes[0][0]
cubes[0][1]
cubes[0][2]
cubes[1][0]
cubes[1][1]
cubes[1][2]
cubes[2][0]
ecc...

回避策として、私はちょうど宣言することができます：

var cubes[];
var cubes1[];

そして、2つのアレイを別々に使用します。これはより良い解決策ですか？

javascriptloopsmultidimensional-array
30
Saturnix

次のようなことができます：

var cubes = [
 [1, 2, 3],
 [4, 5, 6],    
 [7, 8, 9],
];

for(var i = 0; i < cubes.length; i++) {
    var cube = cubes[i];
    for(var j = 0; j < cube.length; j++) {
        display("cube[" + i + "][" + j + "] = " + cube[j]);
    }
}

作業jsFiddle：

上記の出力：

cube[0][0] = 1
cube[0][1] = 2
cube[0][2] = 3
cube[1][0] = 4
cube[1][1] = 5
cube[1][2] = 6
cube[2][0] = 7
cube[2][1] = 8
cube[2][2] = 9
50
icyrock.com
var cubes = [["string", "string"], ["string", "string"]];

for(var i = 0; i < cubes.length; i++) {
    for(var j = 0; j < cubes[i].length; j++) {
        console.log(cubes[i][j]);
    }
}
14
binarious

配列をループする効率的な方法は、 組み込み配列メソッド.map（） です

1次元配列の場合、次のようになります。

function HandleOneElement( Cuby ) {
   Cuby.dimension
   Cuby.position_x
   ...
}
cubes.map(HandleOneElement) ; // the map function will pass each element

2次元配列の場合：

cubes.map( function( cubeRow ) { cubeRow.map( HandleOneElement ) } )

任意の形式のn次元配列の場合：

Function.prototype.ArrayFunction = function(param) {
  if (param instanceof Array) {
    return param.map( Function.prototype.ArrayFunction, this ) ;
  }
  else return (this)(param) ;
}
HandleOneElement.ArrayFunction(cubes) ;
7
user2197265

少し遅すぎますが、この解決策はすてきできれいです

_const arr = [[1,2,3],[4,5,6],[7,8,9,10]]
for (let i of arr) {
  for (let j of i) {
    console.log(j) //Should log numbers from 1 to 10
  }
}
_

またはあなたの場合：

_const arr = [[1,2,3],[4,5,6],[7,8,9]]
for (let [d1, d2, d3] of arr) {
  console.log(`${d1}, ${d2}, ${d3}`) //Should return numbers from 1 to 9
}
_

注： _for ... of_ループはES6で標準化されているため、ES5 Javascriptコンパイラ（Babelなど）がある場合にのみ使用してください

別の注：代替案はありますが、forEach()、_for...in_、_for...of_、従来のfor()。どちらを使用するかは、ケースによって異なります。 （ES6には.map()、.filter()、.find()、.reduce()もあります）

5
WebDeg Brian

これを試して：

var i, j;

for (i = 0; i < cubes.length; i++) {
    for (j = 0; j < cubes[i].length; j++) {
       do whatever with cubes[i][j];
    }
}
5
Michael Rice

ES2015を使用していて、2次元配列のように反復する独自のオブジェクトを定義する場合は、次の方法で iterator protocol を実装できます。

  1. 返す_Symbol.iterator_と呼ばれる@@ iterator関数を定義しています...
  2. ...返すnext()関数を持つオブジェクト...
  3. ... 1つまたは2つのプロパティを持つオブジェクト：オプションのvalue（次の値がある場合）およびブール値done（反復が完了した場合はtrue）。

1次元配列反復子関数は次のようになります。

_// our custom Cubes object which implements the iterable protocol
function Cubes() {
    this.cubes = [1, 2, 3, 4];
    this.numVals = this.cubes.length;

    // assign a function to the property Symbol.iterator
    // which is a special property that the spread operator
    // and for..of construct both search for
    this[Symbol.iterator] = function () { // can't take args

        var index = -1; // keep an internal count of our index
        var self = this; // access vars/methods in object scope

        // the @@iterator method must return an object
        // with a "next()" property, which will be called
        // implicitly to get the next value
        return {
            // next() must return an object with a "done" 
            // (and optionally also a "value") property
            next: function() {
                index++;
                // if there's still some values, return next one
                if (index < self.numVals) {
                    return {
                        value: self.cubes[index],
                        done: false
                    };
                }
                // else there's no more values left, so we're done
                // IF YOU FORGET THIS YOU WILL LOOP FOREVER!
                return {done: true}
            }
        };
    };
}
_

これで、Cubesオブジェクトを反復可能オブジェクトのように扱うことができます。

_var cube = new Cubes(); // construct our cube object

// both call Symbol.iterator function implicitly:
console.log([...cube]); // spread operator
for (var value of cube) { // for..of construct
    console.log(value);
}
_

独自の2-D反復可能を作成するには、next()関数で値を返す代わりに、別の反復可能を返します。

_function Cubes() {
    this.cubes = [
        [1, 2, 3, 4],
        [5, 6, 7, 8],
        [9, 10, 11, 12],
    ];
    this.numRows = this.cubes.length;
    this.numCols = this.cubes[0].length; // assumes all rows have same length

    this[Symbol.iterator] = function () {
        var row = -1;
        var self = this;

        // create a closure that returns an iterator
        // on the captured row index
        function createColIterator(currentRow) {
            var col = -1;
            var colIterator = {}
            // column iterator implements iterable protocol
            colIterator[Symbol.iterator] = function() {
                return {next: function() {
                    col++;
                    if (col < self.numCols) {
                        // return raw value
                        return {
                            value: self.cubes[currentRow][col],
                            done: false
                        };
                    }
                    return {done: true};
                }};
            }
            return colIterator;
        }

        return {next: function() {
            row++;
            if (row < self.numRows) {
                // instead of a value, return another iterator
                return {
                    value: createColIterator(row),
                    done: false
                };
            }
            return {done: true}
        }};
    };
}
_

これで、ネストされた反復を使用できます。

_var cube = new Cubes();

// spread operator returns list of iterators, 
// each of which can be spread to get values
var rows = [...cube];
console.log([...rows[0]]);
console.log([...rows[1]]);
console.log([...rows[2]]);

// use map to apply spread operator to each iterable
console.log([...cube].map(function(iterator) { 
    return [...iterator];
}));

for (var row of cube) {
    for (var value of row) {
        console.log(value);
    }
}
_

カスタムの反復可能オブジェクトは、すべての場合に2次元配列のように動作しないことに注意してください。たとえば、map()関数を実装していません。 この答え ジェネレーターマップ関数を実装する方法を示しています（ こちらを参照 イテレーターとジェネレーターの違いについて;また、ジェネレーターはES2015ではなくES2016の機能ですので、 ll babelプリセットを変更する babelでコンパイルする場合）.

3
Galen Long

または、これを「forEach（）」で代わりに行うこともできます。

var cubes = [
 [1, 2, 3],
 [4, 5, 6],    
 [7, 8, 9],
];

cubes.forEach(function each(item) {
  if (Array.isArray(item)) {
    // If is array, continue repeat loop
    item.forEach(each);
  } else {
    console.log(item);
  }
});

配列のインデックスが必要な場合は、次のコードを試してください。

var i = 0; j = 0;

cubes.forEach(function each(item) {
  if (Array.isArray(item)) {
    // If is array, continue repeat loop
    item.forEach(each);
    i++;
    j = 0;
  } else {
    console.log("[" + i + "][" + j + "] = " + item);
    j++;
  }
});

結果は次のようになります。

[0][0] = 1
[0][1] = 2
[0][2] = 3
[1][0] = 4
[1][1] = 5
[1][2] = 6
[2][0] = 7
[2][1] = 8
[2][2] = 9
2
Masa S-AiYa

JavaScriptにはそのような宣言はありません。それはそのようになります：

var cubes = ...

とにかく

ただし、次のことができます。

for(var i = 0; i < cubes.length; i++)
{
  for(var j = 0; j < cubes[i].length; j++)
  {

  }
}

JavaScriptでは、次のようなギザギザの配列を使用できます。

[
  [1, 2, 3],
  [1, 2, 3, 4]
]

配列には、任意の長さの配列を含む、あらゆるタイプのオブジェクトを含めることができるためです。

[〜＃〜] mdc [〜＃〜] で述べたように：

「for..inは、インデックスの順序が重要な配列を反復処理するために使用しないでください」

元の構文を使用する場合、要素が数値順にアクセスされる保証はありません。

1
Matthew Flaschen