TypeScript实现无限滚动重复追加myList数组数据问题求解

错误原因分析 #

• 第一种循环写法的问题：循环判断条件直接使用了动态变化的this.myList.length，数组在push过程中长度持续增长，会导致循环次数无限增加，永远执行不完。
• 第二种写法的问题：Array.push()方法如果直接传入数组作为参数，会把整个数组当做单个元素插入，不符合展开插入所有元素的需求。

正确实现方案 #

方案1：扩展运算符（最简写法） #

直接用ES6扩展运算符把原数组元素展开作为push的参数，执行时会先拿到追加前的所有原数组元素，不受后续数组长度变化影响，TypeScript原生支持：

this.myList.push(...this.myList)

方案2：索引循环修正版 #

如果需要用索引处理的实现，提前存储追加前的原数组长度，固定循环次数即可避免死循环：

// 先存下追加前的原始长度
const originalLength = this.myList.length
for (let i = 0; i < originalLength; i++) {
  this.myList.push(this.myList[i])
}

方案3：concat方法 #

如果允许重新给数组变量赋值，可以用concat方法拼接数组，返回的新数组就是拼接后的结果：

this.myList = this.myList.concat(this.myList)

内容的提问来源于stack exchange，提问作者Hwemo C.