如何使用循环在JavaScript中创建符合预期格式的2D数组

架构老林

2026-8-29

JavaScript循环构建二维数组实现方案

需求说明

需要通过循环生成结构如下的二维数组：

[
  ["a1","a2","a3","a4","a5"],
  ["b1","b2","b3","b4","b5"],
  ["c1","c2","c3","c4","c5"],
  ["d1","d2","d3","d4","d5"],
  ["e1","e2","e3","e4","e5"]
]

写法错误原因

你尝试的var grid = [ for (r of rows) [ for (c of cols) r+c ] ];是早期ES提案中被废弃的数组推导式语法，不属于现行JavaScript标准，所有主流引擎都不支持该写法，运行会直接抛出语法错误。

可行实现方式

基础for循环写法（兼容性最好，逻辑最直观）

var cols = [1,2,3,4,5];
var rows = ["a", "b", "c","d", "e"];
var grid = [];

for (var i = 0; i < rows.length; i++) {
  var currentRow = [];
  var r = rows[i];
  for (var j = 0; j < cols.length; j++) {
    currentRow.push(r + cols[j]);
  }
  grid.push(currentRow);
}

Array.map写法（日常开发最常用，代码最简洁）

var cols = [1,2,3,4,5];
var rows = ["a", "b", "c","d", "e"];
// 外层遍历行，内层遍历列做字符串拼接，直接返回二维结构
var grid = rows.map(function(r) {
  return cols.map(function(c) {
    return r + c;
  });
});

ES6+环境可简化为箭头函数写法：

const cols = [1,2,3,4,5];
const rows = ["a", "b", "c","d", "e"];
const grid = rows.map(r => cols.map(c => r + c));

Array.from写法（适合已知数组长度的生成场景）

const cols = [1,2,3,4,5];
const rows = ["a", "b", "c","d", "e"];
const grid = Array.from({length: rows.length}, (_, rIdx) => {
  const r = rows[rIdx];
  return Array.from({length: cols.length}, (_, cIdx) => r + cols[cIdx])
});