详解JavaScript如何优雅地实现创建多维数组

JavaScript如何优雅地实现创建多维数组

在JavaScript中，创建多维数组可以使用嵌套的数组方式实现，但这种方式不够优雅，可以使用ES6的Array.from()方法和reduce()方法来实现创建多维数组。

使用Array.from()方法创建多维数组

Array.from()方法可以将一个类似数组或可迭代对象转化为一个真正的数组。这个方法接受两个参数：第一个参数是要转化的对象，第二个参数是一个回调函数，用来修改数组中每个元素的值。

下面是一个示例，展示了如何使用Array.from()方法创建一个3x3的二维数组：

const arr = Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => 0));

在这个例子中，第一个参数传递了一个对象，该对象拥有一个length属性，其值为3，因此创建了一个有3个元素的数组，每个元素都是undefined。然后，将第二个参数设置为一个回调函数，该回调函数将调用Array.from()函数，用来创建长度为3的数组，每个元素都是0。再次创建整个数组的时候，外层的Array.from()函数将会执行3次。

使用reduce()方法创建多维数组

reduce()方法可以对数组中的元素进行累加操作，我们可以使用这个方法来创建一个多维数组。在reduce()方法中，第一个参数是一个回调函数，该回调函数有两个参数：累加器和当前值。回调函数返回的结果将会成为下一次调用的累加器的值。

下面是一个示例，展示了如何使用reduce()方法创建一个3x3的二维数组：

const arr = Array(3).fill().map(() => Array(3).fill().map(() => 0));

在这个例子中，首先使用Array(3).fill()创建了一个长度为3的数组，然后调用map()方法，将这个数组映射为一个新的数组，其中每个元素都是一个长度为3的数组。最后，在内部的map()方法中，为每个元素填充一个0。

示例说明

下面的示例使用了上述两种方式来创建一个4x4的二维数组，并将第一行和第一列的元素设置为1。

const arr1 = Array.from({ length: 4 }, (_, i) => Array.from({ length: 4 }, (_, j) => i === 0 || j === 0 ? 1 : 0));
console.log(arr1);
// [[1, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0]]

const arr2 = Array(4).fill().map((_, i) => Array(4).fill().map((_, j) => i === 0 || j === 0 ? 1 : 0));
console.log(arr2);
// [[1, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0]]

这些例子展示了如何使用Array.from()方法和reduce()方法来创建一个多维数组，您可以选择其中一种方式来实现您的需求，具体选择哪一种，取决于您的代码风格和个人偏好。