如何使用单行 for 循环在 JavaScript 中创建网格？答案

【问题标题】：How to create a grid in JavaScript using a one liner for loop?如何使用单行 for 循环在 JavaScript 中创建网格？
【发布时间】：2017-05-17 19:14:57
【问题描述】：

晚上好程序员社区！是否可以在 Javascript 中创建一个线性数组。为了让我的问题更清楚，我想模仿我通常在 Javascript 上的 Python 中做的以下一个衬里：

>>> arrAy=[['_' for i in range(10)] for j in range(10)]

给出以下结果：

>>> for i in arrAy:
    print(i)
>>> [['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_']]

谢谢

【问题讨论】：

从技术上讲，您可以在 JavaScript 的 1 行中完成所有操作，只需使用 ; 分隔语句，因此 for(var i = 0; i < arrAy.length; i++) { console.log(arrAy[i]); } 是有效的
for (var i = 0; i < 10; i++) for (var j = 0; j < 10; j++) doSomething(i, j); 绝对是oneliner
我真的希望它能够工作var myArr = new Array(10).map(function() { return new Array(10).map(function() { return "_"; }); });，但由于new Array() 使用undefined 值初始化数组的方式以及map() 如何仅在具有值的数组索引上运行提供的函数，它没有:(。你可以做var anArray = [[],[],[],[],[],[],[],[],[],[]].map(function(arr) { return ["_","_","_","_","_","_","_","_","_","_"]; });虽然:)
@PatrickBarr，我可能没有完全理解您的想法，但在我看来，您并没有完全理解我的问题（对于任何歧义，我深表歉意）。我不需要显示数组 arrAy，而是使用 oneliner 创建它。类似：for ( i amount of iterations ) {for ( j amount of iterations ) { '_' }} 谢谢。
@Chihab 对不起，我没有试图回答，只是指出 javascript 不像传统语言那样完全遵循“行”，我认为你应该看看下面 le_m 的答案，如果您正在寻找极简代码

标签： javascript arrays

【解决方案1】：

首先，您需要定义一个range generator，因为没有内置的等效项：

function* range(n) {
  for (let i = 0; i < n; i++) yield i;
}

然后，您需要将 generator comprehension 替换为 for...of 循环，因为推导是 JavaScript 中的非标准功能，将来不太可能添加到 ECMAScript 中。

const arrAy = [];
for (let i of range(10)) {
  let row = [];
  for (let j of range(10)) row.push('_');
  arrAy.push(row);
}

这非常接近基于生成器的 Python 原件，但既不是惯用的 JavaScript，也不是单行代码。此外，您实际上并不需要生成器，因为您将整个结果存储在一个数组中。

基于非生成器的单线可能如下所示：

const arrAy = Array.from({length: 10}, () => Array.from({length: 10}, () => '_'));

或更短

const arrAy = Array.from({length: 10}, () => Array(10).fill('_'));

当然，如 cmets 中所述，您也可以将普通的旧 for 循环压缩到单行中，但这是代码压缩器的工作，而不是程序员的工作。

【讨论】：

【解决方案2】：

是的，您可以使用 map 和 fill 的魔力。

const grid = (width, height, value) => new Array(width)
  .fill(null)
  .map(v => new Array(height)
    .fill(value));
const grid10x10 = grid(10, 10, "_");
console.log(grid10x10);  // tada!

【讨论】：