javascript - 在javascript中重新排序数组

Question

假设您有一个这样的数组，我想对它重新排序。

var myarray = [
    [178, 559, 906, 1252] , [381 , 537 , 937 , 1115] , [346 , 529 , 913 , 1069]
];

我想做的是遍历每个数组，在第一个循环中获取每个数组的第一个值，然后将每个值插入一个单独的数组。第二次循环运行时，取每个数组的第二个值，将它们插入单独的数组，依此类推。这样单独的数组看起来像这样；

var myNewArray = [178, 381, 346, 559, 537, 529, 906, 937, 913, 1252, 1115, 1069];

到目前为止，我已经遍历了每个数组并获取了所有值，但是无法计算出仅针对第一个循环中的第一个值、第二个循环中的第二个值等的逻辑等等

var arraylength = myarray.length;

for (var i = 0; i < arraylength; i++ ) {

    console.log(i+1 + " time around");

    var noc = myarray[i].length;

    for (var k = 0; k < noc; k++) {
        var a = myarray[i][k];
        console.log(a);
    };
};

这是一个 JSFiddle

Answer 1

好的...

也许这有点过分了，但我回家的路途很长，还有一些时间可以打发。

您的算法问题围绕着您遗漏了一步这一事实。您实际需要做的是遍历最长数组的范围。这意味着您需要创建一个从 0 到所有数组的所有长度的最大值的范围(实际范围，或者只知道它的最小/最大界限)。

完成后，您需要遍历该范围，并且在该范围内，您需要遍历所有数组的列表(每次迭代循环遍历每个二维数组)。
对于每个数组，您检查它是否在当前索引处有一个元素。
如果是，则将其添加到新数组。
第一步(你错过的那一步)几乎就像发牌一样；你有 4 个人在 table 上，但实际上你在外面迭代的是 52 张卡片，而不是 4 个人。

这有一堆不同的名字，这取决于你在做什么。
这可能是一个 zip 一个 merge 一个 rotation (尽管旋转并不能真正解释扁平化，只是改组)。

所以事不宜迟，这里有 3 个解决方案，它们都是对此的不同看法。
第一个解决方案是更经典的“JavaScript as Java”实现:

function findMax (arrays) {
  var i = 0;
  var l = arrays.length;
  var max = 0;
  var array = [];

  for (; i < l; i += 1) {
    array = arrays[i];
    max = array.length > max ? array.length : max;
  }

  return max;
}


function rotateAndFlatten (arrays) {

  var flattenedArray = [];

  var maxLength = findMax(arrays);

  var inner = 0;
  var outer = 0;

  var array;
  var currentValue;

  for (; outer < maxLength; outer += 1) {
    for (inner = 0; inner < arrays.length; inner += 1) {
      array = arrays[inner];
      currentValue = array[outer];
      if (currentValue || currentValue === 0) {
        flattenedArray.push(currentValue);
      }
    }
  }

  return flattenedArray;
}



var inputArray = [ [1, 2, 3], [4, 5, 6, 7], [8, 9, 10] ];
var outputArray = rotateAndFlatten(inputArray);

document.querySelector(".ResultInput--ES3").textContent = JSON.stringify(inputArray);
document.querySelector(".ResultOutput--ES3").value = JSON.stringify(outputArray);

<div ><pre>Input: <code class="ResultInput ResultInput--ES3"></code></pre></div>
<div ><pre>Output: <code ><output class="ResultOutput ResultOutput--ES3"></output></code></pre></div>

第二种是我现在更习惯的 ES5 思考方式，使用部分应用的函数，一次处理一组事物，而不是使用手动循环管理的事物实例:

function makeRange (min, max) {
  var range = [];
  var i = min;

  while (i < max) {
    range.push(i);
    i += 1;
  }

  return range;
}


function concat (a, b) {
  return a.concat(b);
}


function identity (x) {
  return x;
}


function max (a, b) {
  return b > a ? b : a;
}


function pluck (key) {
  return function pluckFrom (obj) {
    return obj[key];
  };
}


function fillIndexArrays (arrays) {
  return function (i) {
    return arrays.map(pluck(i));
  };
}


function rotateAndFlatten (array) {
  var getLength = pluck("length");
  var maxLength = array.map(getLength).reduce(max, 0);
  var indices = makeRange(0, maxLength);

  return indices.map(fillIndexArrays(array)).reduce(concat, []).filter(identity);
}


var inputArray = [ [1, 2, 3], [4, 5, 6, 7], [8, 9, 10] ];
var outputArray = rotateAndFlatten(inputArray);

document.querySelector(".ResultInput--ES5").textContent = JSON.stringify(inputArray);
document.querySelector(".ResultOutput--ES5").value = JSON.stringify(outputArray);

<div ><pre>Input: <code class="ResultInput ResultInput--ES5"></code></pre></div>
<div ><pre>Output: <code ><output class="ResultOutput ResultOutput--ES5"></output></code></pre></div>

这是它的 ES6 版本，它现在可以使用生成器和 splat 运算符来极大地简化范围的构造，并使用 lambda 来压缩代码并且同样清晰(对我/我的团队而言):

const max = (a, b) => b > a ? b : a;
const identity = x => x;
const concat = (a, b) => a.concat(b);

function * range (min, max) {
  let i = min;
  while (i <= max) {
    yield i;
    i += 1;
  }
};


const pluck = (key) => { return (obj) => obj[key]; };


function rotateAndFlatten (arrays) {
  const getLength = pluck("length");
  const maxLength = arrays.map(getLength).reduce(max, 0);

  const indices = [...range(0, maxLength)];

  return indices
    .map(i => arrays.map(pluck(i)))
    .reduce(concat, [])
    .filter(identity);
}


var inputArray = [ [1, 2, 3], [4, 5, 6, 7], [8, 9, 10] ];
var outputArray = rotateAndFlatten(inputArray);

document.querySelector(".ResultInput--ES6").textContent = JSON.stringify(inputArray);
document.querySelector(".ResultOutput--ES6").value = JSON.stringify(outputArray);

<div ><pre>Input: <code class="ResultInput ResultInput--ES6"></code></pre></div>
<div ><pre>Output: <code ><output class="ResultOutput ResultOutput--ES6"></output></code></pre></div>

作为奖励，如果我像编写 C 代码一样编写 JS，那么当我必须调试逻辑错误时，这让我非常难过(但直接切入算法的速度)，我可能会如何实现它:

function init (arrs) {
  var max;
  var i = 0;
  var l = arrs.length;
  var max = 0;
  for (i = 0; i < l; i++)
    if (max < arrs[i].length)
      max = arrs[i].length;

  var j = 0;
  var arr = [];
  for (i = 0; i < max; i++)
    for(j = 0; j < arrs.length; j++)
      if (arrs[j][i] !== undefined)
        arr.push(arrs[j][i]);

  document.querySelector(".ResultOutput--C").value = JSON.stringify(arr);
}

var arrs = [ [1, 2, 3], [4, 5, 6, 7], [8, 9, 10] ];
document.querySelector(".ResultInput--C").textContent = JSON.stringify(arrs);
init(arrs);

<div ><pre>Input: <code class="ResultInput ResultInput--C"></code></pre></div>
<div ><pre>Output: <code ><output class="ResultOutput ResultOutput--C"></output></code></pre></div>

希望这能给您带来一些值得思考的东西，让您深入了解可能起作用的低级算法，以及实现这些低级算法的高级方法。