JavaScript中如何正确声明数组的数组（二维数组）？

错误原因 #

你初始化的sections是一维空数组，直接访问sections[0]得到的是undefined，调用undefined的push方法自然会抛出类型错误。

正确实现方式 #

方案1：手动初始化对应下标的子数组

如果明确知道要用到的section下标，可以在插入元素前先给对应下标赋值为空数组：

const sections = []
// 初始化第0个section
sections[0] = []
sections[0].push(sectionItem)
sections[0].push(sectionItem)

// 初始化第1个section
sections[1] = []
sections[1].push(sectionItem)
sections[1].push(sectionItem)
sections[1].push(sectionItem)

// 初始化第2个section
sections[2] = []
sections[2].push(sectionItem)

方案2：动态判断初始化（通用方案）

如果section下标是动态生成的、无法提前预知，可以封装逻辑自动判断子数组是否存在，不存在就先初始化：

const sections = []

function addItemToSection(sectionIndex, item) {
  // 对应下标不存在时先初始化为空数组
  if (!Array.isArray(sections[sectionIndex])) {
    sections[sectionIndex] = []
  }
  sections[sectionIndex].push(item)
}

// 调用示例
addItemToSection(0, sectionItem)
addItemToSection(0, sectionItem)
addItemToSection(1, sectionItem)
addItemToSection(1, sectionItem)
addItemToSection(1, sectionItem)
addItemToSection(2, sectionItem)

方案3：ES6+简洁写法

如果运行环境支持ES2021及以上语法，可以用空值赋值运算符简化写法，不需要额外封装函数：

const sections = []

// 等价于先判断sections[0]是否为空，为空则赋值为空数组，再执行push
(sections[0] ??= []).push(sectionItem)
(sections[0] ??= []).push(sectionItem)
(sections[1] ??= []).push(sectionItem)
(sections[1] ??= []).push(sectionItem)
(sections[1] ??= []).push(sectionItem)
(sections[2] ??= []).push(sectionItem)

内容的提问来源于stack exchange，提问作者drake035