Javascript数组循环答案

【问题标题】：Javascript array loopJavascript数组循环
【发布时间】：2015-12-13 10:03:12
【问题描述】：

是否可以像这样循环遍历数组。我想我需要改变数组数据的顺序。

数组：

var cars = [];

cars.push(["Volvo", "BMW", "Saab", "Land Rover"]);
cars.push([22, 15, 5, 17]);
cars.push([18, 13, 2, 15]);

var arrayLength = cars.length;

for (var i = 0; i < arrayLength; i++) {
 document.write(cars[0] + ' - ' + cars[1] + ' - ' + cars[2]);
}

结果

沃尔沃 - 22 - 18

宝马 - 15 - 13

萨博 - 5 - 2

路虎 - 17 - 15

【问题讨论】：

一个小插曲，你不应该客观化吗？然后它可以让您更轻松地管理数据。

标签： javascript arrays for-loop

【解决方案1】：

您会发现将数据重新组织成更有意义的东西会更有用。这里我使用了一个对象：

var cars = {
  'Volvo': [22, 18],
  'BMW': [15, 13],
  'Saab': [5, 2],
  'Land Rover': [17, 15]
}

for (var p in cars) {
  console.log(p + ' - ' + cars[p].join(' - '));
}

输出

Volvo - 22 - 18
BMW - 15 - 13
Saab - 5 - 2
Land Rover - 17 - 15

DEMO

【讨论】：

【解决方案2】：

您正在循环，但使用的是硬编码索引...

@NinaScholz 答案是正确的，但我会更进一步，这样您就不必依赖数组大小：

var cars = [];

cars.push(["Volvo", "BMW", "Saab", "Land Rover"]);
cars.push([22, 15, 5, 17]);
cars.push([18, 13, 2, 15]);

var arrayLength = cars.length, // will output 3
    carsLength = cars[0].length; // will output 4
  
for (var iCar = 0; iCar < carsLength; iCar++) {
  var carLine = []; // to hold all values for this car
    
  for(var iSize = 0; iSize < arrayLength; iSize++) {
    // add all values for this car
    carLine.push(cars[iSize][iCar]); 
  }

  // print it by joining all car values
  document.write(carLine.join(' - ') + '<br/>');
}

这样你就不会受限于数组的大小......例如，你可以很容易地拥有它：

cars.push(["Volvo", "BMW", "Saab", "Land Rover", "Mercedes"]);
cars.push([22, 15, 5, 17, 22, 32]);
cars.push([18, 13, 2, 15, 4, 5]);

代码将完美运行。

另外，一个改进是将数组排序添加到它自己的函数中并调用该函数，例如：

function getCarsWithFeatures(arr) {

    var arrayLength = cars.length, // will output 3
        carsLength = cars[0].length, // will output 4
        allCars = [];

    for (var iCar = 0; iCar < carsLength; iCar++) {
      var carLine = []; // to hold all values for this car

      for(var iSize = 0; iSize < arrayLength; iSize++) {
        // add all values for this car
        carLine.push(cars[iSize][iCar]); 
      }

      // print it by joining all car values
      allCars.push( carLine.join(' - ') );
    }

    return allCars;
}

然后你就可以轻松拥有了：

var cars = [];

cars.push(["Volvo", "BMW", "Saab", "Land Rover", "Mercedes", "Audi"]);
cars.push([22, 15, 5, 17, 22, 32]);
cars.push([18, 13, 2, 15, 4, 5]);

var allCars = getCarsWithFeatures(cars);

for(var i = 0; i < allCars.length; i++)
    document.write( allCars[i] + '<br/>' );

注意：在写代码的时候，尽量不要重复自己写的方式，如果“源”发生变化，也是可以扩展的……

【讨论】：

【解决方案3】：

假设数组具有固定大小，您可以为此使用array.prototype.reduce：

var cars = [];

cars.push(["Volvo", "BMW", "Saab", "Land Rover"]);
cars.push([22, 15, 5, 17]);
cars.push([18, 13, 2, 15]);

var res = cars.reduce(function (a, b) {
     return [a[0] + " - " + b[0], a[1] + " - " + b[1], a[2] + " - " + b[2]];
});

document.write(res);

【讨论】：

【解决方案4】：

这就是“zip”功能可以提供的帮助。使用 lodash 库

的示例

var tuples = _.zip(cars[0], cars[1], cars[2]);

然后按要求格式化：

tuples.forEach(function (tuple) {
  document.write(tuple.join(' - ') + ' <br/>')
});

您可以简单地包含 lodash（取决于您如何处理依赖项）：

<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>

【讨论】：

【解决方案5】：

是的。请检查下面的sn-p

var cars = [];

cars.push(["Volvo", "BMW", "Saab", "Land Rover"]);
cars.push([22, 15, 5, 17]);
cars.push([18, 13, 2, 15]);

var arrayLength = cars[0].length;

for (var i = 0; i < arrayLength; i++) {
 document.write(cars[0][i] + ' - ' + cars[1][i] + ' - ' + cars[2][i] + '<br>');
}

【讨论】：