【JavaScript】数组反转reverse()会改变原顺序的解决方案_前端 翻转函数重新赋值又回去了

例如有一个Vue项目，使用列表默认是顺序渲染的，如果要倒序，就reverse()可以了么，其实不然

一个问题

首先看一个Vue例子,

template模板如下

<block v-for="(item,index) in revImages" :key="index">
	<image class="layer" :src="item.src" :style="{
		left:item.left+'px',
		top:item.top+'px',
		width:item.width+'px',
		height:item.height+'px',
		display:item.isDisplay?'block':'none'
	}"></image>
</block>
1
2
3
4
5
6
7
8
9

script脚本逻辑如下

export default {
	data(){
		return {
			images:[...],
		}
	},
	computed:{
		revImages(){
			return this.images.reverse();
		},
	},
}
1
2
3
4
5
6
7
8
9
10
11
12

其中获取的revImages已反转，若下次有变化，images又跟着反转回来，显然这是不对的，

实际上，我们看到的revImages就是images的引用，或投影

因果与心理学：看得见的只是现相，看不见的才是本质.

解决问题

这样做，使用它的索引，倒序就可以了，

export default {

	computed:{
		revImageIndexs(){
			let indexs = [];
			for(let i=this.images.length-1; i>=0; i--) indexs.push(i);
			return indexs;
		},
	},
}
1
2
3
4
5
6
7
8
9
10

revImageIndexs就是封装成一个索引数组

然后，渲染页面改成这样，渲染列表就能倒序了

<block v-for="(item,index) in revImageIndexs" :key="index">
	<image class="layer" :src="images[item].src" :style="{
		left:images[item].left+'px',
		top:images[item].top+'px',
		width:images[item].width+'px',
		height:images[item].height+'px',
		display:images[item].isDisplay?'block':'none'
	}"></image>
</block>
1
2
3
4
5
6
7
8
9

最后看完，领悟了吗，来都来了，点个赞再走呗~