首先 - 自适应限制器

Question

您好我想在JavaScript中创建多维数组，如下所示：

var multiLayer = [
  ["First", "Second", 4],
  [5, 6, 3],
  [3, 2, 1]
];

从像这样的简单数组

var simple = [
  "First",
  "Second",
  4,
  5,
  6,
  3,
  3,
  2,
  1
];

这是我的代码

var multi = [];
var howMuchBreak = 3;

for (var i = 0; i < simple.length; i++) {
  multi.push(simple[i + howMuchBreak])
}

变量howMuchBreak定义索引中的哪个位置必须创建下一个嵌套数组。

Answer 1

您可以使用Array.slice(start, end)并按所需的子数组长度递增起始值：

＆＃13;

var simple = [
  "First",
  "Second",
  4,
  5,
  6,
  3,
  3,
  2,
  1
];
var multiLayer = [];
// sub array length, in your example 3
var l = 3;
for (var i=0; i<simple.length; i += l) {
  multiLayer.push(simple.slice(i, i+l));
}
console.log(multiLayer);

＆＃13;

Answer 2

使用余数%运算符的另一种解决方案。另一个答案用较少的行解决了这个问题（实际上，另一个答案在18中我是在19中做的），但我添加这个只是为了让你熟悉%运算符，非常有用。

从MDN引用：

当一个操作数除以第二个操作数时，余数运算符返回剩余的余数。

仔细考虑代码并尝试找出此运算符适合您情况的原因和方式:)

＆＃13;

var simple = [
  "First",
  "Second",
  4,
  5,
  6,
  3,
  3,
  2,
  1
];

var multi = [];
var sub_array_length = 3;
for (var i = 0; i < simple.length; i++) {
if(i % sub_array_length === 0) {	
multi[multi.length] = [];
}	
multi[multi.length - 1].push(simple[i]);
}

console.log(multi);

＆＃13;

Answer 3

或使用while ...

var arr=[1,2,3,4,5,6,7,8,9,10]
var array = [], chunk = 3;

while (arr.length > 0){ array.push(arr.splice(0, chunk)); }

console.log(array);

Answer 4

我做了三个变种：

首先 - 自适应限制器

它做的是，做你想做的事情，但是如果还剩下空间的话就会适应。

示例：

数组：[1,2,3,4,5]
分手：2

将生成：[ [1,2], [3,4], [5] ]

var simple = [ “第一”， “第二”， 4， 5， 6， 3， 3， 2， 1 ];

var multi = [];
var howMuchBreak = 2;
var i = 0; // start counting simple array elements
var x = 0; // start counting limited array elements

while (i < simple.length) {

  var limitedArray = [];
  x = 0;
  while (x < howMuchBreak && i < simple.length) {
    limitedArray.push(simple[i]);
    x++;
    i++;
  }

  multi.push(limitedArray);

}

第二 - 非自适应限制器

也可以做你想要的但是它不适应额外的空间。

示例：

数组：[1,2,3,4,5]
分手：2

将生成：[ [1,2], [3,4], [5, undefined] ]

var simple = [ “第一”， “第二”， 4， 5， 6， 3， 3， 2， 1 ];

var multi = [];
var howMuchBreak = 2;
var i = 0; // start counting simple array elements
var x = 0; // start counting limited array elements

while (i < simple.length) {

  var limitedArray = [];
  x = 0;
  while (x < howMuchBreak) {
    limitedArray.push(simple[i]);
    x++;
    i++;
  }

  multi.push(limitedArray);

}

第三 - 与ES6类似的API

它与上面的其他相同，但更优雅。另外，我想向您介绍javascript的新功能，以改进您的代码。

该代码使用带有两个属性的配置JSON：

自适应：<boolean>（默认为true）
breakBy：<integer>

首先简单地传递simple数组，然后将config传递给simpleToMulti函数：

let multi = simpleToMulti( simpleArray, config );

示例1：

数组：[1,2,3,4,5]
config：{ adaptive: true, breakBy: 3 }
将生成：[ [1,2,3], [4,5] ]

示例2：

数组：[1,2,3,4,5]
config：{ adaptive: false, breakBy: 2 }

将生成：[ [1,2], [3,4], [5, undefined] ]

let simple = ["First", "Second", 4, 5, 6, 3, 3, 2, 1];

let config = {
  breakBy: 4,
  adaptive: true
};

function simpleToMulti(arr, config) {

  // normalize config
  if (config.breakBy === undefined) {
    console.warn('simpleToMulti: You must inform the breakBy config property');
    return;
  }
  config.adaptive = config.adaptive === undefined ? true : config.adaptive;

  // do the magic
  let limitedArray = [];
  let multiArray = [];
  arr.forEach( value => {

    if (limitedArray.length < config.breakBy) {
      limitedArray.push(value);
    }

    if (limitedArray.length === config.breakBy) {
      multiArray.push(limitedArray);
      limitedArray = [];
    }

  });

  if (limitedArray.length !== 0) {
    if (config.adaptive) {
      multiArray.push(limitedArray);
    } else {
      while (limitedArray.length < config.breakBy) {
        limitedArray.push(undefined);
      }
      multiArray.push(limitedArray);
    }
  }

  return multiArray;
}


let multi = simpleToMulti(simple, config);
console.log(multi);

Answer 5

我一直在花费最后一个小时，试图找到一种从整数数组创建多维数组的方法。这就是我最终想出的（reduceRight和times来自lodash library）。

let dimensions = [1, 2, 3]

_.reduceRight(dimensions, (result, dimension) => {
    return _.times(dimension, () => result)    
}, [])

javascript - 从数组创建多维数组

5 个答案:

首先 - 自适应限制器

第二 - 非自适应限制器

第三 - 与ES6类似的API