背景前提:
有些时候可能会遇到那种遍历数组,当满足一定条件的时候从数组中移除这一元素。但是很可能会出现数组越界问题,我遇到了这种情况,困扰了一下,分享一下给大家,如果有类似的问题可以试试,小东西大神勿喷!校园新装模块需要展示出已有产品a,通过对比查出的另外一个产品数组b,判断条件是这两个对象数组中每个对象的prodId,如果有相同的就要移除b数组中的这个元素。
初始方案:(ProdRels是数组b,allProdInsts是数组a,newOfferProdRels 就是去除重复之后的数组)
let ProdRels = this.allNewOfferProdRels;
for (let b = 0; b < ProdRels.length; b++) {
let newProdId = ProdRels[b].prodId
for (let c = 0; c < this.allProdInsts.length; c++) {
let oldProdId = this.allProdInsts[c].prodId
if (newProdId === oldProdId) {
ProdRels.splice(b, 1)
// break outer;
}
}
}
this.newOfferProdRels = ProdRels
代码写完运行,发现newOfferProdRels这个里面并不是我要的数据,根本就没有去重操作
就是数组越界问题,当找到符合判断的条件之后ProdRels.splice(b, 1)删除这个元素,数组长度就变掉了,但是for (let b = 0; b < ProdRels.length; b++) 这个地方的长度ProdRels.length没有变化,最后遍历的次数就会多出来了,此时就是数组越界了,循环会崩溃
解决方案:
1.逆序遍历:
let ProdRels = this.allNewOfferProdRels;
for (let b=ProdRels.length-1; b >=0; b--) {
let newProdId = ProdRels[b].prodId
for (let c = 0; c < this.allProdInsts.length; c++) {
let oldProdId = this.allProdInsts[c].prodId
if (newProdId === oldProdId) {
ProdRels.splice(b, 1)
// break outer;
}
}
}
this.newOfferProdRels = ProdRels
如果使用逆序遍历数组的方案就不会出现数组越界问题,因为如果是符合条件的数组元素被删掉了再次遍历
刚刚好少一个元素,数组长度是符合实际长度的,不会出现越界。如果不符合就跟正常遍历即可更不会出现问题。
2.把需要删除的元素放入新的数组中,遍历完成后,统一删除(这个有点繁琐,不推荐)