Angular如何根据gameType属性从源数组填充三个目标数组

问题原因 #

你代码的核心错误是使用+运算符操作数组，JavaScript中+不会将元素追加到数组，而是会把数组和元素都转为字符串进行拼接，你定义的数组变量最终会变成字符串类型，自然无法通过数组下标访问到元素，就会出现undefined。

修复方案 #

方案1：修改原有for循环逻辑 #

把数组=数组+元素的写法替换为数组的push()方法，该方法会将元素追加到数组末尾：

for(let i=0;i<this.MyGames.length; i++){
  switch(this.MyGames[i].gameType) { 
    case 'test': { 
      this.NumberofTest.push(this.MyGames[i])
      break; 
    } 
    case 'live': {                  
      this.NumberofLive.push(this.MyGames[i])
      console.log('salzem');
      // 注意数组下标从0开始，如果你只插入了1个元素，访问下标1也会undefined，要访问第1个元素应该用下标0
      console.log(this.NumberofLive[0]?.gameType)
      break; 
    } 
    default: {              
      this.NumberofDemo.push(this.MyGames[i])
      break; 
    }
  }
}

方案2：更简洁的forEach遍历写法 #

你可以用数组自带的forEach方法简化遍历逻辑，代码可读性更高：

this.MyGames.forEach(game => {
  switch(game.gameType) {
    case 'test':
      this.NumberofTest.push(game)
      break
    case 'live':
      this.NumberofLive.push(game)
      break
    default:
      this.NumberofDemo.push(game)
  }
})

额外注意点 #

• 数组下标从0开始计数，如果你要访问数组的第一个元素，应该使用[0]而非[1]，否则当数组长度为1时访问[1]也会返回undefined
• 如果这段分类逻辑会执行多次，建议每次执行前先重置三个数组为空，避免历史数据残留：

this.NumberofLive = []
this.NumberofTest = []
this.NumberofDemo = []

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