拼接第一个对象返回TypeError: Cannot read property of undefined答案

【问题标题】：Splicing first object returns TypeError: Cannot read property of undefined拼接第一个对象返回TypeError: Cannot read property of undefined
【发布时间】：2020-10-10 00:26:05
【问题描述】：

我有一个这样的数组：

var arrSession = [ { name: 'Product 01', groupID: '50303', delivery: 'mail'}, { name: 'Product 02', groupID: '50403', delivery: 'bike'} ]

这个循环删除特定对象：

for(var i=0, len=arrSession.length; i<len; i++) {
    if (arrSession[i].groupID == getGroupID && arrSession[i].delivery == getDelivery) {
        arrSession.splice(i, 1);
    }
}

如果我要删除最后一个对象，一切正常：

var getGroupID = 50403;
var getDelivery = bike;

但如果我要删除第一个对象：

var getGroupID = 50303;
var getDelivery = mail;

我收到一个错误：

TypeError: Cannot read property 'groupID' of undefined

为什么会这样以及如何解决？

编辑：

如果只有一个对象，一切都很好。

var arrSession = [ { name: 'Product 01', groupID: '50303', delivery: 'mail'} ]

【问题讨论】：

标签： javascript arrays splice array-splice

【解决方案1】：

简答：由于for 循环语法。 Initialization 仅发生在 once。您错过了在splicing 之后更新len。

for ([initialExpression]; [条件]; [incrementExpression]) 声明

解决方案：正如其他答案中已经提到的，您可以break 循环（如果您只为一项添加香料，它将起作用）。

const arrSessionActual = [{
  name: 'Product 01',
  groupID: '50303',
  delivery: 'mail'
}, {
  name: 'Product 02',
  groupID: '50403',
  delivery: 'bike'
}];

function removeItem(arrSession, getGroupID, getDelivery) {
  for (var i = 0,
      len = arrSession.length; i < len; i++) {
    if (arrSession[i].groupID == getGroupID && arrSession[i].delivery == getDelivery) {
      arrSession.splice(i, 1);
      len = arrSession.length; // This is missing
    }
  }

  console.log(arrSession);
}

removeItem(arrSessionActual.slice(), 50403, 'bike');
removeItem(arrSessionActual.slice(), 50303, 'mail');

【讨论】：

【解决方案2】：

我认为这是因为当循环开始时，它将上升到索引 1。删除索引 0 后，您的循环仍会尝试运行并搜索索引 1，即已移动的第二个对象。如果在 if 语句中加上break 关键字，应该可以修复错误。

for(var i=0, len=arrSession.length; i<len; i++) {
    if (arrSession[i].groupID == getGroupID && arrSession[i].delivery == getDelivery) {
        arrSession.splice(i, 1);
        break;
    }
}

【讨论】：

【解决方案3】：

非常简单，您从数组的开头进行迭代，然后在找到时拼接数组。数组现在比存储的长度短，任何访问都会出错。

您可以改为从末尾循环。

var arrSession = [{ name: 'Product 01', groupID: '50303', delivery: 'mail' }, { name: 'Product 02', groupID: '50403', delivery: 'bike' }],
    getGroupID = 50303,
    getDelivery = 'mail',
    i = arrSession.length;

while (i--) {
    if (arrSession[i].groupID == getGroupID && arrSession[i].delivery == getDelivery) {
        arrSession.splice(i, 1);
    }
}

console.log(arrSession);

【讨论】：

【解决方案4】：

尝试将“groupId”转换为整数格式。

前-：

for(var i=0, len=arrSession.length; i<len; i++) {
    if (parseInt(arrSession[i].groupID) == getGroupID && arrSession[i].delivery == getDelivery) {
        arrSession.splice(i, 1);
    }
}

【讨论】：

【解决方案5】：

Array.splice 改变数组。如果删除第一个元素，数组长度会减少 1，但在循环中它仍会尝试访问下一个元素，该元素可能是也可能不是 undefined。因为这里只有 2 个元素，所以 arrSession[1] 是 undefined。

改为使用这样的过滤器：

var arrSession = [{
  name: 'Product 01',
  groupID: '50303',
  delivery: 'mail'
}, {
  name: 'Product 02',
  groupID: '50403',
  delivery: 'bike'
}]


var getGroupID = 50303;
var getDelivery = 'mail';



var filtered = arrSession.filter(session => session.id !== getGroupID && session.delivery !== getDelivery)

console.log(filtered)

希望这会有所帮助！

【讨论】：