数组数组中的空数组被跳过？答案

【问题标题】：Empty array in an array of arrays is skipped?数组数组中的空数组被跳过？
【发布时间】：2021-07-01 11:31:35
【问题描述】：

我偶然发现了一个我以前从未遇到过的案例。我有一个数组数组，每个数组里面都有严重的对象或者里面什么都没有。我使用这些对象来生成一些 HTML，并且一切正常，除非我尝试处理空数据（一个内部没有对象的数组）。我正在考虑遍历它们，如果我得到一个空数组来创建特定的 HTML，但我似乎无法处理它......当我这样解释时可能听起来很混乱，所以我会留下代码 sn -p 自言自语

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
for(let i = 0; i < theGrandArray.length; i++ ){
  for(let k = 0; k < theGrandArray[i].length; k++){
    if(!theGrandArray[i][k].id){
      console.log('ahaaa!')
    }
    let liElement = document.createElement('li')
    liElement.innerText = theGrandArray[i][k].id
    theUl.appendChild(liElement)
  }
}

&lt;ul id="theUl"&gt;&lt;/ul&gt;

【问题讨论】：

不清楚是什么问题；如果你想处理一个空的嵌套数组检查它的长度，如果0 做一件事，> 0 做你现在正在做的事情（或者你需要做的任何事情）。
它不起作用，因为k < theGrandArray[i].length 对于空数组始终为假。 theGrandArray[i].length 是 0 和 0 < 0 是假的。
只是一个建议，使用forEach 循环可能会帮助您更清楚地查看并进行相应的调试

标签： javascript html arrays object

【解决方案1】：

你试过调试它吗？ Chrome 开发工具可能会派上用场。您最里面的for 代码永远不会为空子数组执行，因为theGrandArray[2].length 为零。要处理这种情况，您要添加例如if 之前的 for:

if (theGrandArray[i].length === 0) { 
  /* special case */
} else {
  for (/* ... */)
}

【讨论】：

傻我，估计我的大脑在周一工作 8 小时后真的融化了 =D
是的，有时您只需要焕然一新：D

【解决方案2】：

您可以在父数组上使用.forEach()，在内部数组上使用.map()：

theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.map(el => el.id).join(', ')
  theUl.appendChild(li);
})

在这里查看：

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.map(el => el.id).join(', ')
  theUl.appendChild(li);
})

&lt;ul id="theUl"&gt;&lt;/ul&gt;

如果您想在没有项目时提供一些后备内容，可以检查内部数组的length：

theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.length
    ? arr.map(el => el.id).join(', ')
    : 'No data...';
  theUl.appendChild(li);
})

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.length
    ? arr.map(el => el.id).join(', ')
    : 'No data...';
  theUl.appendChild(li);
})

&lt;ul id="theUl"&gt;&lt;/ul&gt;

【讨论】：

【解决方案3】：

你只需要一个 IF 条件来决定遇到空数组时该怎么做：

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')

for(let i = 0; i < theGrandArray.length; i++ ){
  
  if (theGrandArray[i].length !== 0){
    for(let k = 0; k < theGrandArray[i].length; k++){
      if(!theGrandArray[i][k].id){
        console.log('ahaaa!')
      }
      let liElement = document.createElement('li')
      liElement.innerText = theGrandArray[i][k].id
      theUl.appendChild(liElement)
    }
  }
  else {
      let liElement = document.createElement('li')
      liElement.innerText = '---- no data ----';
      theUl.appendChild(liElement)
  }
     
  
  
  
}

&lt;ul id="theUl"&gt;&lt;/ul&gt;

【讨论】：