如何从指定索引处理JS数组且不遗漏元素（Angular场景）

要实现从指定索引开始展示到数组末尾，再接着展示前面被遗漏的元素，你只需要把两部分数组拼接起来就行：

1. 处理数组逻辑 #

直接用slice分别截取后面的部分和前面的部分，再用concat合并：

const arr = ["a", "b", "c", "d"];
const startIndex = 2;

// 先取从startIndex到末尾的元素，再拼接从开头到startIndex的元素
const displayArr = arr.slice(startIndex).concat(arr.slice(0, startIndex));
// 结果：["c", "d", "a", "b"]

解释：

• arr.slice(startIndex) 等价于你原来的arr.slice(startIndex, arr.length)，会得到["c","d"]
• arr.slice(0, startIndex) 会截取数组开头到startIndex（不包含）的元素，也就是["a","b"]
• concat把两个数组合并，就得到了先展示后半段再展示前半段的效果

2. 在Angular中展示 #

在组件的TS文件里定义好处理后的数组：

export class YourComponent {
  arr = ["a", "b", "c", "d"];
  startIndex = 2;
  displayArr = this.arr.slice(this.startIndex).concat(this.arr.slice(0, this.startIndex));
}

然后在模板里用*ngFor循环渲染：

<div *ngFor="let item of displayArr">
  {{ item }}
</div>

内容的提问来源于stack exchange，提问作者Mr.J